Full-stackIntermediárioNão iniciado

Lista de Tarefas Fullstack

Criar um aplicativo completo de lista de tarefas com interface, servidor e banco de dados.

em 2 a 4 semanas
15 a 25 h
em 2 a 4 semanas
o que você entrega
Site no ar + repositório
o que você entrega
com checkpoint
5 etapas
com checkpoint
de aceite
9 requisitos
de aceite
0 de 5 etapas

Por que este projeto

Você já fez a lista de tarefas que vive só no navegador. Agora ela ganha um servidor e um banco: as tarefas ficam guardadas de verdade e aparecem iguais em qualquer dispositivo. É o primeiro projeto em que as duas pontas conversam, e é exatamente isso que uma vaga júnior full-stack pede para ver: um front que chama uma API sua, com deploy dos dois lados.

Você vai sair sabendo

Montar uma tela em React com estado e efeitosConsumir uma API com fetch, tratando loading e erroConstruir a API com Express e bancoConfigurar CORS e variáveis de ambienteFazer deploy separado do front e do back

O que precisa estar lá no fim

É o contrato do projeto. Quando os 9 estiverem verdade, você terminou.

  • A tela lista, cria, conclui e remove tarefas chamando a API (nada fica só no navegador)
  • A tela mostra estado de carregando e mensagem de erro quando a API falha
  • A API tem o CRUD completo e persiste num banco (SQLite ou PostgreSQL)
  • CORS configurado para o domínio do front
  • A URL da API no front vem de variável de ambiente, com um .env.example no repositório
  • Front no ar (Vercel ou Netlify)
  • API no ar (Render ou Railway) ou, se não publicar, README com passo a passo para rodar local que funciona
  • README com um desenho ou lista de como as partes se conectam (front, API, banco) e os dois links
  • Repositório organizado em pastas client e server (ou dois repositórios linkados entre si)

Etapas

  1. A API

    3 a 5 h
    • Reaproveite a API de tarefas. Se ela ainda não tem banco, é a hora.

    Pronto quando: O CRUD funciona no Postman com dados persistidos.

  2. A tela em React

    4 a 6 h
    • Crie o projeto com Vite. Um componente lista, um formulário cria.
    • Comece com dados fixos para validar a tela.

    Pronto quando: A tela funciona com dados fixos.

  3. Ligar as pontas

    3 a 5 h
    • Troque os dados fixos por fetch na API.
    • Mostre carregando e erro.
    • Configure CORS no server.

    Pronto quando: Criar uma tarefa na tela aparece no banco e recarregar a página mantém tudo.

  4. Ambiente

    1 a 2 h
    • A URL da API vira variável de ambiente no front.
    • Crie o .env.example nos dois lados.

    Pronto quando: Trocar a URL não exige mexer no código.

  5. Deploy dos dois

    2 a 4 h
    • Front na Vercel, API no Render ou Railway, banco gerenciado ou SQLite em disco.
    • Ajuste CORS para a URL de produção e escreva o README com a arquitetura.

    Pronto quando: O link do front abre numa aba anônima e as tarefas funcionam contra a API no ar.

Entrega

Terminou? Cole os links. A gente confere o que dá para conferir sozinho e o seu projeto vira parte do seu perfil.

Uma ou duas frases. Vai para a sua retrospectiva e para o post, se você quiser.

O que a gente confere sozinho

  • O site responde
  • O repositório é público
  • Tem README com conteúdo
  • O README tem o link do site
  • Pelo menos 5 commits

A conferência automática olha a estrutura: se o site abre, se o repositório é público, se tem README e commits. Ela não julga se o projeto é o que foi pedido.

Quem confere isso é a validação com IA, que lê seu código e confere cada requisito.

Entre para entregar

Validação com IA

Validação com IA é do Pro. A IA lê seu repositório, confere cada requisito e dá uma nota. Validado vale no seu perfil.

Assinar o Pro

Depois

Post pronto para o LinkedIn

Front e back conversando pela primeira vez, feito por mim. Uma lista de tarefas full-stack: React na tela, Express na API, banco guardando tudo. As tarefas aparecem iguais em qualquer dispositivo, e os dois lados estão publicados. O que esse projeto me ensinou: • Consumir uma API com fetch, com estados de carregando e erro • CORS e variáveis de ambiente (sim, elas mordem) • Deploy separado de front e back O momento em que uma tarefa criada na tela apareceu no banco foi [conta aqui]. Links do app e do repositório nos comentários. #fullstack #react #nodejs #boranatech

Lista de Tarefas com Login de Usuário