Nesse desafio, você vai aproveitar a aplicação que já desenvolvemos na trilha para implementar um carrinho que utilizará os dados da API do Stripe para buscar os itens existentes, e controlará, através da sua aplicação, o número de itens que a pessoa deseja comprar.
- Você utilizará a listagem já criada pela aplicação, mas adicionará a possibilidade de adicionar aquele item ao carrinho na página do produto.
- Salvar todos os itens selecionados em sua aplicação, e exibir o número de itens no carrinho
- Enviar o carrinho que você armazenou 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 você vai precisar de realizar algumas pesquisas para entender sobre a API do Stripe.
- Animação ao navegar entre as páginas internas do projeto.
- Progressive Wep App (PWA).
- Inclui checkout no submit do cart.
- Filtro de produto (formato de select ou botões horizontais).
- Geração de imagens do produto com um modelo, via IA generativa.
- Context Selector.
- Barra fixa ao topo da página, acompanhando o carregamento da mesma.
- [ ] Migração para App Router e Server Components.
Tal implementação exige a migração do Stitches para o PandaCSS, pois o primeiro não é suportado no App Router.
-
https://app.rocketseat.com.br/h/forum/react-js/f120410e-0c3a-45a0-a18e-9cad1b131b02
-
https://stackoverflow.com/questions/54676966/push-method-in-react-hooks-usestate
-
Devido à introdução do Streaming e Server Components com o React 18, o Stitches não é mais ativamente suportado. (stitchesjs/stitches#1149);
-
Styled Components é compatível: https://styled-components.com/
-
PandaCSS é uma opção viável: https://panda-css.com/docs/migration/stitches
-
https://www.youtube.com/watch?v=Bz3No1RFXWY&ab_channel=DaveGray
-
Turbopack aparenta estar razoavelmente estável; porém, não é possível realizar a requisição do checkout no modo de desenvolvimento. Por algum motivo, o Turbopack é incapaz de ler os secrets presentes em .env. (vercel/turborepo#3876)
-
https://levelup.gitconnected.com/how-to-sort-imports-in-react-project-550f5ce70cbf
-
Remoção de background em imagens, via AI (https://hotpot.ai/).
-
PWA: https://github.com/shadowwalker/next-pwa e Manifest Generator: https://www.simicart.com/manifest-generator.html/
-
Erros ao buildar (com PWA): vercel/next.js#40155 (comment)