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
Nesse desafio, foi necessário implementar um carrinho no nosso projeto, com a opção de adicionar e remover os itens antes de prosseguir ao checkout.
Nesse desafio, aproveitei a aplicação já desenvolvida na trilha Ignite ReactJS para implementar um carrinho que utilizará os dados da API do Stripe para buscar os itens existentes, e controlará, através da aplicação, o número de itens que a pessoa deseja comprar.
- Adicionar a possibilidade de adicionar aquele item ao carrinho na página do produto
- Salvar todos os itens selecionados, e exibir o número de itens no carrinho
- Enviar o carrinho que armazenado na aplicação para a rota de checkout, onde irá gerar a sessão de checkout com os
line_itemsnecessários.
Para completar esse desafio foi necessário de realizar algumas pesquisas na documentaçao para entender sobre a API do Stripe.
- Next.js
- Axios
- embla-carousel-react
- immer
- Phosphor
- Radix-UI
- Stitches
- Stripe
- use-context-selector
- @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.
| Cor | Hexadecimal |
|---|---|
| white | #FFFFFF |
| gray-100 | #E1E1E6 |
| gray-300 | #C4C4CC |
| gray-500 | #8D8D99 |
| 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/ignite-shop.git
- Acesse a pasta clonada:
cd 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.
