mp-gerenciador-habitos-next

📅 Gerenciador de Hábitos usando Next.js 13

Aprenda a usar o poder da versão 13+ do Next.js construindo um gerenciador de hábitos!

🔨 Requisitos

• Utilize o Next.js na versão mais atual para construir a estrutura do projeto e gerenciar as rotas da aplicação.
• Desenvolva a aplicação mobile-first.

Página inicial

• Implemente a funcionalidade de exibir uma lista de hábitos.
  • Cada hábito deve mostrar os últimos 7 dias, com um check se o hábito foi feito, um “x” se ele não foi feito ou uma bolinha cinza se ele ainda não foi marcado.
• Implemente um botão para excluir um hábito na lista de hábitos.
• Ao clicar em um hábito, você deverá redirecionar para uma nova rota que exibe os detalhes do hábito.
• Implemente um botão para adicionar hábitos que leva a uma nova página de cadastro de hábito.
• Exiba uma mensagem quando não houverem hábitos cadastrados

Página de cadastro de hábitos

• Crie um formulário para a pessoa cadastrar o nome do hábito
• Implemente um botão para submeter
• Implemente um botão para cancelar o cadastro e voltar para a página inicial.

Página de detalhes do hábito

• Mostre o nome do hábito e um botão de voltar para a tela inicial
• Mostre um calendário com os hábitos
  • A pessoa pode navegar entre os meses e verá, a cada dia do mês, um check se o hábito foi feito, um “x” se ele não foi feito ou uma bolinha cinza se ele ainda não foi marcado.
  • Quando a pessoa clica em um dia, o hábito deve ser marcado ou desmarcado.
• Faça o deploy da sua aplicação e submeta no Codante.

🔨 Desafios extras para quem quer ir além

• Implemente uma funcionalidade de “streak”, ou seja, a quantidade de dias consecutivos que o hábito foi feito.
• Implemente um login e cadastro de usuários.

🔍 Dicas

• Simplifique o backend da aplicação. O foco principal é usar o Next no front, então não precisa criar uma API muito robusta. Uma dica é utilizar o Redis da própria Vercel, que se chama KV.
• Estude sobre React 18 e Server Components.
• Utilize Server Actions
• Utilize um framework CSS, como Tailwind, para ganhar agilidade na implementação.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Mas sinta-se livre para utilizar a criatividade e fazer o seu próprio design.

🔗 Link do Figma

👉🏽 Sobre esse mini-projeto

Tecnologias sugeridas

NextJS 13

• Server Components
• Data fetching
• Server Actions
• Nested layouts
• Routes
• pages.tsx
• layout.tsx
• error.tsx
• loading.tsx
• Vercel KV
• Redis

Pré-requisitos

• React
• HTML, CSS, JavaScript

❓ FAQ

Posso utilizar outros frameworks ou outras versões do Next?

Esse projeto foi pensado para praticar a versão 13 do NextJS, utilizando React 18 com Server Components. Por isso, a resolução oficial será feita dessa forma.

Sinta-se livre para fazer de outras maneiras, caso você esteja estudando outros conteúdos. Mas considere que a solução oficial poderá não cobrir isso.

Posso usar features experimentais do Next?

Sim. Algumas features ainda estão em alpha e portanto não são recomendadas para uso em produção. Como esse se trata de um projeto para aprendizado, você pode aproveitar para experimentar essas features.

This site is open source. Improve this page.