Avatar
Taimoor Sattar

Build A Standout Website With Gatsby, Sanity and Stripe

This is a beyond-developer course, designed for those who want to build a full-stack website or a subscription website using Gatsby, Sanity & Stripe.

heading
heading
heading
heading
heading
heading
heading
heading
heading

This is a beyond-developer course, designed for those who want to build a full-stack website or a subscription website using Gatsby, Sanity & Stripe. Gatsby is a React framework used to build static and dynamic websites. React is the stable JavaScript library and it is by far the most popular front-end library (and continues to grow faster).

In this course, we'll learn the basics of Gatsby JS and gradually start to build a course subscription platform where the user can enroll in the course based on their subscription. Below is the snapshot of the user subscription preview in Sanity.

Subscriptions
Subscriptions

The Gatsby functions are builtin into the framework. We can use the Gatsby function to create a dynamic website without running the server. We can use the serverless function to perform different actions e.g. create and cancel subscriptions, send emails, etc.

Sanity.io is the unified content platform where we can interact with the data efficiently and in real-time using the Sanity API. To retrieve and mutate the data on the Sanity server, we can send the HTTP request to the appropriate Sanity API route.

Stripe is the payment solution for the internet (and millions of businesses are using it). We use Stripe to build websites and apps that accept payments and send payouts globally. For this project, we use Stripe to collect the payment from the user, send an email to the user and store the recipient details in the Sanity server. The below gif is the walk-through of how we collect payment from the user using Stripe in our course project.

Checkout
Checkout

By completing this course, you'll have the tools, skillset, and framework to start making your own SAAS website and accept payment from your customer.

The Curriculum

Module 1

Gatsby JS - The Fundamental

We will learn the basics of the Gatsby Framework and deploy the code on the Netlify server.

Module 2

Aliases & Styles

We'll learn how to install and use Tailwind CSS to style in the React component.

Module 3

Blogs in Gatsby's

We'll use Netlify CMS to create the blog on the website using markdown.

Module 4

SEO metadata ๐Ÿ“ˆ

We'll learn how to add SEO tags to the website that help the search engine to know more about the website.

Module 5

Structure the serverless function ๐Ÿš€

We'll use Gatsby Functions to build dynamic applications without running servers.

Module 6

The Contact form ๐Ÿ“ง

We'll use the serverless function to handle the form submission and use SendGrid to send emails.

Module 7

Using Sanity Studio to manage server data ๐Ÿ“„

Sanity Studio is a Headless CMS that we can fully customize. In the Sanity studio, we'll define the schema for the content and publish it on the server.

Module 8

Query/mutate Sanity data๐Ÿ—๏ธ

We'll learn to query and mutate the documents on the Sanity Server.

Module 9

Create checkout flow ๐Ÿ›’

To process the payment, we need to redirect the user to the checkout and keep the record of the recipient in the Sanity Server.

Module 10

The Stripe Payment๐Ÿ’ณ

We use Stripe payment to process online payments.

Module 11

Manage Subscription ๐Ÿ’ผ

We'll learn how to refund or cancel the subscription of the user.

heading

Taimoor Sattar โ€“ I'm the author of this course.

I'm Taimoor Sattar, a full-stack React / Typescript developer. I'm passionate about creating clean and intuitive UIs that provide delightful user experiences. I'm also very interested in developing applications that can be used by people all over the world.

I've designed this course for people who want to learn how to build functional, dynamic websites for their SAAS, service, or e-commerce business. This course will teach you the fundamentals from creating a blog to handling users' subscriptions. I'm sure you'll be able to create amazing apps after taking this course!

Frequently Asked Questions

You have found the right price for the course that you are looking for.

Open House

Free

Introduction to using Gatsby and deploying a website on Netlify

  • Get Started with Gatsby
  • Git and Github
  • Deploy your website using Netlify

Master

$35/ first month

After that, you will pay $9 USD per month

Create a subscription website to collect payments from users based on the plan you offer.

  • ++ Everything include in Free Open House
  • Create checkout and collect payments
  • Create Subscription using Stripe
  • Create contact form
  • Manage content in the Sanity Studio
  • Refund and Cancel user's Subscription