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.

Tech Covered

heading
heading
heading
heading
heading
heading
heading
heading
heading

Gatsby is a front-end framework used to build 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 this course, You'll start learning the basics of building a website e.g. routes, UI, etc. Then we build a SAAS platform where the user can enroll in the course based on their subscription. Below is the snapshot of the user subscription in the Sanity studio.

Subscriptions
Subscriptions

We're working on Gatsby Framework to build the website. Gatsby is used to build static/dynamic websites. We can take advantage of the Gatsby function that lets you run serverless functions without running servers. Along with Gatsby, we use Tailwind CSS to style the HTML elements. Tailwind provides utility CSS classes that we can use in the code.

To manage and store the data on the server, we use the Sanity platform. Sanity 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.

To collect the payment from the user, we can take advantage of the stripe platform. 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 the end of this course, you'll have the tools, skillset, and framework to start making your own SAAS website. The most important thing for this is that you understand the system. Once you've learned how the system works, everything else falls into place. Also, in the end, you've built something that you can share with your friends and add it 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; 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.

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?