In this workshop you'll learn how to build a new ecommerce store from scratch using Next.js and Stripe Checkout.
Excited to learn? You should be! Here's some of the stuff we'll learn in this workshop:
- Create a new Next.js app from scratch
- Add and manage a dynamic grid of products
- Set up and configure products in Stripe
- Manage local state with React's useState hook
- Create a custom React hook
- Use the React Context API to manage global state
- Store and persist app state with localstorage
- Integrate Stripe Checkout to let people purchase your products
- Deploy an app to Vercel
I'm Colby Fayock! 👋
Learning by doing is the best way to learn something new and that’s the approach I take when I help others learn about Javascript, React, and the static web through writing, videos on Youtube, and courses on egghead.io.
I try to bring this passion from my work tackling challenges like high scale video streaming services, ecommerce with ThinkGeek, satellite dashboards, and working as a Developer Advocate for Applitools.
In addition to all of my other work, I've published two books Jamstack Handbook — which includes everything you need to know about the Jamstack with 3 step-by-step tutorials — and 50 Projects for React and the Static Web — which is a free ebook that includes 50 project ideas complete with project briefs, resources, and even design layout ideas.
You can also find me on Twitter at @colbyfayock!
There's really one thing you would ideally have done before we jump into the workshop:
- Make sure you're set up with the minimum environment requirements
There's also only one thing that is probably considered a "strict" requirement for the workshop:
The operating system you use shouldn't matter as long as you can run commands with npm (or yarn if that's your thing).
If you can run npm -v, you should be good to go.
Once you verified you have all of the environment requirements, we can get started by cloning this repository.
- Navigate to the folder you'd like to work in
- Run:
git clone https://github.com/colbyfayock/space-jelly-store-workshop
cd space-jelly-store-workshop
All of the lessons are contained in their own individual directory within the lessons folder.
For each lesson, you can start from scratch by navigating to that lesson's directory and running:
npm install
This will install all of the required dependencies to get started for the lesson.
After all of the dependencies are installed for the lesson, you should be good to go!
- Run:
npm run dev
This should kick off a new server available at http://localhost:3000.
If you've successfully started up your development server, you should be ready to go for the workshop!
We'll start off by creating a new app from scratch with Create Next App. In our new app, we'll add products and dynamically manage them using an external json file as our data source.
Using React's APIs like useState and the Context API, we'll create a shopping cart that allows customers to add and manage products in that cart. We'll also use localstorage to store that shopping cart and persist it when our customers reload the page.
With our app, we'll set up and configure products in Stripe, which will allow our customers to purchase those products using Stripe Checkout.
Finally, we'll deploy this app to Vercel so our customers can easily purchase our products!
Each lesson is broken out into it's own directory under the lessons folder. Each contain's its own set of dependencies (though most are the same) as well as its own project code that we'll use to work through the exercise.
You'll find a README.md at the top of each lesson. This will give you an overview and instructions for that particular lesson as well as what files you'll need to work through.
As you're working through the lesson, you can use designated keys to find locations in the code where changes should be made. These keys can be used by searching for them in your code editor. The keys available are:
@lesson-##-todo@lesson-##-answer
For example, if we want to find all of the spots where we should be working for lesson 2, we can use the @lesson-02-todo key to find those files and locations.
- 00 - Introduction
- 01 - Create a New React Application with Next.js
- 02 - Add a Grid of Products with Images to a Next.js React App
- 03 - Add and Configure Products in the Stripe Dashboard for an Online Store
- 04 - Dynamically Manage a Grid of Products in an Online Store with a JSON Document
- 05 - Host & Deploy a Next.js React app on Vercel
- 06 - Configure a Stripe Checkout Domain for Client-Only Integration
- 07 - Add a Stripe API Key as an Environment Variable in Next.js & Vercel
- 08 - Add a Buy Now Button and Integrate Stripe Checkout to Purchase Products in a Next.js Online Store
- 09 - Create a Shopping Cart with the useState React Hook to Manage Product Quantity and Total
- 10 - Create a Custom React Hook to Manage Cart State
- 11 - Use the React Context API to Globally Manage Cart State in a Next.js App
- 12 - Store and Load Cart State from Local Storage to Persist the Shopping Cart When Reloading the Page
- 13 - Use Next.js Dynamic Routes to Create Product Pages for an Online Store
- 14 - Create a Shopping Cart Page to Manage Products to Purchase in a Next.js App
- 15 - Add a Quantity Input to the Cart Page to Add or Remove Items from a Shopping Cart in Next.js
The good, the bad -- I want to know! I would really appreciate you taking any time to hop in this survey and be honest about your experience with the workshop. Please take into consideration both how much you've enjoyed the workshop and how much you felt you've learned.