O que iremos construir

Iremos criar um e-commerce de jogos, incluindo toda a parte de pagamentos e área do cliente. Os clientes poderão fazer buscas, filtrar, adicionar ao carrinho e comprar seus jogos favoritos.

Teremos também um CMS completamente customizado para que os administradores possam adicionar produtos, categorias, plataformas, criar promoções, editar partes do site, além de emails automatizados para às vendas de cada produto.

Para criar tudo isso, iremos utilizar ferramentas muito famosas no mercado de trabalho, como ReactJS, Next, Apollo e outras coisas mais. Sempre prezando pela qualidade do código, ou seja, teremos testes em tudo!

Conceitos que você irá aprender

Boas práticas com ReactJS

Boas práticas com Styled

Boas práticas com Testes

Server Side Rendering (SSR)

Static Site Generation (SSG)

Rotas simples e dinâmicas

Funcionamento do GraphQL

Queries e Mutations

Filtros e paginações

Criar componentes do zero

Utilizar componentes third-party

Utilizar Storybook

Criar APIs rapidamente

Envio de emails automatizado

Autenticação de usuários

Fluxo de pagamentos

Criação de pipelines em CI

Deploy automatizado

Módulos deste curso

Módulo 1

Introdução e Arquitetura do Projeto

Iremos conhecer a Stack utilizada no curso, tendo explicação de cada uma das escolhas, assim como mostrando os prós e contras de cada uma delas

Iremos construir nosso boilerplate do zero, aprendendo a configurar as ferramentas de qualidade de código, como Eslint, Prettier, Git hooks e TypeScript. Assim como também configurar o Styled Components para funcionar com SSR e PWA.

Módulo 2

Strapi e GraphQL

Vamos iniciar nosso backend/CMS com o Strapi, aprender mais sobre sua API, como o content type builder, single types, custom components. Além de aprender a criar controllers customizados, serviços, instalar plugins de documentação e também do GraphQL, onde iremos aprender como funciona, como criar queries, filtros, mutations e mais.

Para finalizar, aprenderemos como customizar o CMS para que ele tenha a cara da loja e se torne uma solução mais interessante para o cliente.

Módulo 3

Criando o Frontend

Essa que será uma das maiores etapas, é onde vamos aprender a pegar um layout diretamente do Figma e vamos transformá-los em diferentes componentes e estilos.

Faremos todos os componentes com styled components, com testes, cenários no Storybook e pensando na responsividade. Com os componentes prontos, construiremos as páginas, ajustando o que for necessário para que tudo se encaixe perfeitamente.

Módulo 4

Sistema de Pagamento e Área do Cliente

Conheceremos algumas soluções de pagamento do mercado, vendo suas vantagens, desvantagens e APIs.

Criaremos toda a parte final do fluxo de pagamentos, conectando a nossa loja a um gateway de pagamento, salvando as compras em nosso banco de dados. Além de desenvolvermos a área do cliente, para que o cliente possa editar seus dados, ver compras realizadas e sua wishlist.

Módulo 5

Testes de Integração

Neste módulo iremos aprender a importância dos testes de integração e como garantir ainda mais qualidade no nosso projeto.

Vamos criar testes para todos os fluxos que um usuário normal pode executar em nosso site, desde a navegação normal até uma compra efetuada.

Módulo 6

CI e Deploy

Normalmente a maioria dos cursos termina na criação do projeto, mas nunca ensina como fazer para realmente deixar em produção.

Aqui nós iremos aprender quais as necessidades do projeto e quais as soluçoes que podemos utilizar. Além disso, iremos criar uma pipeline em um CI para que tenhamos todo o processo de deploy o mais automatizado possível

Quem somos nós?

Willian Justen

Instrutor

Desenvolvedor Front-end há mais de 10 anos, tendo trabalhado em grandes empresas como Toptal, Globo.com e Huge. Tenho um blog com mais de 200 mil views por mês, além de ter diversos cursos na Udemy, alcançando a incrível marca de mais de 200 mil alunos!

Guilherme Louro

Instrutor

Desenvolvedor Fullstack há muitos anos, com conhecimento em diversas linguagens de programação. Já liderou grandes projetos e trabalha atualmente na Personare, um dos maiores portais de autoconhecimento do Brasil. Nas horas vagas é o criador e mantenedor do Netfla, site de notícias do Flamengo com mais de meio milhão de views por mês!

Marcos Oliveira

Designer

Front-End e UI Designer há alguns anos. Atualmente trabalha na Lukin Co. Já participou de diversos tipos de projetos, na área da saúde, streaming e varejo. Sempre dividido entre design e programação. No tempo livre sempre está envolvido com a comunidade, organizando eventos e meetups.

FAQ

O que preciso saber para o curso?

Um conhecimento básico de JavaScript/React é necessário para maior entendimento do curso, mas todo o conteúdo será explicado em detalhes e todas as perguntas/dúvidas serão respondidas.

Onde os vídeos serão publicados?

Os vídeos serão publicados na Udemy, com o mesmo funcionamento que já existe, vídeos offline, autoplay, acelerar em 2x, aplicativo nativo e mais.

Quanto tempo tenho para fazer o curso?

O curso é vitalício, faça quantas vezes quiser e quando quiser, nada de bloqueios ou pressa.

Esse curso tem certificado?

Sim, o curso terá certificado e você poderá baixá-lo diretamente da Udemy ao término do curso.

Quais outros cursos você tem?

Tenho alguns cursos gratuitos e pagos, você pode acessar todos os cursos nesse link.

Posso usar o projeto para o meu Portfólio?

Definitivamente! A ideia é que vocês tenham um projeto de verdade que possam utilizar como bem entenderem.

Eu tenho outra dúvida!

Sem problemas! Você pode acessar qualquer uma das minhas redes sociais ou entrar no slack do nosso curso.

React Avançado

Crie aplicações reais com NextJS, Strapi, GraphQL e mais!