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.