
Eai DEV seja bem-vindo ao curso - Do ZERO a MERN Stack - nesse curso vou te ensinar através de um projeto tecnologias muito utilizadas no mercado de trabalho, e para isso vamos construir uma aplicação de notícias.
ATENÇÃO: Esse vídeo teve alguns travamentos de câmera, porém não influenciaram no andamento da aula, já estou resolvendo esse problema, no próximo vídeo isso não acontecerá mais!
Nesse vídeo nos aprofundamos mais em como funciona uma rota e o que são métodos HTTP, e como os utilizar!
Aqui você vai encontrar uma aula explicando a arquitetura do nosso projeto, até agora só introduzimos o express e alguns conceitos-base, mas a partir desse momento a gente já vai focar 100% na aplicação e na construção da API!
Bora entender 100% o que é uma requisição e resposta dentre de aplicações web, e tudo isso na prática!
Vamos conhecer o MongoDb Atlas e aprender tudo que precisamos sobre ele para utilizar esse banco em nossa aplicação.
Agora vamos colocar em prática a conexão com o banco e um teste simples, criando um usuário em nosso banco.
Bora buscar todos os dados cadastrados ou apenas um dado? Nesse vídeo vamos aprender como fazer essas buscas com o método HTTP GET!
Vamos configurar nosso Thunder Client para melhorar nossa experiência na hora de testar nossa aplicação!
Agora que já conseguimos cadastrar e buscar os dados, nós vamos atualizar!
Middlewares são muito importantes para nosso projeto subir o nível, com eles otimizamos o código e tornamos eles cada vez mais escaláveis e facilitamos a manutenção!
Uma das funções de uma API é responder da melhor forma possível para o cliente e para que isso fique ainda melhor, vamos utilizar o Try/Catch, se você nunca ouviu falar, é só assistir o vídeo!
Vamos entender de uma vez por todas qual desses tipos de importação de módulos e bibliotecas é o ideal para nossos projetos com NodeJS!
Criptografar a senha do seu usuário é uma etapa de segurança MUITO importante no desenvolvimento de um site, e é isso que vamos aprender nesse vídeo!
Entender sobre variáveis de ambiente é algo extremamente necessário para um projeto back-end, nesse vídeo você vai aprender a criar esse tipo de variável através da biblioteca dotenv!
Finalmente vamos colocar a mão em autenticação de usuário em nosso projeto! Nesse video eu te dou dicas sobre como fazer esse processo e o que é importante validar e como.
Salve DEEEV! Esse vídeo é muito massa, nele eu explico de forma simples o que o JWT tão falado no mercado de trabalho e como utilizar ele em uma API com Express. O melhor é que você não precisa estar acompanhando o curso para conseguir assistir!
Aaaantes de validar o JWT agente precisa de alguma rota que precise dessa autenticação, então bora criar essa rota em uma nova collection, nossa collection de Noticias que vamos chamas de NEWS!
Agora que temos um token, como nós podemos impedir que uma rota execute o seu controller se não tiver esse token? A primeira parte para entender o conceito é esse video, e no próximo a gente fecha com a forma mais profissional de fazer isso!
Agora sim! Essa é a forma mais profissional de proteger uma rota usando JWT e o padrão de autenticação Bearer!
Paginar os dados apresentados em um site é importantíssimo para a experiência do usuário em sua aplicação, mas esse processo não é feito no front, ele precisa ser feito direto no banco, pois o maior tempo de busca é dentro do banco de dados! E é exatamente isso que faremos nesse vídeo.
Esse vídeo é específico para esse projeto, ele faz parte dos requisitos do projeto. A partir de agora não vamos fazer um CRUD comum, vamos seguir os requisitos, como é feito no mercado de trabalho!
Bora buscar nossos dados pelo ID, o famos FIND BY ID das APIs!
Além de fazer uma busca pelo titulo da noticia com regex nós vamos desabilitar o case sensitive da busca para evitar problemas com letras maiúsculas e minúsculas!
Um dos requisitos mais importantes da API é retornar as noticias do usuário logado, para preenchermos o perfil dele, e é isso que faremos agora!
Nesse vídeo vamos atender a mais um requisito de nosso cliente, atualizar uma notícia, porém com a restrição de permitir essa atualização apenas para o dono da notícia.
Dessa vez vamos apagar uma notícia, porém com a mesma limitação do vídeo anterior, só o dono da notícia pode apagá-la!
Vamos aprender como alterar um array dentro de um documento no MongoDB, para isso vamos usar nessa primeira parte o requisito de LIKE na notícia!
Vamos aprender como alterar um array dentro de um documento no MongoDB de forma mais avançada, mandando mais campos, para isso vamos o requisito de Comentário na notícia!
Nossa API está pronta! Agora precisamos documentar tudo o que fizemos para facilitar a vida de quem quiser consumir nossa API, para isso vamos utilizar a ferramenta Swagger!
Nossa API está pronta e documentada, agora vamos fazer ro deploy dela para uma máquina na nuvem, para isso vamos usar o serviço gratuito do Render!
Nosso backend estava funcionando, porém, ele poderia ter mais clean code e clean architecture... por isso decidi refatorar ele, completamente, adicionando a camada de repository, mudando nossas importações de módulos para "module", alterando a importação das rotas e separando nosso app do nosso service.
Bora começar a entender como construir paginas web front-end modernas, escaláveis e com uma grande facilidade de manutenção, utilizando o ReactJs como framework.
Nesse vídeo vamos descobrir se realmente devs front-end precisam ser criativos.
Tudo em React é um componente, esse é o primeiro passo para você entender como essa ferramenta revolucionou a forma de pensar na criação de aplicações web. Entender esse pensamento e utilizá-lo é primordial para o resto do curso!
Bora começar a criar esse componente menu do nosso projeto, que será reutilizado e todas as páginas, nessa aula vamos usar css puro para estilizar nosso html, porém a partir da próxima vamos usar styled components, então não se esqueça de se inscrever e ativar o sininho para receber as notificações de próximos vídeos!
Faala dev, bora aprender essa ferramenta muito pedida em vagas de emprego, de forma simples e objetiva? Só assistir até o final que eu vou te dar muitas dicas massinhas!
Agora que já conhecemos o styled components, vamos aprender como criar estilos globais com essa ferramenta incrível, esse é um vídeo super rápido que vai te ajudar bastante, porque a lógica não é igual ao do último vídeo!
Vamos entender nesse vídeo, como usar props no React, aplicando em nossos cards de noticias no projeto!
Agora vamos aplicar styled components nos cards da última aula!
Faaala DEV! Estamos de volta com mais um vídeo... Nesse vídeo vamos consumir a nossa API no React utilizando o axios.
Bora entender como funciona o ciclo de vida de um componente e como os Hooks do React podem influenciar nesse ciclo de vida!
Agora que já colocamos nossos dados na tela, precisamos evitar o loop infinito de requisições na API, para isso vamos usar o useEffect, além disso, vamos refatorar o estilo do card, para ficar mais legível e parecido com aplicações do mundo real!
Quando queremos reaproveitar componentes de estilo, porém eventualmente alterar algum detalhe desse componente, podemos usar props, já aprendemos como fazer isso para um componente React comum, agora vamos aprender a fazer no Style Components!
Nesse video vamos conhecer e aplicar o básico de rotas no React!
Bora continuar estudando rotas em React, agora vamos aprender como enviar um parâmetro em uma rota!
Nesse video eu vou introduzir para você esse hook maravilhoso que vai facilitar muito a nossa vida quando precisamos trabalhar com formulários no Reat!
Agora que já temos o valor do input, bora validar ele para evitar erros indesejáveis!
Para finalizar nossa saga da pesquisa, bora consumir definitivamente a API e trazer as postagens de acordo com o titulo digitado!
Nesse vídeo vamos criar a estrutura base para receber nossos formulários de login e cadastro!
Componetização é um conceito primordial para entender as vantagens do React, bora entender melhor como isso funciona!
Agora que o layout está pronto, precisamos pegar os valores de cada input, para depois validar e enviar para o backend!
Bora validar com Zod esses dados capturados no último vídeo!
Olá, caro desenvolvedor! Seja calorosamente recebido no curso "Do ZERO a MERN Stack". Estou empolgado por embarcarmos juntos nesta jornada de aprendizado intensivo, onde mergulharemos em tecnologias amplamente empregadas no dinâmico mercado de trabalho. O projeto que abordaremos será a construção de uma aplicação de notícias, utilizando habilidades em JavaScript, NodeJs, Express, MongoDB e ReactJs.
Durante este curso abrangente, nosso objetivo é não apenas transmitir conhecimentos teóricos, mas também fornecer uma experiência prática significativa. Enfatizo que, embora seja desejável possuir noções básicas de HTML, CSS e JavaScript, não é necessário ter conhecimento prévio sobre API, SPA ou frameworks. Estou aqui para orientar você em cada etapa do processo, garantindo uma compreensão abrangente e profunda.
À medida que avançamos, você não só desenvolverá competências essenciais para a construção de uma aplicação de notícias robusta, mas também ganhará confiança para enfrentar desafios complexos em projetos web como desenvolvedor júnior. Ao concluir este curso, não apenas terá os recursos necessários, mas também estará equipado com uma base sólida para contribuir efetivamente em ambientes profissionais diversos.
Estou entusiasmado em compartilhar conhecimento, dicas e práticas recomendadas que irão enriquecer sua jornada como desenvolvedor. Prepare-se para uma imersão educacional estimulante e repleta de oportunidades para aprimorar suas habilidades práticas e teóricas. Estou aqui para apoiá-lo em sua jornada rumo ao sucesso no universo da MERN Stack e além!