Projetos práticos

3 projetos para o seu portfólio.

Três projetos reais para mostrar na entrevista. Cada um vem com o que construir, a stack, o banco de dados, o passo a passo, onde estudar e o desafio de cada passo.

Projeto 01

E-commerce fullstack

Uma loja online completa: catálogo, carrinho, login, pagamento de verdade e e-mail de confirmação. É o projeto que mais se parece com o trabalho numa empresa.

O que você vai construir

  • Catálogo com lista de produtos, busca por nome e filtro por categoria.
  • Página de produto com foto, descrição, preço e quantidade em estoque.
  • Carrinho com quantidade por item, remoção de item e total atualizado.
  • Cadastro e login.
  • Checkout com pagamento por cartão.
  • E-mail de confirmação com o resumo do pedido.
  • Página "Meus pedidos" com o status de cada pedido.
  • Painel de administração simples: cadastrar e editar produtos, ver pedidos e mudar status.

Stack

Frontend e backend
Next.js (App Router) com TypeScript. O backend fica nas rotas de API e Server Actions do próprio Next.js.
Estilo
CSS puro ou Tailwind CSS.
Banco de dados
PostgreSQL, hospedado no Neon ou no Supabase (os dois têm plano gratuito).
Acesso ao banco
Prisma (ORM), com migrations versionadas no repositório.
Autenticação
Clerk.
Pagamento
Stripe Checkout, com webhook para confirmar o pagamento.
E-mail
Resend, com os templates escritos em React Email.
Imagens
Supabase Storage ou Cloudinary.
Hospedagem
Vercel.

Banco de dados

users

  • id
  • clerk_id (único, liga ao Clerk)
  • email
  • name
  • role (customer ou admin)
  • created_at

categories

  • id
  • name
  • slug (único, usado na URL)

products

  • id
  • name
  • slug (único)
  • description
  • price_cents (inteiro)
  • stock
  • image_url
  • category_id
  • active
  • created_at

orders

  • id
  • user_id
  • status (pending, paid, shipped, canceled)
  • total_cents
  • stripe_session_id (único)
  • created_at

order_items

  • id
  • order_id
  • product_id
  • quantity
  • unit_price_cents (preço no momento da compra)

Guarde dinheiro em centavos, como número inteiro. Número decimal (float) arredonda errado e gera diferença de centavos no caixa.

Fluxo da compra

  1. O cliente envia o carrinho para o servidor.
  2. O servidor confere o estoque e recalcula o total com os preços do banco.
  3. O servidor cria o pedido com status pending e abre uma sessão de pagamento no Stripe.
  4. O cliente paga na página do Stripe.
  5. O Stripe chama o seu webhook (evento checkout.session.completed).
  6. O webhook marca o pedido como paid, baixa o estoque e envia o e-mail pelo Resend.

Passo a passo

Passo01

Git e GitHub

Repositório e versionamento

Crie o repositório no primeiro dia e faça um commit a cada funcionalidade pronta.

Desafio:Escrever mensagens de commit que expliquem o porquê da mudança e manter um README que ensine qualquer pessoa a rodar o projeto. É a primeira coisa que o recrutador abre.

Onde estudar:Git e GitHub [20 Horas](Gustavo Guanabara · Curso em Vídeo)
Assistir ↗

Passo02

Next.js e TypeScript

Estrutura do app

Crie o projeto com o App Router e monte as páginas: início, produto, carrinho, checkout e meus pedidos.

Desafio:Entender o que roda no servidor e o que roda no navegador. Buscar dados no lugar errado deixa a loja lenta ou expõe informação.

Onde estudar:Dominando Next.js completo do zero(Sujeito Programador)
Assistir ↗

Passo03

PostgreSQL e Prisma

Banco de dados e catálogo

Modele produtos, pedidos e itens do pedido, e popule o banco com produtos de teste.

Desafio:Guardar no pedido o preço que o cliente pagou. O preço do produto muda com o tempo, e o histórico de pedidos não pode mudar junto.

Onde estudar:Criando a primeira tabela com Prisma(Rocketseat)
Assistir ↗

Passo04

Clerk

Login

Adicione cadastro e login, e proteja as páginas de checkout e de meus pedidos.

