Sobre | Motivo | Tecnologias | Figma |
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
Para essa aplicação foi fornecido um layout para que fosse possível seguir e implementar todas as funcionalidades desenhadas no #Figma.
| Cor | Hexadecimal |
|---|---|
| white | #FFFFFF |
| gray-100 | #E1E1E6 |
| gray-300 | #C4C4CC |
| gray-800 | #202024 |
| gray-900 | #121214 |
| green-300 | #00B37E |
| green-500 | #00875F |
| backgroundGradient | linear-gradient(180deg, #1EA483 0%, #7465D4 100%) |
- 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.
