Destino Dev

Cursos

Blog Full Stack com React + Node.js + MongoDB + Auth

Código do curso: github.com/johnpires/blog-fullstack-react-nodejs-mongodb

Construa um blog full stack completo com React no frontend, Node.js + Express no backend e MongoDB como banco de dados. Implemente autenticação JWT, criação/edição de posts, comentários, upload de imagens e deploy completo. Projeto hands-on do zero ao deploy.

Conteúdo do curso

Módulo 1: Introdução e Setup do Projeto

Conheça o projeto, configure o ambiente de desenvolvimento e entenda a arquitetura do blog full stack.

  1. O que vamos construir: visão geral do Blog Full Stack (8 min)
  2. Configurando o ambiente de desenvolvimento (8 min)
  3. Estrutura do projeto: monorepo backend e frontend (3 min)

Módulo 2: Backend: MongoDB + Express

Configure o banco de dados MongoDB com Mongoose, crie os modelos de dados e implemente as rotas CRUD da API.

  1. Conectando ao MongoDB com Mongoose (8 min)
  2. Modelos Mongoose: User, Post e Comment (3 min)
  3. API de Posts: CRUD completo com Express (3 min)
  4. Validação de dados com Express-Validator (2 min)

Módulo 3: Autenticação JWT: Login, Registro e Refresh Token

Implemente autenticação segura com JWT, bcrypt, refresh tokens e middleware de autorização.

  1. Registro e login com bcrypt + JWT (3 min)
  2. Middleware de autenticação e autorização por roles (3 min)
  3. API de comentários com autenticação (2 min)

Módulo 4: Upload de Imagens com Cloudinary

Configure upload de imagens com Multer e Cloudinary, incluindo redimensionamento e otimização automática.

  1. Configurando Multer + Cloudinary para upload (2 min)
  2. Integrando upload de imagem no fluxo de criação de posts (3 min)

Módulo 5: Frontend React: Listagem de Posts e Leitura

Construa o frontend com React e Vite. Implemente a página inicial, leitura de posts com Markdown, comentários e busca.

  1. Setup do React com Vite, TailwindCSS e React Router (2 min)
  2. Página inicial: listagem de posts com paginação (2 min)
  3. Página de post com Markdown e seção de comentários (3 min)

Módulo 6: Frontend: Autenticação, Context e Painel Admin

Implemente o contexto de autenticação, páginas de login/registro e o painel de administração com editor rico.

  1. Contexto de autenticação com React Context (3 min)
  2. Painel admin: criar e editar posts com editor rico (3 min)

Módulo 7: Deploy e Conclusão

Faça o deploy completo do blog: backend no Render, frontend na Vercel e banco no MongoDB Atlas.

  1. Deploy do backend no Render (8 min)
  2. Deploy do frontend na Vercel e próximos passos (3 min)