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.
Tech Covered
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.
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
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
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.