Letmeask

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.

Projeto base finalizado 🚀

---

Funcionalidades

• 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.

Teste a aplicação hospedada na web

A aplicação está hospedada e completamente funcional a partir do serviço de Hosting do Firebase, clique aqui para acessar.

Teste a aplicação instalando-a na sua máquina

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 start
  

  Agora, apenas aguarde enquanto o Yarn abre a janela da aplicação para que você possa vê-la funcionando.

🛠 Tecnologias

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

Autor

---

_{Sérgio Gabriel} 🚀
Twitter