Portfolio Project
Create an eCommerce Store with Next.js and Stripe Checkout
Next.js
Stripe
Accept payments & sell products powered by Stripe and the best of the JAMStack
There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.
- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform like consumers expect
- Stripe Checkout: let's you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.
Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.
Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.
What You’ll Build for Your Portfolio
How to build a start-to-finish dynamic Next.js app
Bootstrap a Next.js Ecommerce App
- Create a New React Application with the Next.js create-next-app CLI
- Add and Style a Grid of Products with Images in a Next.js React App
- Add and Configure Products in the Stripe Dashboard for an Online Store
- Dynamically Manage a Grid of Products in an Online Store with a JSON Document
- Host & Deploy a Next.js React App on Vercel imported from GitHub
Manage Shopping Cart State
- Create a Shopping Cart with the useState React Hook to Manage Product Quantity and Total
- Create a Custom React Hook to Manage Cart State
- Use the React Context API to Globally Manage Cart State in a Next.js App
- Store and Load Cart State from Local Storage to Persist Cart Data When Reloading the Page
- Use Next.js Dynamic Routes to Create Product Pages for an Online Store
- Create a Shopping Cart Page to Manage Products to Purchase in a Next.js App
- Add a Quantity Input to the Cart Page to Add or Remove Items from a Shopping Cart in Next
By the end of this project, you’ll have your own dynamic eCommerce store with a working checkout flow.
- ✓Manage local state with React Hooks
- ✓Manage global state with React Context
- ✓Purchasing flow with Stripe Checkout
React Context API
Data Fetching
React useState
Custom React Hooks
Stripe Integration
Manage API keys
Pre-rendering
Dynamic Routing
CSS Grid
Vercel deploys
