Projeto Avançado MERN Stack: Um Sistema de Reserva de Filmes (2023)

Aprenda MERN Stack Construindo uma Aplicação de Reserva de Filmes do Mundo Real com MERN.

Olá desenvolvedor, eu sei que você quer se tornar um habilidoso desenvolvedor MERN Stack e está cansado de ver tutoriais básicos. Então aqui eu tive essa ideia de criar uma Aplicação do Mundo Real com MERN Stack. Este curso contém tantas coisas que você não pode acreditar. Este curso é projetado para desenvolvedores web aspirantes e desenvolvedores React que desejam aprimorar suas habilidades construindo uma aplicação completamente avançada com MERN Stack. Funcionalidade do Projeto: - 2 Usuários Diferentes - Admin / Usuário - Admin faz login com verificação JWT - Admin adiciona filmes - Mostramos todos os registros dos filmes adicionados pelo Admin - Conectado com a coleção de Filmes - Usuários podem fazer login com criptografia - Pode criar reservas a partir da tela - Links da barra de navegação mudarão de acordo com Admin e Usuário - Os estados são tratados pelo Redux - Perfis para Admin e Usuário - Usuários podem criar/excluir reservas de qualquer filme

MERN Stack:

MERN significa MongoDB, Express, React e Node, após as quatro principais tecnologias que compõem o stack. - MongoDB - banco de dados de documentos - Express(.js) - framework web Node.js - React(.js) - um framework JavaScript do lado do cliente - Node(.js) - o principal servidor web JavaScript Express e Node compõem a camada intermediária (aplicação). Express.js é um framework web do lado do servidor e Node.js é uma plataforma de servidor JavaScript popular e poderosa. Independentemente da variante escolhida, ME(RVA)N é a abordagem ideal para trabalhar com JavaScript e JSON, do início ao fim. Front-end React.js: A camada superior do stack MERN é o React.js, o framework declarativo JavaScript para criar aplicações dinâmicas do lado do cliente em HTML. O React permite que você construa interfaces complexas através de componentes simples, conecte-os aos dados em seu servidor back-end e renderize-os como HTML. A especialidade do React é lidar com interfaces orientadas a dados e com estado, com código mínimo e dor mínima, e possui todos os recursos que você esperaria de um framework web moderno: ótimo suporte para formulários, tratamento de erros, eventos, listas e muito mais. Camada do servidor Express.js e Node.js: O próximo nível é o framework do lado do servidor Express.js, executado dentro de um servidor Node.js. O Express.js se apresenta como um framework web rápido, sem opiniões e minimalista para Node.js, e é exatamente isso que ele é. O Express.js possui modelos poderosos para roteamento de URL (correspondendo a uma URL de entrada com uma função do servidor) e tratamento de solicitações e respostas HTTP. Fazendo solicitações XML HTTP (XHRs) ou GETs ou POSTs do seu front-end React.js, você pode se conectar a funções do Express.js que alimentam sua aplicação. Essas funções, por sua vez, usam os drivers Node.js do MongoDB, seja por meio de callbacks ou usando promises, para acessar e atualizar dados em seu banco de dados MongoDB. Camada do banco de dados MongoDB: Se sua aplicação armazena algum dado (perfis de usuário, conteúdo, comentários, uploads, eventos, etc.), então você vai querer um banco de dados tão fácil de trabalhar quanto o React, Express e Node. É aí que entra o MongoDB: documentos JSON criados em seu front-end React.js podem ser enviados para o servidor Express.js, onde podem ser processados e (assumindo que sejam válidos) armazenados diretamente no MongoDB para posterior recuperação. Novamente, se você está construindo na nuvem, você vai querer olhar para o Atlas. Se você está procurando configurar seu próprio stack MERN, continue lendo! Uma Aplicação de Reserva de Filmes: Onde lidamos com Backend + Frontend + Chamadas de API entre eles. O Backend inclui: - 2 Usuários - Admin e Usuário - NodeJS - ExpressJS - MongoDB - 4 Coleções Interconectadas (Tabelas) do MongoDB - Abordagem MVC (Model View Controllers) - Criptografia de Senha - API REST - Criptografia JWT - Verificações JWT - Autenticação e Autorização O Frontend inclui: - ReactJS - Material UI - Gerenciamento de Estado Redux (Redux Moderno) - Chamadas de API Axios - Ícones - Design Responsivo - Manipulação de Estado Dinâmico - React Hooks - Navegação React Router Dom - 2 Cenários Diferentes para Admin e Usuário - Autenticação, Adição de Formulários - Rotas Protegidas - Manter o Usuário Logado Após Sair/Atualizar o Navegador E muito mais por vir. Então não perca seu tempo e matricule-se e torne-se um habilidoso desenvolvedor MERN Stack. O que você vai aprender: - Como Construir uma Aplicação MERN Stack Avançada - Aprender a Construir o Backend para Casos de Aplicação do Mundo Real - Aprender a Projetar uma Interface de Usuário Dinâmica - Aprender a Criar Aplicativos Web Otimizados e Estruturados