Imagem do Curso gratuito Desenvolvimento FullStack com React, Node e MongoDB

Curso online gratuitoDesenvolvimento FullStack com React, Node e MongoDB

Duração do curso online: 11 horas e 54 minutos

Novo

Construa um app FullStack e ganhe prática em React, Node e MongoDB. Curso online gratuito, com autenticação, CRUD, deploy e projeto do zero.

Neste curso gratuito, aprenda sobre

  • Arquitetura FullStack: React no frontend, Node/Express no backend e MongoDB no banco
  • Configuração de backend com Express e Nodemon para hot reload em desenvolvimento
  • Conexão com MongoDB e uso de dotenv para variáveis de ambiente e segurança de credenciais
  • Autenticação e registro com Passport LocalStrategy, JWT e login baseado em e-mail
  • Criação de CRUDs REST (GET, POST, PUT, DELETE) com organização em routes/controllers/models
  • Consultas MongoDB: filtros, listagem por disponibilidade e operações em collections
  • Aggregate e $lookup para unir collections; $group para relatórios e agrupamentos
  • Estratégias para exclusão em cascata e integridade ao remover entidades relacionadas
  • Setup de projeto React com Vite, componentes e NavBar responsiva para mobile
  • Rotas com react-router-dom: rotas aninhadas, Outlet e proteção via localStorage
  • Consumo de API REST no React com useEffect, estado de loading e renderização com map
  • Context API (useContext) para carrinho, loops com filter e fluxo de confirmação de pedido
  • CSS com Flex/Grid, media queries e layout ocupando altura total da tela
  • Docker básico, além de deploy gratuito do backend Node e do frontend React

Descrição do curso

Domine o fluxo completo de desenvolvimento de aplicações web ao criar um projeto FullStack do zero, integrando frontend, backend e banco de dados em uma solução realista. Neste curso online gratuito, você aprende a estruturar um ambiente de desenvolvimento moderno e evoluir uma aplicação de ponta a ponta, entendendo não só o “como”, mas o “porquê” de cada decisão: organização de pastas, responsabilidades de cada camada, comunicação entre cliente e servidor e boas práticas para manter o código sustentável.

No backend, o foco é construir uma API sólida com Node.js e Express, conectada ao MongoDB, lidando com persistência de dados de forma consistente e segura. Você evolui a aplicação para contemplar autenticação e autorização, trabalhando com estratégias de login e registro, tokens JWT, variáveis de ambiente e configuração adequada do projeto para diferentes contextos (desenvolvimento e produção). A prática com operações de criação, leitura, atualização e remoção ajuda a consolidar o raciocínio de modelagem, validação e regras de negócio, enquanto recursos mais avançados do MongoDB ampliam sua capacidade de criar consultas e respostas mais inteligentes.

No frontend, você desenvolve uma interface com React, criando componentes reutilizáveis, rotas e navegação, controle de estado e integração com a API. Ao implementar telas de autenticação e proteger páginas com base na sessão do usuário, você ganha maturidade para lidar com fluxos comuns do mercado. Além disso, aprende a construir experiências responsivas, aplicar estilização com Flex, Grid e media queries, exibir estados de carregamento, renderizar listas corretamente e implementar um carrinho com gerenciamento de estado usando Context API.

Para fechar com visão profissional, o curso também aborda etapas essenciais para tirar o projeto do ambiente local: noções práticas de Docker, além de estratégias de deploy gratuito do backend e do frontend. Ao final, você terá repertório para criar e publicar aplicações FullStack, enriquecer seu portfólio e se preparar melhor para oportunidades em tecnologia, especialmente em desenvolvimento web com JavaScript moderno.

