NLW Setup - Habits

Sumário

• Introdução
• • Informativo
• Preview do projeto Habits
• • Web
• • Mobile
• Ambientação
• • Pasta server
• • Pasta web
• • Pasta mobile
• Tecnologias

Introdução

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.

🏷️ Informativo

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.

🗓️ Preview do projeto Habits

Demonstrativo das aplicações reais em execução.

🖥️ Web

📱 Mobile

☕ Ambientação

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.

1. Acesse a pasta server para executar os comandos e efetue a instalação das dependências no terminal da pasta digitando:

npm install

2. Após a instalação das dependências é possível iniciar o servidor, digitando no terminal:

npm run dev

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

1. Acesse a pasta web para executar os comandos e efetue a instalação das dependências no terminal da pasta digitando:

npm install

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

3. Abra o navegador, a aplicação Web estará rodando em:

http://localhost:5173/

1. Acesse a pasta mobile para executar os comandos e efetue a instalação das dependências no terminal da pasta digitando:

npm install

2. 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 start

Note: 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.

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

💻 Tecnologias

• 

  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.

🔼 Voltar ao topo