Mini Projetos

Mini Projeto em destaque

Treine map(), find() e reduce()

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:22/01/2025, 22:45

Faltam:

Fundamentos logoFundamentos

Treine map(), find() e reduce()

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
Javascript
Avatar do usuárioAvatar do usuário
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
+253
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árioAvatar do usuário
+39
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
+47
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ário
+175
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
+36
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ário
+64
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
+297
Fundamentos logoFundamentos

Treine filter(), forEach() e sort()

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, CSS e JavaScript
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+4
Fundamentos logoFundamentos

Landing page de Produtos de tecnologia

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

Saas com Next.js e Stripe

Nível:
Level 3 icon - purple color
Avançado
Para fazer em:
Level 2 icon - orange color
2 dias
O que você vai aprender:
Next.js Stripe
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+43
Next.js logoNext.js

SaaS - Autenticação com NextAuth, Prisma e Next.js 15

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

Galeria de imagens

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árioAvatar do usuário
+56
Next.js logoNext.js

SaaS Landing Page com Next.js e Shadcn UI

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 Next.js
Avatar do usuárioAvatar do usuárioAvatar do usuário
+43
Fundamentos logoFundamentos

Landing Page de Contabilidade

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 Fundamentos
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+35
React logoReact

Página de Review de Produto

Nível:
Level 1 icon - purple color
Iniciante
Para fazer em:
Level 1 icon - orange color
1 dia
O que você vai aprender:
React Fetch de dados Fundamentos de React useState Renderização condicional useEffect
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+13
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
+18
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árioAvatar do usuário
+39
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
+45
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
+25
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árioAvatar do usuário
+29
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ário
+122
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ário
+39
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
+16
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árioAvatar 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
+26
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ário
+48
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árioAvatar do usuárioAvatar do usuário
+23
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árioAvatar do usuário
+53
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árioAvatar do usuário
+51
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
+46
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árioAvatar do usuário
+27
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
+73
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
+11
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ário
+12
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árioAvatar do usuário
+35
Fundamentos logoFundamentos

Treine map(), find() e reduce()

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

App de Amigo Secreto

Nível:
Level 2 icon - purple color
Intermediário
Para fazer em:
Level 3 icon - orange color
1 semana
O que você vai aprender:
TailwindCSS Next.js Shadcn/ui Supabase
Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário
+2
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árioAvatar do usuário
+119
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
+5
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
+9
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
+14
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árioAvatar do usuário
+407
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
+5