Conteúdo do curso

  • Aula em vídeo: APRENDA A PROGRAMAR DO ZERO (REACT, NODE, MONGODB) - Intro do projeto - #1 09m
  • Exercício: Quais tecnologias principais serão usadas para construir o projeto FullStack (backend, frontend e banco de dados)?
  • Aula em vídeo: PRIMEIROS PASSOS COM NODE.JS E EXPRESS - Estruturando o backend - #2 17m
  • Exercício: Qual é a principal função do Nodemon em um backend Node/Express durante o desenvolvimento?
  • Aula em vídeo: CONECTANDO AO NOSSO PRIMEIRO BANCO DE DADOS - Criando e conectando Node.js ao MongoDB - #3 17m
  • Exercício: Qual é a principal vantagem de usar variáveis de ambiente com a dependência dotenv ao configurar a conexão com o MongoDB no backend?
  • Aula em vídeo: AUTENTICAÇÃO E REGISTRAÇÃO COM NODE.JS - Registrando novo usuário (express, JWT, PassportJS) - #4.1 32m
  • Exercício: Na estratégia local do Passport, qual configuração permite usar o e-mail como campo principal de autenticação (no lugar de username)?
  • Aula em vídeo: LOGIN E AUTENTICAÇÃO COM NODE.JS - Como autenticar o usuário (Express, JWT e PassportJS) - #4.2 12m
  • Exercício: Em uma rota de login com Node.js usando Passport (LocalStrategy) e JWT, qual é o principal objetivo de gerar e retornar um token após autenticar o usuário?
  • Aula em vídeo: CRUD COMPLETO COM NODE, EXPRESS E MONGO-Interagindo com o banco de dados(GET, PUT, DELETE) - #5 42m
  • Exercício: Ao estruturar um CRUD de usuários com Node e MongoDB, qual divisão de pastas melhora a organização separando acesso a dados, controle de respostas e rotas?
  • Aula em vídeo: APRENDA A INTERAGIR COM O BANCO DE DADOS - CRUD completo com nossos pratos - MONGODB e NODE.JS - #6 26m
  • Exercício: Ao criar a rota para listar apenas os pratos disponíveis, qual filtro deve ser aplicado na consulta ao MongoDB?
  • Aula em vídeo: APRENDA A USAR O AGGREGATE DO MONGODB - Como unir diferentes tabelas usando o _id - #7 30m
  • Exercício: Ao listar ordens no MongoDB envolvendo dados de outra collection (ex.: itens e usuário), qual abordagem permite unir essas informações em uma única resposta?
  • Aula em vídeo: COMO FUNCIONA O GROUPBY NO MONGODB - Finalizando o backend - #8 22m
  • Exercício: Ao excluir uma ordem no MongoDB que possui uma coleção de itens vinculados (Order Items), qual abordagem correta deve ser aplicada no backend?
  • Aula em vídeo: PRIMEIROS PASSOS COM REACT.JS - Iniciando com o frontend do zero - #9 20m
  • Exercício: Ao iniciar um projeto React com Vite, qual sequência de comandos instala as dependências e inicia o servidor de desenvolvimento na pasta do frontend?
  • Aula em vídeo: CRIANDO NAVBAR RESPONSIVE - Como criar um componente com react - #10 44m
  • Exercício: Qual foi a abordagem usada para tornar a NavBar responsiva, exibindo um layout diferente no mobile?
  • Aula em vídeo: APRENDA COMO CRIAR ROTAS USANDO REACT - Rotas e navegação com react-router-dom - #11 16m
  • Exercício: Qual é o papel do componente Outlet ao configurar rotas aninhadas com React Router?
  • Aula em vídeo: LOGIN E REGISTRAÇÃO COM REACT - Autenticando o usuario usando REACT e JWT - #12 54m
  • Exercício: Ao implementar autenticação no React, qual é a forma correta de enviar os dados de login para o backend e evitar o refresh padrão do formulário?
  • Aula em vídeo: USENAVIGATE USEEFFECT - Redirecionamento usando useNavigate do REACT - #13 23m
  • Exercício: Em uma aplicação React com React Router, qual é a abordagem correta para impedir acesso à página de perfil quando não há dados de autenticação no localStorage?
  • Aula em vídeo: RECEBENDO DADOS DA API REST - Interagindo com o backend - #14 42m
  • Exercício: Qual é a principal vantagem de alterar a rota de /orders/:id para algo como /orders/user-orders/:userId ao buscar ordens de um usuário?
  • Aula em vídeo: DISPLAY GRID E FLEX - Aprenda como estilizar di forma simples seu projeto - #15 31m
  • Exercício: Ao estilizar o contêiner principal para o fundo ocupar toda a altura da tela, qual configuração CSS é a mais adequada?
  • Aula em vídeo: MEDIA QUERY NO CSS - Como tornar o site responsive - #16 30m
  • Exercício: Ao ajustar a responsividade de uma seção com layout em Grid, qual abordagem permite mudar de 3 colunas para 2 e depois para 1 em telas menores?
  • Aula em vídeo: INSERINDO DADOS NO MONGODB - Como inserir uma lista de dados no MongoDB - #17 12m
  • Exercício: Para inserir rapidamente vários pratos no MongoDB sem criar uma rota na API, qual abordagem é a mais adequada?
  • Aula em vídeo: PAGINA DE LOADING FOOTER - Como criar a página de carregamento no REACT - #18 25m
  • Exercício: Qual componente do Material UI é indicado para criar um ícone de carregamento em formato de círculo girando?
  • Aula em vídeo: COSUMINDO API REST COM REACT (GET) - Comunicando com nosso backend - #19 08m
  • Exercício: Ao consumir a API na página de pratos, qual abordagem é usada para buscar os dados e controlar o carregamento?
  • Aula em vídeo: CRIANDO UM LOOP COM REACT - Como usar o .map do Javascript - #20 25m
  • Exercício: Qual é a forma correta de renderizar uma lista de pratos reutilizando um componente no React?
  • Aula em vídeo: POPUP COM REACT - Como criar um popup - #21 25m
  • Aula em vídeo: USECONTEXT, COMO FUNCIONA - Construindo nosso carrinho com useContext - #22 22m
  • Aula em vídeo: CRIANDO NOSSO CARRINHO - Um pouco de CSS - #23 27m
  • Aula em vídeo: INTERAGINDO COM O CARRINHO - Aprenda como funciona o .filter e os array loops - #24 13m
  • Aula em vídeo: CONSUMINDO API METODO POST (React e Node) - Confirmando a ordem - #25 30m
  • Aula em vídeo: PRIMEIROS PASSOS COM DOCKER - Criando nosso primeiro container - #26 14m
  • Aula em vídeo: DEPLOY NODE.JS GRATIS - Faça deploy fácil e rápido do seu backend - #27 22m
  • Aula em vídeo: DEPLOY REACT.JS GRATIS - Faça deploy fácil e rápido do seu frontend - #28 14m

Este curso gratuito inclui:

11 horas e 54 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Linguagens de programação ( Python, Ruby, Java )

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso