Mini Projetos

Mini Projeto em destaque

Landing page de Produtos de tecnologia

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:11/12/2024, 20:41

Faltam:

HTML, CSS e JavaScript logoHTML, CSS e JavaScript

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árioAvatar do usuário
+7
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
+250
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
+36
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
+44
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
+172
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
+34
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
+60
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
+291
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árioAvatar do usuário
+16
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ário
+22
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ário
+41
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árioAvatar do usuário
+25
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ário
+33
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
+17
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
+35
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
+34
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
+23
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
+28
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
+110
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ário
+36
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ário
+15
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á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á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árioAvatar do usuário
+46
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á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ário
+52
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
+49
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árioAvatar do usuário
+44
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
+70
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árioAvatar do usuário
+9
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
+10
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
+31
HTML, CSS e JavaScript logoHTML, CSS e JavaScript

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
+6
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
+4
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
+8
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á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
+4