E-Commerce

Modern Full Stack ECommerce React Application with Stripe

Languages & Frameworks

• React.js, Next.js, Sanity, Stripe

For running website and Sanity

1. Run server by 'npm run dev' in /ecommerce/
2. Run Sanity by 'sanity start' in /ecommerce/sanity_ecommerce

Features

• Products: Title, Rating, Details, Price, and Quanitity
• Have option to Add to Cart and Buy Now

• You may also like

• Banner: Summer Sale Item

• Footer: Summer Sale Item

• Cart: List of selected items, Able to delete unwanted items, Subtotal, and Quantitiy

• Payment Option: using Stripe (success page for buying products)

Componenets

• Cart, Product, Navbar, Footer, FooterBanner, and HeroBanner
• Used StateContext to keep track of price, quanitity, and cart items

Product Details

• File-based Routing and Data Fetching using Next.js
• Used methods: getStaticProps, getStaticPaths, and getServerSideProps

Sanity

• Created Schema for product and banner
• Hooked up Sanity using Sanity Client

Stripe

• Payments: Stored through Stripes Dashboard under Payments with list of items and prices
• Shipping Rates: Free Shipping ($0) and Fast Shipping ($20)
• Entire Checkout Process: https://stripe.com/docs/checkout/quickstart?client=next using Prebuilt Checkout Page in Next.js