Mini Projetos

Mini Projeto em destaque

Gráficos com shadcn/charts e Next.js

Participe do Mini Projeto da semana com a gente. Toda semana um novo Mini Projeto que será resolvido oficialmente pela equipe do Codante.

Resolução:18/09/2024, 21:00

Faltam:

Next.js logoNext.js

Gráficos com shadcn/charts e Next.js

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Avatar do usuárioAvatar do usuárioAvatar do usuário
+4
Next.jsNext.jsTailwind CSSTailwindCSSReactReactJavaScriptFundamentosHackathon
Next.js logoNext.js
Free

Gerenciador de hábitos com Next.js

Nível:
Level 3 icon - purple color
Avançado
Para fazer em:
Level 2 icon - orange color
2 dias
O que você vai aprender:
Redis Nested routes Fetch de dados Server Components Server Actions Tratamento de erros Vercel KV Streaming e Suspense
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+214
React logoReact

Drag and Drop com React e Framer Motion

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
React Framer Motion
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+25
Next.js logoNext.js

Blog pessoal com Next.js e MDX

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Next.js MDX
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+42
Next.js logoNext.js
Free

Lista de países com Next.js

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
create-next-app Estilização com Tailwind next/font next/image App router Nested routes Fetch de dados Server Components
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+148
TailwindCSS logoTailwindCSS

Toast notification animado

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Javascript CSS TailwindCSS
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+26
TailwindCSS logoTailwindCSS

Toggle de dark mode animado

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Javascript CSS TailwindCSS
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+53
TailwindCSS logoTailwindCSS
Free

Tela de login mais bonita do mundo

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
CSS TailwindCSS
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+263
Next.js logoNext.js

Siga Seu Atleta | App fullstack com Next.js

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 2 icon - orange color
2 dias
O que você vai aprender:
SQL Busca e paginação Next.js Fullstack
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+22
React logoReact

Formulário dinâmico com React Hook Form e Zod

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
React Hook Form Zod
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+21
Next.js logoNext.js

Upload de imagens com S3 e Next.js

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 2 icon - orange color
2 dias
O que você vai aprender:
next/image Server Components Server Actions AWS S3 AWS IAM
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+22
Next.js logoNext.js

Server Actions no Next.js

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Server Components Server Actions Tratamento de erros e exceções
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+24
Next.js logoNext.js

Busca, filtro, ordenação e paginação com Next.js

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 2 icon - orange color
2 dias
O que você vai aprender:
Server Components Busca e paginação Estado na URL
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+89
Next.js logoNext.js

Tattoo Shop - Website com Next.js

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
create-next-app next/font next/image App router Nested routes next/link Server Components
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+30
React logoReact

Lista de compras em React

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
React
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+10
React logoReact

Formulário de OTP com React

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
React
Avatar do usuárioAvatar do usuário
+5
Next.js logoNext.js

Autenticação com NextAuth.js e Github

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 2 icon - orange color
2 dias
O que você vai aprender:
NextAuth (Auth.js) Login com Github
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+23
React logoReact
Free

Calculadora de IMC com React

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
React
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+37
Next.js logoNext.js

Clone do ChatGPT com Next.js

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 2 icon - orange color
2 dias
O que você vai aprender:
TailwindCSS Next.js React APIs
Avatar do usuárioAvatar do usuárioAvatar do usuário
+21
React logoReact

Reconhecimento facial com React e TensorFlow

Nível:
Level 3 icon - purple color
Avançado
Para fazer em:
Level 2 icon - orange color
2 dias
O que você vai aprender:
Javascript React TensorFlow
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+43
Fundamentos logoFundamentos
Free

Página de links

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Javascript CSS HTML
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+34
Fundamentos logoFundamentos

Pomodoro timer com JavaScript

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Javascript CSS HTML
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+31
Fundamentos logoFundamentos

Input de cartão de crédito

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Javascript CSS HTML
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+18
Fundamentos logoFundamentos

Landing page do Meow Café

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 2 icon - orange color
2 dias
O que você vai aprender:
Javascript CSS HTML
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+49
Fundamentos logoFundamentos

Calendário minimalista

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Javascript CSS HTML
Avatar do usuárioAvatar do usuárioAvatar do usuário
+7
TailwindCSS logoTailwindCSS

Lista de avatares com TailwindCSS e shadcn/ui

Nível:
Level 3 icon - purple color
Avançado
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
TailwindCSS Next.js Shadcn/ui
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+9
Fundamentos logoFundamentos

Página FAQ

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Javascript CSS HTML
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+25
Next.js logoNext.js

Gráficos com shadcn/charts e Next.js

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+4
Hackathon logoHackathon
Free

Hackathon das Olimpíadas de Paris 2024

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
APIs Fetch de dados UI/UX
Avatar do usuárioAvatar do usuárioAvatar do usuário
+117
React logoReact

Jogo da memória com React

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+2
Fundamentos logoFundamentos

Jogo da velha

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Javascript CSS HTML
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+4
Fundamentos logoFundamentos

Clone do Orkut

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
CSS HTML
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+8
Hackathon logoHackathon
Free

Rinha de Frontend - 2023

Nível:
Level 3 icon - purple color
Avançado
Para fazer em:
Level 3 icon - orange color
1 semana
O que você vai aprender:
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+405
Fundamentos logoFundamentos

Contador de caracteres do Twitter

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Javascript CSS HTML
Avatar do usuárioAvatar do usuárioAvatar do usuário
+3