<h1 align="center"> <img alt="letmeask" src=".github/assets/logo.svg" width="420px" /> NextJS | Firebase | Typescript </h1> <img alt="Rocketseat" src="https://img.shields.io/badge/Created%20by%3A-Rocketseat-%236D5CCD" /> <img alt="EddyPBR" src="https://img.shields.io/badge/Developed%20by%3A-EddyPBR-%23DD3B3F" /> <img alt="License MIT" src="https://img.shields.io/badge/License-MIT-%2398C611" /> <img alt="Typescript" src="https://img.shields.io/badge/Main%20lenguage-Typescript-%232F74C0" />

:bookmark: Resumo

Já pensou que em lives as pessoas recebem muitas perguntas, principalmente quando se ensina alguma coisa, ou apresenta algum produto/serviço? - Pois é, são várias perguntas e os apresentadores das lives tem que responder as perguntas, afinal, são clientes/possívels clientes não é mesmo?

Sabendo dessa necessidade, a #Rocketseat no seu evento #NextLevelWeek teve a brilhante idéaia de elaborar um projeto que consiste no ranqueamento de perguntas para que as perguntas prioritárias dos aprensetadores das lives sejam as mais ranqueadas ou seja, as dúvidas que são mais frequentes pela comunidade.

Acesse o vídeo no YouTube e assista a minha apresentação do projeto já hospedado pela Vercel e com configurações extras.

:bulb: Conteúdos abordados

NextJS
React
Sass
Context API's
React hooks
Firebase
Variáveis ambiente

:rocket: Milha extra

Foram adicionadas algumas funcionalidades extras e efeitos visuais para melhorar e tornar o projeto ainda mais intuítivo, lembrando que este projeto foi desenvolvido por mim utilizando o NEXTJS, dentre as funcionalidades extras estão:

Toasts de avisos do sistemas usando o react-hot-toast
Modal de ações críticas do sistema utilizando o react-modal
Ordenação de comentários por número de likes e perguntas não respondidas
Redirecionamento forçado de usuários/não usuários que estão em determinada sala e o admin encerrar a mesma
Geração de página estática quando cadastrar nova sala (cada sala tem um arquivo único, apenas comentários são carregados dinâmicamente, motivo: ajuda no SEO no compartilhamento das páginas)
Redirecionamento forçado pelo backend quando alguem que NÃO seja o admin da sala tentar acessar a devida página admin
PWA utilizando o next-pwa

:wrench: Colocando o projeto para rodar

Para colocar o projeto para rodar, basta seguir o passo a passo fornecido logo abaixo:

1º: Tenha o NODE instalado na sua máquina;
2º: Faça o download deste projeto;
3º: Com o terminal/prompt abra o diretório deste projeto e execute o comando npm run ou yarn;
4º: Enquanto executa o comando... siga o passo-a-passo para configurar o firebase neste link-firebase;
5º: Crie um arquivo .env.local no diretório raiz do projeto;
6º: Copie as variaveis do arquivo .env.example e cole no .env.local, agora preencha as informações com os dados obtidos no firebase passo 4;
7º: Após finalizado o comando do passo 3 e com tudo finalizado, agora execute o comando npm run dev ou yarn dev;
8º: Pronto tudo configurado, faça bom proveito;

:memo: License

Este projeto esta sob a MIT license para mais detalhes.

:wave: Social

Siga @EddyPBR nas redes :wink:

Siga a @Rocketeat nas redes

Letmeask

Install / Use

README