Nesse módulo foi criado um projeto completo com o framework Next.js. Foi utilizado StitchesJS, passando por conceitos de SPA, server-side rendering (SSR) e static-site generation (SSG).

Foi desenvolvida uma aplicação de e-commerce, que contém as seguintes funcionalidades:

• Carrossel de produtos
• Mostra do nome e valor após hover do mouse
• Página estática com a descrição completa do produto
• Link para efetuar a compra através do Stripe
• Página estática de sucesso da compra efetuada

Reinicio dos estudos do bootcamp Ignite ReactJS da Rocketseat.

Este projeto foi dividido em quatro partes:

• Estrutura do Next.js

  • Conceitos no Next.js
  • Criação do projeto
  • Criação das rotas
  • Configuração do documento HTML

• Estrutura visual

  • Configuração do Stitches
  • Preparando estilos globais e cabeçalho da aplicação
  • Estruturando a Home utilizando o componente de Imagems do Next.js
  • Criando o carrossel

• Integração com Stripe

  • Configurando conta no Stripe
  • Data Fetching no Next.js
  • Buscando produtos do Stripe
  • Utilizando SSG
  • Formatando preço com Intl

• Produto & Checkout

  • Utilizando navegação via Link do Next.js
  • Estrutura das páginas de Produto e de Sucesso
  • Carregando informações do produto
  • SSG com parâmetros dinâmicos
  • Fallback do SSG
  • Prefetch de links
  • API routes no Next.js
  • Checkout no Stripe
  • Redirect no SSR
  • Trabalhando com SEO

• Next.js
• Axios
• ESLint
• keen-slider
• Stitches
• Stripe
• @rocketseat/eslint-config

Para essa aplicação foi fornecido um layout para que fosse possível seguir e implementar todas as funcionalidades desenhadas no #Figma.

Figma - Ignite Shop

• Roboto

• Clone o projeto:

git clone https://github.com/jerp86/04-ignite-shop.git

• Acesse a pasta clonada:

cd 04-ignite-shop

• Instale as dependências:

npm ci

• Inicie a fake API e o projeto:

npm run dev

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.