Estudos Ignite(React) - Etapa 04

Projeto feito durante as aulas

caminho: "/projects/practice04"

Este é um projeto de um site simples de venda de camiseta feito Next, utilizando o stripe.

🚀 Tecnologias

• Next
• Tailwind
• Stitches
• Phosphor-react
• stripe
• axios

💻 Projeto

• Home - "/"

  Listagem de camisetas utilizando SSG, as informações das camisetas vem através do consumo da API do Stripe(onde cadastramos nosso produto), essa requisição é feita na função getStaticProps, e os dados são retornados para o componente pelas propriedades, essa propriedades são atualizadas a partir de 2 horas pela configuração do SWR.

  



• Página de comprar camiseta - "/produtos/[id]"

  Esta página tem as informações do produto para a realização da compra. Por ter um parâmetro dinâmico e usarmos SSG, utilizei a função getStaticPaths, com fallback igual a true. Também é consumida uma API route, para obtermos o link do checkout ao clicar no botão, ao obter o link, o usuário é redirecionado.

  



• Processo de pagamento e página de sucesso - "/sucesso"

  Para efetuar o pagamento o usuário é redirecionado a plataforma do Stripe. Ao confirmar a compra o usuário é redirecionado para a página de sucesso, onde ocorre a busca os dados da compra com SSR, e a página é carregada já com os dados da compra.

  

Projeto do curso feito individualmente

caminho: "/projects/practice03"

Foi o mesmo projeto do acima, porém as compras são realizadas a partir do carrinho, esse carrinho foi feito utilizando a context API.