markleylopes / React-webRTC-Meet

🎥 React WebRTC Meet 🤝🏽

Uma plataforma de chamada de vídeo em React usando protocolo WebRTC e firebase 🙂

Demo

https://react-web-rtc-meet.vercel.app

Requisitos

1. Node 16+
2. NPM 8+
3. yarn 1.22+

Envs

Variáveis de inicialização para o firebase

VITE_FIREBASE_API_KEY

VITE_FIREBASE_AUTH_DOMAIN

VITE_FIREBASE_DATABASE_URL

VITE_FIREBASE_PROJECT_ID

VITE_FIREBASE_STORAGE_BUCKET

VITE_FIREBASE_MESSAGING_SENDER_ID

VITE_FIREBASE_APP_ID

Executando o projeto

Execute os seguintes comandos para executar o projeto

1. Crie o arquivo .env com as variáveis informadas anteriormente de acordo com seu projeto firebase
2. Instale as dependencias yarn
3. Inicie o servidor local yarn dev
4. Aproveite! \o/

Estrutura dos componentes

components - Componentes gerais (Header, Card)

layouts - Componentes de layout

pages - Componentes de página

hooks - Trechos de código com a parte lógica

constants - Variávei com valores fixos que serão usados em toda aplicação

context - Armazenamento compartilhado de dados

assets - Imagens que serão usadas no projeto

constants - Valores fixos que serão usados no projeto

Principais bibliotecas usadas

Vite https://vitejs.dev/

React https://reactjs.org/

Phosphor Icons https://phosphoricons.com/

Firebase https://www.npmjs.com/package/firebase

Recursos do firebase usados no projeto

1. Firestore

Referências de documentação para estudo

https://webrtc.org/

https://webrtc.github.io/samples

https://webrtc.org/getting-started/firebase-rtc-codelab

https://firebase.google.com/docs/firestore

https://firebase.google.com/docs/web/setup?hl=pt-br

https://www.youtube.com/watch?v=WmR9IMUD_CY