Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

via egghead.io

Overview

Colby is going to take you on a deep dive into creating a full featured store for your business.
Features include:
A map of store locations powered by leaflet
Multi language support through Next.js Localization
Full Product Management with GraphCMS
Professional-grade checkout experience with Snipcart and checkout through Stripe
Optimized media deliver with Cloudinary
This course will show you how you can leverage all these tools available to you in the modern JavaScript Ecosystem.
Colby will take you through the process of moving the app above app over to GraphCMS, a content management system that's going to give you a content API backed by GraphQL. Once all of that product data is inside GraphCMS, you'll be able to easily query it with GraphQL.
Once you put all of your data into GraphCMS, you will get to check out the API playground! This playground gives you the ability to explore our data in real-time. Additionally, allows us to actually save queries that we can later query in the future.
You’ll get a sneak peek into how Colby will use Cloudinary to it’s fullest extent! On top of its performant delivery service, you’ll use a lot of other features, including media management, as well as transformations on top of our delivery, which allows us to do a lot of things from simple use cases, like cropping and resizing, to being able to overlay dynamic imagery on top of other images.
Since Colby is using Next.js, you get all of the perks that come with it, such as getStaticPaths and getStaticProps to dynamically create all of your static pages, the home page and your product pages.
Once the pages for your products are created, you need to actually let people buy those products. To do that, you’ll use Snipcart, where you’ll drop in a shopping cart that's going to provide you with an end-to-end checkout flow.
For your payment gateway, you’ll be taking advantage of the very popular Stripe. Stripe is a very popular payment platform that allows us to securely take payments across the web. While they have a lot of great products and APIs for those products, you won’t need to focus on any of that as Snipcart has already taken care of that for us.
Check out the course introduction to get started learning eCommerce.

Syllabus

  • Introduction to Create an eCommerce Store with Next.js and Stripe Checkout
  • Create a New Next.js App for an Online Store
  • Set up GraphCMS to Manage Data with a GraphQL API
  • Use GraphCMS Schema Models to Manage Page Content
  • Query the GraphCMS GraphQL API with Apollo GraphQL
  • Manage Product Details with a Custom GraphCMS Schema Model
  • Add and Configure Cloudinary UI Extension to Add Images From a Cloudinary Media Library
  • Set up Individual Product Pages with Next.js Dynamic Routes
  • Add a Shopping Cart and Checkout Funnel with Snipcart
  • Use Stripe as a Payment Gateway in Snipcart
  • Create a Product Category Graphcms Schema to Manage Product Groupings
  • Dynamically Add Category Landing Pages with Next.js Dynamic Routes
  • List Store Locations on a Page Using a Store GraphCMS Schema and Data
  • Add All Store Locations to a React Leaflet Map with Location Data From GraphCMS
  • Manage Map Effects & Dynamically Calculate a Map's Center with Turf
  • Support Multiple Languages with Next.js Localization
  • Optimize Media with Cloudinary to Deliver Smaller and Performant Images
  • Deploy a Next.js App to Vercel From GitHub with Environment Variables

Taught by

Colby Fayock

Reviews

4.7 rating at egghead.io based on 18 ratings

Start your review of Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.