author
Taimoor Sattar

Build A Standout Website With Gatsby, Sanity, and Stripe

In this course, we use the Gatsby (React) framework to build websites that connect with Stripe payment and Sanity Server.

Gatsby is a front-end framework that makes building websites with any CMS, API, or database. Gatsby is built on React (JavaScript library) and it is by far the most popular front-end library (and continues to grow faster).

In the course, we use Gatsby Framework to build the website. We take advantage of the Gatsby function that lets you build dynamic applications without running servers. Along with Gatsby, we use Tailwind to style the HTML elements. Tailwind provides utility CSS classes that we can use in the code.


We use Sanity to manage and store the data. Using the Sanity API, we can interact with the data efficiently and in real-time. We can execute the HTTP request from the frontend to retrieve the data from the Sanity Server.

Stripe is the payments 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.

Checkout
Checkout

Together, we build a platform that accepts payments from customers and serves them accordingly. Initially, we start to learn the basics e.g. tools required, workflow configuration, etc. We then get our hands dirty to discover how the system works. Once you've learned how the system works, everything else falls into place. By the end, you've built something you can share with your friends and add to your portfolio.

The Curriculum

Module 1

The Fundamentals ✨

We'll run a basic website in the browser with Gatsbyjs and deploy it on Netlify.

Module 2

Update you codebase 🆕

Keep the project dependencies updated, increase productivity with the VScode plugin, and avoid nesting imports.

Module 3

Create the blog post 📋

We use Netlify CMS to create/manage blog posts for the website. Netlify CMS is used to manage content for your Git workflow.

Module 4

SEO metadata 📈

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

Module 5

Working with Gatsby Images 🖼️

The images affect the website load performance.

Module 6

Structure the serverless function 🚀

We can execute the serverless function by sending the HTTP request in the Gatsbyjs. We'll learn to structure and handle errors in the serverless function.

Module 7

The Contact form 📧

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

Module 8

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 9

Query/mutate Sanity data🏗️

We can query/mutate the documents on the sanity server by sending the HTTP requests.

Module 10

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 11

The Stripe 💳

We use Stripe to process online payments. We can search for the payment/subscription history from the Stripe Dashboard.

Module 12

Manage Subscription 💼

We'll learn how recipients can do refund or cancel their subscription status form the frontend dashboard.

Module 13

Conclusion 🏁

Finally, We will publish the website on the web using Netlify. Create something amazing and collect payment as a reward. Thanks.

The Author

heading
Taimoor Sattar

Instructor for Build A Standout Website With Gatsby, Sanity, and Stripe

My name is Taimoor Sattar and I’m a full-stack developer and educator. I’ve been building user interfaces for half a decade. I've always been intrigued by languages used elegantly and efficiently, regardless of whether they are interpreted by humans or computers.

Interested in the course?
Click the below button to Get Started

Frequently Asked Questions

The format of this course is text, illustration, and visual. This course is divided into a number of modules that cover a variety of topics.

You can access the course content from the website dashboard. You can enroll in the course by choosing from the available plans.

It is a subscription-based course. Rather than pay a one-time large fee, you can pay a subscription fee to enroll in the course. This course took me over a year to prepare and compile. I want to make this course accessible to everyone.

Yes. Prior knowledge of HTML, CSS, and Javascript are prerequisites for the course. However, we begin with the basics and provide you with the course files so that you can follow along. This course has a Discord chat room for sharing progress.

Yes! For that, you can email me at taimoor@taimoorsattar.dev for more details

If you have a question, you can reach me out via at taimoor@taimoorsattar.dev.

What people says?