Destino Dev

Cursos

Todo App Full Stack (React + Node.js)

Construa um Todo App Full Stack completo do zero com React no frontend e Node.js no backend. Aprenda a criar uma API REST, autenticação JWT, banco de dados SQLite e deploy em produção. Projeto real e prático para o seu portfólio.

Conteúdo do curso

Módulo 1: Módulo 1 — Introdução e Setup

Visão geral do projeto, ferramentas necessárias e estrutura inicial do repositório full stack.

  1. 1.1 O que vamos construir (8 min)
  2. 1.2 Configurando o ambiente de desenvolvimento (8 min)
  3. 1.3 Estrutura do projeto e arquitetura (8 min)

Módulo 2: Módulo 2 — Backend: API REST com Node.js + Express

Criação do servidor Node.js, rotas da API, middlewares de validação e tratamento de erros.

  1. 2.1 Inicializando o servidor Node.js + Express (8 min)
  2. 2.2 Criando as rotas da API REST (8 min)
  3. 2.3 Controllers e lógica de negócio (4 min)
  4. 2.4 Middleware de erros e validação (8 min)

Módulo 3: Módulo 3 — Banco de Dados: SQLite + Prisma ORM

Modelagem do banco de dados, migrações com Prisma e operações CRUD persistidas.

  1. 3.1 Instalando e configurando o Prisma ORM (8 min)
  2. 3.2 Modelando o banco de dados com Prisma Schema (8 min)
  3. 3.3 Migrações e criando o banco de dados (8 min)
  4. 3.4 Seed: populando o banco com dados iniciais (8 min)

Módulo 4: Módulo 4 — Autenticação com JWT

Registro de usuários, login, proteção de rotas e gerenciamento de sessões com JWT.

  1. 4.1 Registro de usuários com bcrypt (2 min)
  2. 4.2 Login e geração de token JWT (8 min)
  3. 4.3 Protegendo rotas com JWT middleware (8 min)
  4. 4.4 CRUD completo de Todos autenticados (8 min)

Módulo 5: Módulo 5 — Frontend: React com Vite + TypeScript

Criação da interface com React, componentes reutilizáveis, estado global com Context API e hooks.

  1. 5.1 Criando o projeto React com Vite + TypeScript (8 min)
  2. 5.2 Configurando Axios e o serviço de API (2 min)
  3. 5.3 Context API para autenticação global (8 min)
  4. 5.4 Componentes: TodoForm, TodoItem e TodoList (8 min)
  5. 5.5 Páginas Login e Dashboard (3 min)

Módulo 6: Módulo 6 — Integração Frontend + Backend

Consumo da API com Axios, autenticação no cliente, proteção de rotas no React e loading states.

  1. 6.1 Configurando o React Router com rotas protegidas (8 min)
  2. 6.2 Integrando API e gerenciando estado (8 min)
  3. 6.3 Tratamento de erros e feedback ao usuário (8 min)
  4. 6.4 Testando a integração completa frontend + backend (8 min)

Módulo 7: Módulo 7 — Deploy e Conclusão

Deploy do backend no Railway, frontend na Vercel, variáveis de ambiente em produção e próximos passos.

  1. 7.1 Deploy do backend no Railway (8 min)
  2. 7.2 Deploy do frontend na Vercel (8 min)
  3. 7.3 Variáveis de ambiente e segurança em produção (8 min)
  4. 7.4 Próximos passos e melhorias (2 min)