I developed this project as a challenge of my latest studies on React lessons at Rocketseat.

• React + Next.JS
• TypeScript
• Figma
• Stitches
• React Router
• Axios + Stripe API
• Use Shopping Cart

This project was developed based on a Figma design provied by the school. The main practice was the integration between this Next.js application and the Stripe API. The products was added on Stripe platform and it's API was used to retrieve product and manage order checkout. It was used Use Shopping Cart, specific for Stripe data, for managing states and logic of cart. The project was developed under Next.js framework where were applied static site generation (SSG). serve-side rendering (SSR) and API Routes for better caching and performance, more readability for SEO and for safety reasons such as procteting secret variables.

It includes: A home page listing all available products at Stripe; A product page with details and add to cart function; A cart of products with controls and a checkout to Stripe; A success page with all order information.

• Design / Figma
• Deploy

NEXT_URL=<START_URL>
STRIPE_PUBLIC_KEY=<YOUR_KEY>
STRIPE_SECRET_KEY=<YOUR_KEY>