Desafio:Ligar o usuário do Clerk aos pedidos que ficam no seu banco. Sem isso, ninguém consegue ver o próprio histórico.

Onde estudar:Autenticação completa: Clerk e Next.js(Mateus Meneses Dev)
Assistir ↗

Passo05

Zustand

Carrinho

Monte o carrinho no navegador e salve o estado para ele não sumir quando a página recarrega.

Desafio:Nunca confiar no preço que vem do navegador. Qualquer pessoa pode alterar o valor ali. Recalcule o total no servidor, com os preços do banco, antes de cobrar.

Onde estudar:Como Zustand deixa seu projeto profissional(Sujeito Programador)
Assistir ↗

Passo06

Stripe Checkout e webhooks

Pagamento

Crie a sessão de pagamento no servidor e só marque o pedido como pago quando o webhook do Stripe confirmar. Teste com os cartões de teste do próprio Stripe.

Desafio:O webhook pode chegar atrasado ou chegar duas vezes. Seu código precisa lidar com isso sem confirmar o mesmo pedido em dobro.

Onde estudar:App SaaS com Next.js 15 e Stripe para receber pagamentos(Codante)
Assistir ↗

Onde estudar:Webhooks // Dicionário do Programador(Código Fonte TV)
Assistir ↗

Passo07

Resend

E-mail de confirmação

Envie um e-mail com o resumo do pedido assim que o pagamento for confirmado.

Desafio:Disparar o e-mail a partir do webhook, e não da tela de "pagamento aprovado". O cliente pode fechar a aba antes dessa tela carregar.

Onde estudar:A melhor forma de enviar e-mails com React (Resend)(Rocketseat)
Assistir ↗

Passo08

Vercel

Deploy

Publique a loja, configure as variáveis de ambiente e aponte o webhook do Stripe para a URL de produção.

Desafio:Separar as chaves de teste das chaves de produção e nunca subir uma chave secreta para o GitHub.

Onde estudar:Curso Next.js: deploy na Vercel(Matheus Battisti · Hora de Codar)
Assistir ↗

Pronto quando

  • Uma compra completa funciona de ponta a ponta com o cartão de teste do Stripe.
  • O pedido só vira paid pelo webhook, nunca pela tela de sucesso.
  • O estoque nunca fica negativo, nem com duas pessoas comprando o último item.
  • Quem não está logado não acessa checkout nem pedidos, e só admin acessa o painel.
  • O projeto está no ar, com README explicando como rodar, as variáveis de ambiente e prints das telas.

Para ir além

  • Cupom de desconto.
  • Cálculo de frete.
  • Avaliações de produto.
  • Testes automatizados do fluxo de compra.

Projeto 02

Agente de IA com voz

Um agente que escuta, entende, responde falando e executa ações. O guia que eu envio traz a stack e o passo a passo completo. Abaixo estão as peças que você vai montar e onde estudar cada uma.

O que você vai construir

  • Caso de uso: uma recepcionista virtual para uma barbearia ou clínica, que atende por voz e marca horários.
  • O cliente fala direto no navegador, sem digitar nada.
  • O agente entende o pedido, consulta os horários livres e oferece opções.
  • Marca, remarca e cancela agendamentos, e confirma tudo por voz.
  • O cliente pode interromper o agente no meio de uma frase.
  • Cada conversa fica registrada, com transcrição, duração e custo.

Stack

Frontend
Uma página simples em Next.js, com o botão para começar a conversa.
Backend
Python com FastAPI, que roda o agente e as ferramentas.
Tempo real
ex.: LiveKit, que transporta o áudio entre o navegador e o agente.
Fala para texto
ex.: Whisper ou Deepgram.
LLM
ex.: OpenAI ou Claude, com tool calling.
Texto para fala
ex.: ElevenLabs ou a voz da OpenAI.
Banco de dados
PostgreSQL no Supabase.
Deploy
Container Docker em um serviço como Railway ou Fly.io.

O guia que eu envio define a stack final. Os itens marcados com ex. são exemplos comuns do mercado.

Banco de dados

services

  • id
  • name (ex.: corte, barba)
  • duration_min
  • price_cents

appointments

  • id
  • customer_name
  • customer_phone
  • service_id
  • starts_at
  • status (booked, canceled)
  • created_at

