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