carol42 / habits

Projeto desenvolvido durante a NLW Setup - Trilha Ignite da @rocketseat-education e ministrada por @diego3g e @rodrigorgtic

Acompanhe seus hábitos e mantenha a motivação de Ano Novo!

Sumário

1. Sobre
2. Screenshots do projeto
3. Funcionalidades
4. Tecnologias e recursos utilizados
5. Como baixar e rodar o projeto
   • Pré requisitos
6. A desenvolvedora

📌 Sobre

Habits é uma plataforma que ajuda o usuário a acompanhar o progresso dos seus hábitos e o motiva a continuar seguindo-os. O design foi inspirado no gráfico de contribuições do GitHub.

Esse projeto foi desenvolvido durante a NLW Setup - Trilha Ignite, que aconteceu entre os dias 16 e 23 de janeiro de 2023, evento organizado e ministrado pela @rocketseat, @diego3g e @rodrigorgtic.

O layout no Figma pode ser acessado aqui.

📷 Screenshots do projeto

Home

Adicionar novo hábito

Lista de hábitos do dia

🛠️ Funcionalidades

• Criação de novos hábitos
• Detalhes do dia (hábitos completos/possíveis)
• Toggle do hábito do dia
• Tabela de hábitos diários
• Mostra o progresso dos hábitos diários
• Conexão com a API
• Lista possíveis hábitos do dia
• Toggle desabilitado em datas passadas

To do

• Autenticação (Firebase, Auth0)
• Notificações Push/Service Workers
• Perfil público com gráfico de resumo

🔧 Tecnologias, bibliotecas e recursos utilizados

• TypeScript
• Phosphor Icons
• Google Fonts
• clsx
• NPM

Server

• Node.js
• Fastify
• Prisma
  • Prisma Studio
  • Prisma ERD generator
• SQLite
• CORS

Web

• React
• Vite
• TailwindCSS
• PostCSS
• Autoprefixer
• Zod
• Day.js
• Radix UI

Mobile

• React Native
• Expo
• Expo Go
• Nativewind
• react-native-svg
  • react-native-svg-transformer
• React Navigation
• React Native Reanimated

Ferramentas de desenvolvimento

• Figma
• Insomnia
• Extensão JSON Lite (Opera)
• VSCode

Extensões do VSCode recomendadas

• Tema: Rosé Pine
• Tailwind CSS IntelliSense
• DotENV
• Prisma
• Fluent Icons
• Symbols
• Console Ninja

Configurações do VSCode do @diego3g

• settings.json

• Para configurar a extensão do Prisma:

  • CTRL + SHIFT + P
  • Open User Settings (JSON)
  • Adicione o seguinte código no arquivo:

"[prisma]": {
"editor.defaultFormatter": "Prisma.prisma",
"editor.formatOnSave": true
},

💻 Como baixar e rodar o projeto

💡 Pré requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git e Node.js.

Além disso, é bom ter um editor para trabalhar com o código como o VSCode.

# Clonar o repositório
$ git clone https://github.com/Carol42/habits

# Entrar no diretório do Servidor
$ cd habits/server

OU

# Entrar no diretório Web
$ cd habits/web

# Instalar as dependências
$ npm install

# Iniciar o projeto
$ npm run dev

* Note que para a aplicação rodar adequadamente é preciso ter tanto o Server como a interface Web rodando simultaneamente.

👩‍💻 A desenvolvedora

Caroline Heloíse de Oliveira
^{Estudante de Engenharia de Computação (UEPG)}