conversations

  • id
  • started_at
  • ended_at
  • duration_s
  • cost_cents

messages

  • id
  • conversation_id
  • role (user, assistant ou tool)
  • content
  • created_at

Ferramentas que a LLM pode chamar

  1. listar_horarios(data, servico): devolve os horários livres daquele dia.
  2. agendar(nome, telefone, servico, horario): cria o agendamento no banco.
  3. cancelar(agendamento_id): cancela um agendamento existente.
  4. A LLM nunca inventa horário: ela sempre consulta listar_horarios antes de oferecer uma opção.

Passo a passo

Passo01

Fala para texto (speech-to-text, ex.: Whisper)

Ouvir

Transforme o áudio do usuário em texto.

Desafio:Ruído e latência. Numa conversa, cada segundo de atraso é percebido.

Onde estudar:OpenAI Whisper Demo: Convert Speech to Text in Python(Rob Mulla, em inglês)
Assistir ↗

Passo02

LLM com tool calling

Pensar

Envie o texto para uma LLM que decide o que responder e quando chamar uma função, como consultar uma agenda.

Desafio:Descrever as ferramentas com clareza e tratar os casos em que a LLM chama a ferramenta errada ou com dados errados.

Onde estudar:OpenAI Function Calling - Full Beginner Tutorial(Dave Ebbelaar, em inglês)
Assistir ↗

Passo03

Texto para fala (text-to-speech, ex.: ElevenLabs)

Falar

Converta a resposta da LLM em áudio com voz natural.

Desafio:Começar a falar antes de a resposta inteira ficar pronta (streaming). Esperar a resposta completa deixa a conversa travada.

Onde estudar:ElevenLabs Voice API with Python(Computing Power, em inglês)
Assistir ↗

Passo04

Orquestração de voz (ex.: LiveKit)

Conversa em tempo real

Junte as três peças numa conversa contínua.

Desafio:Saber quando o usuário terminou de falar e deixar que ele interrompa o agente no meio de uma resposta, como numa conversa de verdade.

Onde estudar:Build Your First Voice AI Agent in 20 Minutes with LiveKit(Cole Medin, em inglês)
Assistir ↗

Passo05

Deploy e observabilidade

Produção

Coloque o agente no ar e acompanhe cada conversa.

Desafio:Medir latência, custo por minuto e erros. Sem esses números, você não sabe se o agente está bom.

Onde estudar:Deploy Voice AI Agents to Production with Full Observability(LiveKit, em inglês)
Assistir ↗

Pronto quando

  • Uma conversa completa, só por voz, termina com o agendamento salvo no banco.
  • A resposta chega rápido o bastante para a conversa parecer natural, e o cliente consegue interromper.
  • O agente nunca confirma um horário que já está ocupado.
  • Cada conversa fica salva, com transcrição, duração e custo.

Para ir além

  • Atender por telefone (ex.: Twilio).
  • Lembrete do horário por WhatsApp.
  • Responder dúvidas da empresa com RAG.
  • Evals para medir a qualidade das conversas.

Projeto 03

Automação com n8n: newsletter de futebol

Uma newsletter diária e 100% automática: coleta as notícias do Lance e do GE, resume com IA e envia por e-mail para quem se inscreveu.

O que você vai construir

  • Página de inscrição com nome e e-mail.
  • Confirmação por e-mail antes de começar a receber (double opt-in).
  • Descadastro com um clique em todo e-mail enviado.
  • Um workflow que roda sozinho todo dia de manhã.
  • Coleta das notícias do GE e do Lance, sem repetir notícia de um dia para o outro.
  • Resumo do dia escrito por IA, com o link da fonte em cada item.
  • Envio para todos os inscritos ativos, com registro de cada edição.

Stack

Página de inscrição
HTML e CSS (ou Next.js), hospedada na Vercel ou na Netlify.
Banco de dados
PostgreSQL no Supabase.
Automação
n8n, na nuvem ou no seu servidor com Docker.
Fontes
RSS do GE e sitemap de notícias do Lance (XML).
IA
Uma LLM via API (ex.: OpenAI).
E-mail
Gmail para começar. Resend quando a lista crescer.

Banco de dados

subscribers

  • id
  • email (único)
  • name
  • status (pending, active, unsubscribed)
  • confirm_token
  • unsubscribe_token
  • consent_at
  • created_at

