Gerenciador de hábitos com Next.js
Assistir agora
1. Introdução
Sobre o Tutorial
Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Gerenciador de hábitos com Next.js.
Descrição do projeto
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.
👉🏽 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.
Seu Instrutor
Aulas
- 1.
Introdução
01:14 - 2.
Participando do projeto no Codante.io
05:27 - 3.
Iniciando o projeto e configurando o Next
13:12 - 4.
Criando a estrutura da página inicial
03:24 - 5.
Criando a listagem de hábitos
22:21 - 6.
Implementando a lógica de mostrar os últimos 7 dias
08:45 - 7.
Criando o formulário
04:59 - 8.
Salvando os hábitos no banco de dados
23:10 - 9.
Criando a página de detalhes do hábito
50:42 - 10.
Mostrando os hábitos no calendário
09:47 - 11.
Implementando as actions de deletar e marcar um hábito
10:25 - 12.
Fazendo o deploy e concluindo o projeto
03:22