Como conectar um backend Node.js e Express ao MongoDB usando variáveis de ambiente?

Use o dotenv para guardar a string de conexão em um arquivo .env e acesse-a no backend sem expor credenciais no código.

Como proteger uma rota de perfil no React usando JWT e localStorage?

Verifique se há dados de autenticação ou token no localStorage e redirecione o usuário para o login quando não houver.

Como unir dados de coleções diferentes no MongoDB, como pedidos, itens e usuários?

Use o pipeline de agregação com $lookup para relacionar collections e retornar os dados em uma única consulta.

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

Curso online gratuito Desenvolvimento FullStack com React, Node e MongoDB

Name: Desenvolvimento FullStack com React, Node e MongoDB
Availability: InStock

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

Sobre o curso online gratuito

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

Aprenda sobreReact

Aprenda React com cursos online gratuitos e com certificado, ideais para iniciantes e desenvolvedores que desejam aprimorar suas habilidades. Estude componentes, hooks, JSX, estado, rotas e criação de aplicações modernas em aulas práticas. Encontre o melhor curso gratuito de React, avance na carreira e destaque seu currículo na área de desenvolvimento web.

Cursos online Gratuitos sobre JavaScript

Aprenda sobreJavaScript

Aprenda JavaScript com cursos online gratuitos e com certificado para impulsionar sua carreira em desenvolvimento web. Encontre aulas para iniciantes e profissionais sobre lógica de programação, funções, objetos, DOM, eventos, APIs e frameworks. Estude no seu ritmo, desenvolva projetos práticos e conquiste novas oportunidades no mercado de tecnologia.

Aprenda sobreNodeJS

Encontre os melhores cursos online gratuitos de NodeJS e aprenda a criar aplicações modernas, APIs REST, sistemas web e projetos back-end com JavaScript. Estude no seu ritmo, desenvolva habilidades valorizadas pelo mercado e amplie suas oportunidades profissionais. Escolha seu curso gratuito de NodeJS com certificado e comece agora!

Aprenda sobreMongoDB

Encontre os melhores cursos online gratuitos de MongoDB e aprenda desde os conceitos básicos até técnicas avançadas de bancos de dados NoSQL. Estude modelagem, consultas, índices, agregações e administração com aulas práticas, flexíveis e acessíveis. Escolha seu curso grátis de MongoDB com certificado e impulsione sua carreira em tecnologia.