articles

  • id
  • source (ge ou lance)
  • title
  • url (único)
  • published_at
  • collected_at

editions

  • id
  • sent_at
  • summary_html
  • articles_count
  • recipients_count
  • status

A coluna url única em articles é o que impede a mesma notícia de aparecer em duas edições.

Workflow no n8n, nó por nó

  1. Schedule: dispara todo dia às 7h.
  2. RSS Read: lê o feed do GE.
  3. HTTP Request e XML: busca e converte o sitemap de notícias do Lance.
  4. Merge e filtro: junta as duas fontes e mantém só as notícias das últimas 24 horas.
  5. Supabase: descarta as URLs que já estão salvas e salva as novas.
  6. LLM: escreve o resumo do dia a partir dos títulos e links.
  7. Supabase: busca os inscritos com status active.
  8. Loop em lotes e e-mail: envia o resumo para cada inscrito.
  9. Supabase: registra a edição enviada.
  10. Error Trigger: se qualquer passo falhar, você recebe um alerta.

Passo a passo

Passo01

HTML, CSS e Supabase

Página de inscrição e banco

Crie uma página simples com um campo de e-mail que salva o inscrito no banco.

Desafio:Não aceitar o mesmo e-mail duas vezes, pedir consentimento para enviar (LGPD) e oferecer um jeito fácil de se descadastrar.

Onde estudar:Supabase (o Firebase open-source) // Dicionário do Programador(Código Fonte TV)
Assistir ↗

Passo02

n8n (gatilho Schedule)

Agendar a automação

Crie o workflow que roda sozinho todo dia, no mesmo horário.

Desafio:Escolher entre o n8n na nuvem e um servidor próprio, e garantir que a automação não pare sem você perceber.

Onde estudar:Curso de n8n gratuito para iniciantes: crie automações com IA(NoCode StartUp)
Assistir ↗

Passo03

RSS

Coletar as notícias do GE

O GE publica um feed RSS de futebol (ge.globo.com/rss/ge/futebol/). Leia esse feed com o nó de RSS do n8n.

Desafio:Pegar só as notícias do dia e remover as repetidas.

Onde estudar:Transforme qualquer feed RSS em e-mail: automação de notícias com n8n(Billy Automações)
Assistir ↗

Passo04

HTTP Request e XML

Coletar as notícias do Lance

O Lance não tem RSS, mas publica um sitemap com as notícias do dia (lance.com.br/sitemap/news/today.xml). Busque esse arquivo com o nó HTTP Request e converta o XML em dados.

Desafio:Este é o problema real do projeto: nem toda fonte entrega os dados prontos. Você precisa ler o formato que existe e transformar no que você precisa.

Onde estudar:Como integrar qualquer aplicativo no n8n com HTTP Request(Pedro Almeida)
Assistir ↗

Onde estudar:n8n Tutorial: Instantly Convert XML Sitemaps to Usable JSON Data(Bradford Carlton, em inglês)
Assistir ↗

Passo05

LLM (API da OpenAI no n8n)

Resumir com IA

Envie os títulos e links das notícias para a LLM e peça um resumo do dia.

Desafio:Escrever um prompt que não invente fatos, manter o link de cada notícia no resumo e controlar o custo de cada execução.

Onde estudar:Como usar a API do OpenAI ChatGPT com n8n(Promovaweb)
Assistir ↗

Passo06

E-mail (Gmail no n8n)

Enviar para os inscritos

Busque os inscritos no Supabase e envie o resumo para cada um.

Desafio:O Gmail tem limite diário de envio, e e-mail em massa cai no spam com facilidade. Para crescer, troque por um serviço de envio como o Resend e inclua sempre o link de descadastro.

Onde estudar:Como conectar o Gmail no n8n(Billy Automações)
Assistir ↗

Pronto quando

  • Inscrição, confirmação e descadastro funcionam.
  • O workflow roda todo dia sem você encostar em nada.
  • Nenhuma notícia se repete entre edições.
  • Todo item do resumo tem o link da notícia original.
  • Uma falha no workflow gera um alerta para você.

Para ir além

  • Resumo personalizado pelo time do coração.
  • Página pública com as edições anteriores.
  • Métricas de abertura e de cliques.