Real world jamstack
Web development can range from creating a single static web page to a highly complex website and business app. One of the common hurdles we face is trying to build everything all at once. With a change in thinking, we can learn to break things into smaller systems and leverage the API ecosystem's power to our side to extend our apps with functionalities like auth, search, payment processing, etc...
Here I’ll show step by step guide to build your production ready jamstack projects
Module 1: Build a jamstack marketing website
You're gonna learn how to build a Marketing website from start to finish. It will include a Blog section and different landing pages. You are going to learn how to setup an 11ty project, pull the data from Contentful CMS, style your pages using Tailwindcss and deploy it to Netlify
Technologies you will learn
What are we going to build?
Checkout the Demo
What is included
- 00. Introduction
- 01. Setup an 11y project
- 02. Setup Contentful
- 03. List blogposts
- 04. Render Contentful rich text data
- 05. Setup tailwindcss with 11ty
- 06. Create Pages content model
- 07. Render landing pages
- 08. Styling --- Adding responsive navigation
- 09, Styling --- finalise home page design
- 10. Production deployment to Netlify
- 11. Build website on content change
Module 2: Build a jamstack E-commerce site
You will learn how to build a blazing fast and scure shop in no time. Using Gatsby you will be able to pull all your product at build time and prerender them so they load almost instantly.
Technologies you will learn
What are we going to build?
Checkout the Demo
What is included
- 00. Introduction
- 01. Setup a simple Gatsby project
- 02. Create a shopify test store
- 03. Load shopify products in Gatsby
- 04. Dynamically create pages for each product
- 05. Create a Store Context for cart functionality
- 06. Initialize the shopify client
- 07. Build the cart page
- 08. Update and delete items from the cart
- 09. Add shopify checkout
- 10. Configure Tailwindcss to work with Gatsby
- 11. Styling: navigation and home page
- 12. Styling: Product page
- 13. Styling: Cart page
- 14. Deploy to Netlify
- 15. Trigger site build on product change using webhooks
Module 3: Build a jamstack App with auth, subscription management, and Gated content
You're gonna learn how to build an App where you can charge users a recurring fee and they can access your gated content based on their subscription plan. The great part is stripe will handle all the payment processing for us and also the plan changes. You will learn how to use the new Stripe checkout to do that
Technologies you will learn
What are we going to build?
Checkout the Demo
What is included
- 00. Introduction
- 01. Setup A Gatsby Project with client only routes
- 02. Restrict Access to Routes using Netlify identity
- 03. Enable Netlify Identity
- 04. Setup a secure a Hasura cloud instance
- 05. Connect Netlify identity with Hasura Cloud
- 06. Setup Stripe and create stripe customers on signup
- 07. Display User data in the app
- 08. Add subscription management Using Stripe portal
- 09. Update the user role when subscription is updated
- 10. Display content based on user plan using Hasura permissions
About the author

Khaled Garbaya
Hi my name is Khaled Garbaya, and I've been working with web technologies for over 12 years. I've been always an early adopter of new and exciting web technologies like Gatsby, eleventy and blitzjs.
I work on a variety of projects with different frameworks and environments, not only on the frontend and browsers but also on the server-side, command-line tools, and other environments capable of running JavaScript.I love to share my knowledge through e-books and videos. You can checkout some of my previous course over at egghead.io
What do people say about me?






