illustration for ECommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

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

Instructor

Colby Fayock
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.7
38
people completed
Bookmark
Download
RSS

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.

project shot for the course

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.

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Learner Reviews

  • Bruno Ribeiro
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Good stack. Covered lots of ecommerce needs.

    The Map implementation could really be improved.

  • Learner
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Very good content! I learned a lot in some hours

  • Ben Yee
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Colby's course was great, and I learned a lot of different developer tools from GraphCMS to Leaflet.

  • Learner
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Always like Colby's courses. He is easy to follow and his courses are about modern and timely projects.

  • Guillaume Code 17
    2 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    That was really nice, I've learn a lot !

    don't know more to say about it, some errors here and there, but it kept me going, and force me to actually search for answer or way to go around,

    Thank you again, it probably give a big boost for my career.

  • Learner
    3 years ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Really quality course to learn about NextJS and how to integrate libraries like Snipcart, React Leaflet. Hence, I'll give 5 stars for this course.

Course Content

2h 53m • 18 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers

    Introduction to Cloudflare Workers

    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout

    Create an eCommerce Store with Next.js and Stripe Checkout

    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use

    Practical Git for Everyday Professional Use

    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.