Desafio 04 - Adicionando features ao Ignite Shop

---

Sobre |  Motivo |  Tecnologias |  Figma | 

Cores |  Fontes |  Executar |  Licença

---

ℹ️ Sobre

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.

⁉️ Motivo

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_items necessários.

Para completar esse desafio foi necessário de realizar algumas pesquisas na documentaçao para entender sobre a API do Stripe.

🚀 Tecnologias Utilizadas

• Next.js
• Axios
• embla-carousel-react
• immer
• Phosphor
• Radix-UI
• Stitches
• Stripe
• use-context-selector
• @rocketseat/eslint-config

🎨 Layout no Figma

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

🌈 Documentação de cores

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%)

🔤 Fontes utilizadas

• Roboto

⚡ Como executar

• 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

📝 Licença

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

---

Feito por Jerp86 👋️

Entre em contato!