Aplicação web desenvolvida em React com Create React App, durante uma edição da NLW realizada pela Rocketseat. Contêm diversas funcionalidades e ferramentas que englobam o ecossistema React, ao mesmo tempo em que utiliza o Firebase como forma de realizar operações com bancos de dados.
- Autenticação com conta Google.
- Persistência de dados de autenticação.
- Criação de salas com a conta Google.
- Criação, leitura, atualização e exclusão de mensagens enviadas.
- Comunicação em tempo real a partir do Firebase.
- Listagem com filtros dos agendamentos feitos.
- Possibilidade de dar like nas mensagens.
- Possibilidade de marcar as mensagens como respondidas ou destacadas.
- Página de admin para controles da sala.
- Responsividade.
A aplicação está hospedada e completamente funcional a partir do serviço de Hosting do Firebase, clique aqui para acessar.
Primeiramente, você vai precisar ter o Node e o NPM instalados na sua máquina (você pode baixá-los aqui) , assim como o Yarn.
-
Você pode instalar o yarn da seguinte forma: acesse o terminal do seu Sistema e execute o seguinte comando:
npm install --global yarn -
Após isso você pode verificar se a instalação funcionou, executando
yarn --version
Obs: um erro comum na instalação dessas ferramentas no Windows está relacionado à políticas de segurança do Windows Powershell. Caso enfrente esse erro, você pode ver formas de resolvê-lo aqui
Após isso, acesse o terminal do seu sistema operacional, navegue até a pasta em que você quer testar a aplicação e dê o seguinte comando:
yarn create react-app letmeask --template typescript
-
O argumento "--template" define que o projeto será criado com TypeScript. Caso ele não fosse definido, o projeto seria criado com JavaScript.
-
Então, espere até que o seu projeto seja criado, e então copie os arquivos desse repositório para dentro da pasta criada pelo Create React App, permitindo que os arquivos do repositório sobrescrevam os arquivos originais.
-
O projeto apresenta uma variada gama de bibliotecas e dependências, as quais você pode instalar usando o terminal. Todas são necessárias para o pleno funcionamento do app. Acesse a linha de comando de seu S.O, navegue até a pasta do Letmeask e instale as seguintes ferramentas:
yarn add firebase yarn add node-sass@^5.0.0 yarn add react-router-dom yarn add @types/react-router-dom -D yarn add classnames -
Lembre que você precisará criar um arquivo chamado "env.local" na raiz do seu projeto e então inserir as informações da sua conta do Firebase conforme o que é exemplificado no arquivo ".env.example", você pode ler mais sobre na documentação
-
Após todo o processo de instalação, você pode executar o projeto via localhost utilizando o seguinte comando:
yarn startAgora, apenas aguarde enquanto o Yarn abre a janela da aplicação para que você possa vê-la funcionando.
As ferramentas utilizadas para o desenvolvimento da aplicação foram:
- React com TypeScript
- SASS para estilização
- React Router Dom para roteamento
- Firebase como Back-end as a Service
Sérgio Gabriel 🚀