Criativaria ✦
← roadmaps
Intermediário 8-12 meses

Full-Stack do Zero

Front-End + Back-End + Banco de Dados: construa produtos completos do zero

Stack: HTML5, CSS3, JavaScript (ES6+), React, Node.js, Express, PostgreSQL, Prisma ORM

Antes de começar (premissas)
  • Lógica de programação básica: variáveis, condicionais, loops, funções
  • Já instalou Node.js e sabe rodar scripts no terminal
  • Entende o que é um navegador e como funciona HTTP em linhas gerais

Trilha de IA (paralela)

Full-Stack combina front-end (o que o usuário vê) e back-end (servidor, banco de dados, regras de negócio). O roadmap cobre os dois em sequência, construindo um projeto completo que conecta as duas camadas. IA pode ajudar a gerar boilerplate e explicar erros, mas entender cada camada separadamente é o que permite debugar quando algo dá errado.

N1IA como tutorSemana 1-2

Usa IA pra aprender HTML, CSS, JavaScript. Se não consegue refazer 10 min depois sozinho, não aprendeu.

N2IA como parMês 2-4

Cursor ou Claude Code no fluxo de React e Node.js. Code o boilerplate, mas leia antes de commitar.

N3Construir COM IAMês 5-6

APIs que chamam LLMs via SDK, RAG básico, chatbots simples. Comece pelo SDK antes de frameworks.

O caminho, parada por parada

  1. Semana 1-2

    HTML e CSS: estrutura e estilo

    Como navegadores renderizam páginas, estrutura HTML semântica, CSS básico para layout e estilo

    Recursos, projetos e entregável

    IA pode gerar HTML/CSS rapidamente, mas sem entender a estrutura você não saberá corrigir quando quebrar

    Entregável: Página pessoal estática com foto, bio e links, deployada no GitHub Pages

    Recursos (PT-BR)

    Projetos pra fixar

    Marco: Primeira página no ar via GitHub Pages

  2. Mês 1

    JavaScript: a linguagem da web

    JavaScript no navegador: manipular o DOM, responder a eventos, fetch para APIs externas

    Recursos, projetos e entregável

    JavaScript tem muitas pegadinhas (hoisting, closures, async). Entender os conceitos evita horas de debug

    Entregável: App de busca que consome uma API pública e exibe resultados dinamicamente

    Recursos (PT-BR)

    Projetos pra fixar

    Marco: Primeira interação com API externa funcionando no navegador

  3. Mês 2

    React: componentes e estado

    React como forma de organizar interfaces em componentes reutilizáveis com estado gerenciado

    Recursos, projetos e entregável

    React com hooks (useState, useEffect) é o padrão do mercado BR. Aprenda o conceito de componente antes de sair instalando bibliotecas

    Entregável: App React com múltiplas páginas usando React Router, consumindo API real

    Recursos (PT-BR)

    Projetos pra fixar

    Marco: App React com navegação, formulário e integração com API funcionando

  4. Mês 3

    Node.js e Express: seu primeiro servidor

    Criar APIs REST em Node.js com Express, entender requisição, resposta, middlewares e rotas

    Recursos, projetos e entregável

    Back-end é onde as regras de negócio vivem. Entender o ciclo request/response é fundamental para debugar problemas de integração

    Entregável: API REST com CRUD completo para um recurso, testável via Postman ou Insomnia

    Recursos (PT-BR)

    Projetos pra fixar

    Marco: API REST com CRUD completo rodando localmente

  5. Mês 4

    PostgreSQL e Prisma: dados persistidos

    Banco de dados relacional, modelagem de dados, queries SQL básicas, Prisma ORM para integrar com Node.js

    Recursos, projetos e entregável

    SQL é habilidade essencial. Prisma gera as queries, mas entender SQL te salva quando o ORM não faz o que você precisa

    Entregável: API com banco de dados PostgreSQL, schema com pelo menos 2 tabelas relacionadas

    Recursos (PT-BR)

    Projetos pra fixar

    Marco: API com banco de dados persistindo dados entre reinicializações

  6. Mês 5

    Autenticação e autorização

    JWT para autenticação stateless, hash de senhas com bcrypt, rotas protegidas

    Recursos, projetos e entregável

    Nunca implemente autenticação do zero em produção sem entender o que está fazendo. Este módulo cobre os fundamentos para você tomar decisões conscientes

    Entregável: API com registro, login e rotas protegidas por token JWT

    Recursos (PT-BR)

    Projetos pra fixar

    Marco: Login funcionando com rotas que verificam token antes de responder

  7. Mês 6

    Conectando front-end e back-end

    Integrar o front-end React com a API Node.js, gerenciar estado de autenticação no cliente, lidar com CORS

    Recursos, projetos e entregável

    A integração é onde a maioria dos bugs de full-stack aparecem. Entender CORS, cookies e headers evita horas de busca

    Entregável: Aplicação completa com front-end React consumindo a API Node.js com autenticação end-to-end

    Recursos (PT-BR)

    Projetos pra fixar

    Marco: Fluxo completo: cadastro no front, token armazenado, dados carregados do banco

  8. Mês 7-9

    Deploy e portfólio

    Colocar a aplicação completa no ar: front-end na Vercel, back-end no Railway, banco de dados gerenciado

    Recursos, projetos e entregável

    Deploy é onde a aplicação encontra o mundo real. Variáveis de ambiente e CORS ficam diferentes em produção

    Entregável: Aplicação full-stack deployada e acessível por URL pública, com domínio customizado

    Recursos (PT-BR)

    Projetos pra fixar

    Marco: URL pública funcionando com usuários reais podendo se cadastrar e usar

Checklist final

    Princípios

      ← voltar para os roadmaps