In this workshop you'll learn how to build an online store using modern web tools including Next.js, Snipcart, and Netlify.
Demo: https://hyper-bros-trading-workshop-github-universe.netlify.app/
Excited to learn? You should be! Here's some of the stuff we'll learn in this workshop:
- Create a new Next.js app using a starter template
- Deploy a Next.js app on Netlify
- Add a shopping cart and checkout with Snipcart
I'm Colby Fayock! 👋
Astrocoder, Developer Advocate, Space Jelly Commander—I help others get the tech out of the way to solve real problems with the tools of the web. I work with the dev community at Applitools and am a prolific creator of educational content around the web teaching others through learning by doing one Star Wars plush cuddle at a time.
You might have seen some of my educational work across the web where I help others learn about Javascript, React, and the static web by creating tutorials on YouTube, writing about those tutorials on spacejelly.dev, and I'm a course instructor with egghead.io and Level Up Tutorials.
I bring this passion from my work tackling challenges like high scale video streaming services, ecommerce with ThinkGeek, satellite dashboards, and my community work with 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 are a few things you'll want to make sure you'll have prepped before we jump into the workshop.
First off, you'll want to make sure that you meet the miminum environment requirements in the section below. Basically, you should be able to use npm for working with projects locally on your machine or if you're using a cloud environment like CodeSandbox.
You'll also want to make sure you have signed up for a free acount with the following:
- GitHub
- Snipcart (Get a free month using this link: https://spacejelly.dev/snipcart)
- Netlify
While you can do these things during the workshop, you risk the chance that you'll fall behind while we're working through the curriculum.
There are three things that are probably considered "strict" requirements for the workshop:
This means that you should have basic familiar with a terminal as we'll be using it to run commands.
Note: if you're more comfortable with a Git GUI and are signed into GitHub, you should be able to follow along with that!
Not sure how to use a terminal? You still might be able to follow along, see how with Getting Started Without a Terminal
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 and git --version, you should be good to go.
If you run ssh -T git@github.com, you can confirm that your GitHub account is logged in, otherwise check out their guide on github.com.
You can confirm you're development environment is ready to go by using Create Next App to test creating a new Next.js app.
npx create-next-app
# or
yarn create next-app
We'll be doing something similar to start off our project and if that works, the rest should work!
For our project, we're going to be starting from "scratch".
Scratch is importantly in quotes, as we'll be creating a new project using a Starter template so that we can focus on learning how to integrate the tools of the workshop instead of building an interface around it.
If you want to start this project ahead of time to start poking around or even cusotmize it a bit to your liking, you can get started with:
npx create-next-app my-online-store -e https://github.com/colbyfayock/hyper-bros-trading-workshop-starter
# or
yarn create next-app my-online-store -e https://github.com/colbyfayock/hyper-bros-trading-workshop-starter
There are two primary directories in this repository: demo and lessons.
The demo is what it sounds like, it's the project that we're going to be striving toward to build. It exists to give you an idea of what to expect and even help you out along the way. I'd highly recommend not using it as a way to get the answers to each lesson, but as a way to get yourself unstuck if all else fails.
The lessons directory includes a bunch of markdown files which includes instructions for how we'll progress through the workshop. There will be a mix of exercises that we'll work through together, but also some extra credit that you can work through on your own if you want to take things a step further.
As far as the project we'll create and work through together, you're welcome to choose where you run the Create Next App command, whether that's outside of this repository or within it. A good rule of thumb might be to create the project where you would typically create new web apps or sites.
- 01 - Create a new Next.js ecommerce app from a starter project
- 02 - Create a new GitHub repository and link local project
- 03 - Connect and deploy project from GitHub to Netlify
- 04 - Add Snipcart to the homepage
- 05 - Integrate Snipcart sitewide
- 06 - Customize Snipcart shopping cart
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.
Take the survey! (https://forms.gle/Ku2gopCyGyYXfHC19)
P.S. The form is anonymous unless you decide to provide contact details to follow up with.
Looking to take what you've learned to another level? Check out my course Ecommerce on the Jamstack where I walk you through some of the things you've work through in this workshop and more, including sourcing our products from headless WordPress and how we can manually build our Snipcart hook with React State and Context in addition to other features!