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

Curso gratuito Full Stack: crie uma aplicação completa com React, Node.js e MongoDB, com autenticação, CRUD, responsividade, Docker e deploy.

Neste curso gratuito, aprenda sobre

  • Visão geral do projeto e preparação do ambiente
  • Backend com Node.js, Express e MongoDB (fundamentos e autenticação)
  • Backend avançado: CRUD, agregações e regras de negócio
  • Frontend com React e Vite: setup, componentes e rotas
  • Autenticação no React e consumo de API (integração com backend)
  • Estilização e responsividade (CSS, Grid/Flex e Media Queries)
  • Dados, UI de carregamento e consumo de API no catálogo
  • Carrinho e fluxo de compra (estado, componentes e POST)
  • Docker e deploy do projeto (backend e frontend)

Descrição do curso

Este curso online gratuito de Desenvolvimento FullStack com React, Node e MongoDB é uma trilha prática para quem quer sair do zero e construir uma aplicação web completa, unindo backend, banco de dados e frontend em um projeto real. Você aprende a estruturar uma API com Node.js e Express, conectar e modelar dados no MongoDB e evoluir a aplicação com recursos essenciais usados no mercado.

No backend, o foco é entender a base de rotas e organização do servidor, trabalhar com persistência de dados e realizar operações de criação, leitura, atualização e remoção com segurança e consistência. Também são abordados autenticação e autorização com tokens, registro e login de usuários, além de técnicas do MongoDB para consultas mais avançadas, como agregações e agrupamentos, preparando o projeto para cenários mais próximos de produção.

No frontend, você desenvolve a interface com React, criando componentes reutilizáveis, navegação com rotas e integração com a API para consumir e enviar dados. O curso também explora conceitos fundamentais do React para controle de fluxo e estado da aplicação, além de recursos de contexto para compartilhamento de informações entre componentes, úteis em funcionalidades como carrinho e interações dinâmicas.

Para completar a experiência full stack, você aprende a estilizar a interface com técnicas modernas de layout e responsividade, incluindo ajustes para diferentes tamanhos de tela. Por fim, o curso apresenta um caminho prático para empacotar o projeto com containers e publicar backend e frontend de forma simples, ajudando você a colocar sua aplicação no ar e a consolidar um portfólio com um projeto completo.

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