Build A Standout Website With Gatsby, Sanity and Stripe
Gatsby is the React-based framework to build static and dynamic websites. In this course, we'll build a subscription platform using Gatsby, Sanity, and Stripe.
Tech Covered
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.
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.
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
Gatsby JS - The Fundamental
We will learn the basics of the Gatsby Framework and deploy the code on the Netlify server.
Aliases & Styles
We'll learn how to install and use Tailwind CSS to style in the React component.
Blogs in Gatsby's
We'll use Netlify CMS to create the blog on the website using markdown.
SEO metadata 📈
We'll learn how to add SEO tags to the website that help the search engine to know more about the website.
Structure the serverless function 🚀
We'll use Gatsby Functions to build dynamic applications without running servers.
The Contact form 📧
We'll use the serverless function to handle the form submission and use SendGrid to send emails.
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.
Query/mutate Sanity data🏗️
We'll learn to query and mutate the documents on the Sanity Server.
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.
The Stripe Payment💳
We use Stripe payment to process online payments.
Manage Subscription 💼
We'll learn how to refund or cancel the subscription of the user.
The Author
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 course is divided into different topics and sections for each topic. In each section, we explain the concept using text, illustration, and code.
You can access the course content by login into the website dashboard. For a better experience, prefer a desktop.
You can access all the course content for 39$ for the first month and 10$ for each month after the first month. Cancel at any time.
If you have a question, you can reach me out via at taimoor@taimoorsattar.dev.