Destino Dev

Cursos

Todo App Full Stack com React e Node.js

Construir um aplicativo de tarefas (Todo App) pode parecer simples, mas quando feito de forma full stack — com um frontend em React e um backend real em Node.js — esse projeto se torna um dos mais completos para quem está aprendendo desenvolvimento web. Neste curso, você vai construir do zero uma aplicação funcional com as mesmas ferramentas usadas por desenvolvedores profissionais no mercado de trabalho.

Você vai aprender a criar uma API REST com Node.js e Express, organizando rotas para criar, listar, editar, excluir e marcar tarefas como concluídas. No frontend, você vai desenvolver componentes React usando hooks como useState e useEffect, conectar o React ao backend com fetch, e aplicar estilização com CSS moderno para criar uma interface limpa e responsiva. Cada parte do projeto é construída passo a passo, com código real e funcional que você pode executar em sua própria máquina.

Este curso é ideal para quem já tem noções básicas de HTML, CSS e JavaScript, e quer dar o próximo passo criando aplicações full stack. Não é necessário ter experiência anterior com React ou Node.js — você vai aprender ambos de forma prática, aplicando cada conceito diretamente no projeto. Ao concluir, você terá um projeto real no portfólio e a confiança para evoluir para aplicações mais complexas.

O que você vai aprender

Ao final deste curso, você será capaz de:

Pré-requisitos

Conhecimentos básicos de HTML, CSS e JavaScript puro são necessários. Saber o que é uma função, como usar variáveis e manipular elementos HTML é suficiente para acompanhar este curso. Não é necessário conhecimento prévio de React, Node.js ou qualquer framework.

Conteúdo do curso

Módulo 1: Configuração do Ambiente e Visão Geral do Projeto

Conheça o projeto que será construído, configure seu ambiente de desenvolvimento e entenda a arquitetura full stack que será usada.

  1. O que vamos construir? Visão Geral do Todo App Full Stack (25 min)
  2. Configurando o Ambiente de Desenvolvimento (25 min)
  3. Criando a Estrutura do Projeto com React (Vite) e Node.js (30 min)

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

Construa uma API REST completa com Node.js e Express para gerenciar tarefas, incluindo CRUD, validação e persistência.

  1. Configurando o Servidor Express e Primeiras Rotas
  2. Modelando Tarefas e Criando o CRUD Completo
  3. Validação de Dados e Tratamento de Erros
  4. Persistência com JSON File (banco simples)

Módulo 3: Frontend: Construindo a Interface com React

Crie a interface do Todo App usando React com Vite, componentes reutilizáveis e gerenciamento de estado.

  1. Criando o Projeto React com Vite e Estrutura de Componentes
  2. Componente TodoList e Renderização de Listas
  3. Formulário de Criação de Tarefas com useState
  4. Componente TodoItem com Edição e Exclusão

Módulo 4: Conectando Frontend e Backend

Integre o React com a API Express usando Fetch API, hooks customizados e operações CRUD completas.

  1. Configurando CORS e Fetch API
  2. Hook Customizado useTodos para Gerenciar Estado
  3. Operações CRUD Completas via API

Módulo 5: Estilização e UX

Aplique CSS moderno, filtros e feedback visual para criar uma experiência de usuário polida e profissional.

  1. Estilizando o Todo App com CSS Moderno
  2. Filtros: Todas, Ativas e Concluídas
  3. Feedback Visual: Loading, Erros e Animações

Módulo 6: Funcionalidades Avançadas

Adicione busca, ordenação, prioridades com tags e persistência com LocalStorage como fallback.

  1. Busca e Ordenação de Tarefas
  2. Prioridades e Categorias com Tags
  3. Persistência com LocalStorage como Fallback

Módulo 7: Testes e Deploy

Teste a API com ferramentas profissionais e faça o deploy completo no Render e Vercel.

  1. Testando a API com Thunder Client/Postman
  2. Deploy do Backend no Render
  3. Deploy do Frontend na Vercel e Conclusão