O Habits tracker, é uma ferramenta de acompanhamento de hábitos para o usuário colocar em prática suas resoluções e metas, ou seja, registrar ações e acompanhar a evolução dos novos hábitos que deseja colocar na sua rotina.
Então o usuário poderá definir por exemplo alguns hábitos que fará em todos os dias da semana, ou somente em dias específicos. Podendo assim visualizar o progresso dos hábitos concluídos e não concluídos no decorrer dos dias.
O projeto Habits foi desenvolvido durante o evento NLW Setup promovido pela Rocketseat nos dias 16 a 20 de janeiro de 2023, tendo o intuito de desenvolver uma aplicação Web e Mobile comunicando com o banco de dados, no acompanhamento e evolução dos hábitos criados pelo usuário.
Demonstrativo das aplicações reais em execução.
Visualizando hábitos em andamento e adicionando novo hábito.
Visualizando hábitos em andamento e adicionando novo hábito.
A preparação do ambiente do projeto Habits é dividida em três pastas sendo elas:
Após o clone deste repositório siga os procedimentos abaixo.
📂 server
Clique aqui para abrir o tutorial
- Acesse a pasta server para executar os comandos e efetue a instalação das dependências no terminal da pasta digitando:
npm install- Após a instalação das dependências é possível iniciar o servidor, digitando no terminal:
npm run dev- Para visualizar o banco de dados atual, abra um segundo terminal acessando também a pasta server enquanto a aplicação do servidor continua rodando no primeiro terminal, digitando no segundo terminal:
Nota: Para visualizar o banco de dados é necessário que o servidor continue rodando.
npx prisma studio📂 web
Clique aqui para abrir o tutorial
- Acesse a pasta web para executar os comandos e efetue a instalação das dependências no terminal da pasta digitando:
npm install- Após a instalação das dependências, é possível iniciar a aplicação Web digitando no terminal:
Nota: Para visualizar a aplicação Web com os "dados" do banco de dados, é necessário que um terminal ainda esteja rodando o servidor.
npm run dev- Abra o navegador, a aplicação Web estará rodando em:
http://localhost:5173/📂 mobile
Clique aqui para abrir o tutorial
- Acesse a pasta mobile para executar os comandos e efetue a instalação das dependências no terminal da pasta digitando:
npm install- Após a instalação das dependências, é possível iniciar a aplicação Mobile digitando no terminal:
Nota: Para visualizar a aplicação Mobile com os "dados" do banco de dados, é necessário que um terminal ainda esteja rodando o servidor.
npm startNote: Você deverá editar o arquivo .env.example renomeando para .env e alterar o conteúdo dele informando o ip onde o expo está rodando sua aplicação.
- Caso você faça muitas alterações, onde é necessário esvaziar o cache atual do build faça:
Nota: Este comando irá esvaziar o cache atual, após isto você poderá executar as próximas vezes com
npm start.
npm run clear-
Utilizado na aplicação Web, devido a facilidade na componentização.
-
Utilizado na aplicação Mobile, devido a facilidade na componentização e desenvolvimento híbrido.
-
Utilizado no back-end das duas aplicações e próximo ao banco de dados.
-
Utilizado para ter um melhor desenvolvimento, fazendo a tipagem dos dados nas duas aplicações evitando assim possíveis erros.
-
Utilizada na aplicação Mobile para gerenciar a aplicação, proporcionando uma facilidade na utilização de pacotes e configurações.
-
Ferramenta principal de estilização nas duas aplicações, poupando tempo de desenvolvimento.
-
Layout utilizado Habits (i) da Rocketseat. na criação das telas.
