Conheça o projeto
Neste desafio, você irá evoluir o projeto Ignite Shop construído com Next.js e integrado ao Stripe, adicionando funcionalidades de carrinho de compras. O objetivo é permitir que os usuários selecionem produtos, adicionem/removam itens do carrinho e finalizem a compra por meio da API do Stripe, praticando fundamentos do SSR, SSG, integração com API externa e conceitos de estado e contexto global.
A aplicação contará com um fluxo completo: listagem de produtos, detalhamento, carrinho de compras e checkout.
Recursos
Materiais para você usar como base para o desenvolvimento
Instruções
Estrutura, regras e requisitos do projeto
1. Regras do desafio
- Implementar um carrinho de compras funcional:
- Permitir adicionar itens diretamente da página de produto.
- Permitir remover itens antes do checkout.
- Exibir o número de itens no ícone do carrinho no header.
- Persistir os itens selecionados dentro da aplicação:
- Pode-se utilizar Context API ou a lib use-shopping-cart.
- Integrar com o Stripe Checkout:
- Enviar o carrinho para a rota de checkout no formato esperado pela API.
2. Conceitos a aplicar
Durante o desenvolvimento, revise e aplique os conceitos vistos no módulo:
- Fundamentos do Next.js (estrutura de pastas, páginas, navegação).
- Diferentes formas de data fetching:
- SSR (Server-Side Rendering)
- SSG (Static Site Generation)
- Estilização de componentes com StitchesJS.
- Criação de contextos globais para gerenciamento de estado do carrinho.
- Integração com Stripe API para checkout.
3. Estrutura esperada da aplicação
- Página inicial (Home)
- Exibir lista de produtos (dados do Stripe).
- Botão para adicionar produto ao carrinho.
- Página de produto
- Mostrar detalhes do item (nome, preço, descrição, imagem).
- Botão “Adicionar à sacola”.
- Carrinho lateral/modal
- Listagem de itens adicionados.
- Opção de remover produtos.
- Exibição do subtotal e total.
- Botão “Finalizar compra” → redireciona para sessão de checkout no Stripe.
- Página de sucesso
- Exibir resumo da compra concluída.
- Mensagem de confirmação personalizada com o nome do usuário/produto.
4. Dicas importantes
- Utilize a documentação oficial do Stripe para enviar dados de checkout corretamente.
- Caso opte pelo use-shopping-cart, siga a documentação oficial.
- Aproveite os recursos do Next.js para otimizar SEO e performance (uso de
getStaticProps,getServerSideProps). - Trate erros de API com mensagens claras para o usuário.
5. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
6. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
1. Regras do desafio
- Implementar um carrinho de compras funcional:
- Permitir adicionar itens diretamente da página de produto.
- Permitir remover itens antes do checkout.
- Exibir o número de itens no ícone do carrinho no header.
- Persistir os itens selecionados dentro da aplicação:
- Pode-se utilizar Context API ou a lib use-shopping-cart.
- Integrar com o Stripe Checkout:
- Enviar o carrinho para a rota de checkout no formato esperado pela API.
2. Conceitos a aplicar
Durante o desenvolvimento, revise e aplique os conceitos vistos no módulo:
- Fundamentos do Next.js (estrutura de pastas, páginas, navegação).
- Diferentes formas de data fetching:
- SSR (Server-Side Rendering)
- SSG (Static Site Generation)
- Estilização de componentes com StitchesJS.
- Criação de contextos globais para gerenciamento de estado do carrinho.
- Integração com Stripe API para checkout.
3. Estrutura esperada da aplicação
- Página inicial (Home)
- Exibir lista de produtos (dados do Stripe).
- Botão para adicionar produto ao carrinho.
- Página de produto
- Mostrar detalhes do item (nome, preço, descrição, imagem).
- Botão “Adicionar à sacola”.
- Carrinho lateral/modal
- Listagem de itens adicionados.
- Opção de remover produtos.
- Exibição do subtotal e total.
- Botão “Finalizar compra” → redireciona para sessão de checkout no Stripe.
- Página de sucesso
- Exibir resumo da compra concluída.
- Mensagem de confirmação personalizada com o nome do usuário/produto.
4. Dicas importantes
- Utilize a documentação oficial do Stripe para enviar dados de checkout corretamente.
- Caso opte pelo use-shopping-cart, siga a documentação oficial.
- Aproveite os recursos do Next.js para otimizar SEO e performance (uso de
getStaticProps,getServerSideProps). - Trate erros de API com mensagens claras para o usuário.
5. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
6. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar! Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
Tarefas
Use este checklist para ajudar a organizar a sua entrega