React Avançado: Crie aplicações com NextJS, Strapi e mais
Aprenda como criar um verdadeiro e-commerce do zero, do backend ao frontend, até a implantação em produção!
Neste curso, você aprenderá como criar um site de e-commerce real, incluindo o sistema de pagamento e área do cliente. Os clientes poderão pesquisar, filtrar, adicionar ao carrinho e comprar seus jogos favoritos. Também teremos um CMS completamente personalizado para administradores adicionarem produtos, categorias, plataformas, criar promoções, editar partes do site e automatizar e-mails de vendas para cada produto. Para criar tudo isso, usaremos ferramentas populares no mercado de trabalho, como ReactJS, Next, Apollo e mais. Sempre daremos prioridade à qualidade do código, o que significa que teremos testes para tudo!
Introdução e Arquitetura do Projeto
Iremos conhecer a pilha de tecnologias usada neste curso, com uma explicação de cada escolha, bem como os prós e contras de cada uma. Construiremos nosso boilerplate do zero, aprendendo como configurar ferramentas de qualidade de código como Eslint, Prettier, Git hooks e TypeScript. Também configuraremos o Styled Components para funcionar com SSR e PWA.
Strapi e GraphQL
Começaremos nosso backend/CMS com o Strapi, aprendendo mais sobre sua API, como o construtor de tipos de conteúdo, tipos únicos e componentes personalizados. Também aprenderemos como criar controladores e serviços personalizados, instalar plugins de documentação e GraphQL, onde aprenderemos como funciona, como criar consultas, filtros, mutações e mais. Por fim, personalizaremos o CMS para combinar com a identidade visual da loja e torná-lo uma solução mais atraente para o cliente.
NextJS, Storybook, Testes e Apollo
Esta será uma das etapas mais importantes, onde aprenderemos como pegar um layout diretamente do Figma e transformá-lo em diferentes componentes e estilos. Criaremos todos os componentes usando styled components, com testes, cenários no Storybook e responsividade em mente. Com os componentes prontos, construiremos as páginas, ajustando tudo o que for necessário para que tudo se encaixe perfeitamente.
Testes de Ponta a Ponta e Cypress
Neste módulo, aprenderemos a importância dos testes de integração e como garantir ainda mais qualidade em nosso projeto. Criaremos testes para todos os fluxos que um usuário regular pode realizar em nosso site, desde a navegação normal até uma compra concluída.
CI e Implantação
A maioria dos cursos termina com a criação do projeto, mas nunca ensinam como realmente implantá-lo. Aqui, aprenderemos as necessidades do projeto e as soluções que podemos usar. Além disso, criaremos um pipeline em um CI para automatizar o processo de implantação o máximo possível.
O que você aprenderá
- Criar APIs rapidamente com o Strapi
- Boas práticas no ReactJS
- Boas práticas com Styled Components
- Boas práticas com Testes
- Renderização do Lado do Servidor (SSR)
- Geração de Site Estático (SSG)
- Rotas simples e dinâmicas no NextJS
- Como o GraphQL funciona
- Criar componentes ReactJS do zero
- Usar componentes de terceiros
- Usar o Storybook
