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

Enter your email to get some free course preview.

Or buy now if you're already convinced

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

  • Eleventy
  • Tailwindcss
  • Contentful
  • Netlify

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

  • Gatsbyjs
  • React
  • Shopify
  • Netlify

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

  • Gatsby
  • React
  • Hasura
  • Netlify
  • Stripe

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

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?

twitter testomonial about 11ty coursetwitter testomonial about 11ty coursetwitter testomonial about 11ty coursetwitter testomonial about 11ty coursetwitter testomonial about 11ty coursetwitter testomonial about 11ty courseNader Dabit likes my Gatsby course on twitter

Frequently asked questions

Who is the target audience of this course?
This course is designed for Front End devs looking to understand the jamstack. JS Developers looking to advance in their career. Wordpress Developer moving to jamstack Anyone who wants to get better at modern web development in general
What if I'm not thrilled?
I will refund you no question asked, just email khaled@learnjamstack.com
Do I need to be an expert in javascript, React, Gatsby... and everything
Absolutely not - but I assuming some basic knowledge
How do I watch the videos? can I watch them at 2x?
Once you buy a the course you will receive an email with the access to your dashboard where you can watch the videos
How tided is this course to Contenful, hasura, shopify, etc...?
You can pick another service, but the approach should be very similar to what I teach in the course
How long will I have access to these videos?
Pay once, and you have them forever
Are you planning to update the course in the future?
Absolutely, I will add and update lessons regularly
Are the videos captioned?
Yes, all the videos are captioned, in English, by professionals at 99% accuracy
Can I use the code in my projects including commercial once?
Yes, as long as you don't create your course with the code
Wait I have more question
Sure thing - email me khaled@learnjamstack.com

© Khaled Garbaya

Credit: A big thank you to @jh3yy for the wave animation