Learn JAMStack by building Ecommerce website

Name: Learn JAMStack by building Ecommerce website
Rating: 4.7 (4 reviews)

Build websites that are simpler, faster, and more secure

Created byTech Vista

Last updated 9/2022

English

English [Auto],

What you'll learn

Real-World usage of the JAM-Stack
Modern JavaScript deployment
Serving Frontend to the internet
Static Site Generators (11ty)
Headless CMS (Contentful CMS)
Tailwindcss with 11ty
Tailwindcss with Gatsby
Gatsby and Graphql
Ecommerce Project
Blog Website

Course content

3 sections • 29 lectures • 3h 43m total length

Introduction3:31
Learn jamstack by building a blog with 11ty and Contentful, then an e-commerce site with GatsbyJS and GraphQL, deploying both on Netlify.
Resources for first project0:04

11ty setup4:58
In this video we will set our 11ty project
Contentful Setup11:56
In this video we will setup Contentful
Blogposts List9:34
Learn to build a blog posts list in jamstack by creating blogs.liquid, configuring data and slug-based permalinks, and using a layout to render posts with links and titles.
Render Contentful3:39
Tailwindcss with 11ty Setup6:30
Install tailwindcss and initialize 11ty, then set up the typography plugin. Configure tailwind, add dev and watch scripts, and apply tailwind layers in liquid templates.
Create Pages content model8:55
Create a dynamic page content model for a JAMStack ecommerce site by defining page fields, a blocks array, and reusable content types, then assemble and publish pages with navigation linked.
Render landing pages10:37
Adding responsive navigation11:28
Build a responsive navigation header for a jamstack ecommerce site by styling with Tailwind and Liquid, configuring a logo, mobile menu button, and adaptive menu behavior across devices.
Home page design16:29
Deployment to Netlify9:02
Build website on content change2:44
Learn to automatically rebuild a jamstack ecommerce site when content changes by configuring deployment triggers, selecting publish events, and verifying live updates after deployment.

Resources for second project0:04
Gatsby project Setup2:43
Create a shopify test store2:37
Create a shopify test store by signing up or logging in, confirming your email, and using the dashboard to add products and set up stories and ads.
Loading Shopify products in Gatsby7:49
Load Shopify products into a Gatsby project by configuring the Gatsby setup, enabling a private Shopify app, and using an environment token to fetch products.
Create pages dynamically for each product13:50
Create a StoreContext for cart10:10
Create a store context for the cart to manage line items, products, and checkout in a JAMstack ecommerce app, wrapping pages with a layout and providing add-to-cart functionality.
Initialize the shopify client18:06
Initialize the Shopify client by configuring environment variables, importing modules, and implementing add-to-cart and checkout flows with line items, error handling, and local storage sync.
Building cart page9:12
Update and Delete items from the cart12:03
Update and remove line items in the cart of a jamstack ecommerce app, manage quantity with state, and build a reusable item component.
Add shopify Checkout4:06
Build a JAMStack ecommerce flow by adding Shopify checkout, wiring a shopping cart with subtotal, a checkout button, and a test payment to simulate real transactions.
Configure Tailwindcss with Gatsby4:32
Navigation and Home page Styling20:27
Style the index page and navigation for a jamstack ecommerce site, with header padding, a responsive product grid, and product cards featuring images and prices, plus a conditional cart badge.
Product page Styling5:50
Learn to style a product page with responsive layout using container classes, image sizing, and typography tweaks for mobile and desktop presentation.
Cart page Styling7:11
Learn to style a jamstack ecommerce cart page by applying utility classes to containers, items, prices, and buttons, achieving responsive layouts, spacing, borders, and focus states.
Deploy to Netlify2:50
Upload your site to GitHub and authorize it for deployment on Netlify. Create environment variables, deploy the live site, and explore the homepage with add-to-cart and checkout features.
Trigger site build on product change using webhooks2:55

Requirements

Basic programming knowledge
HTML, JavaScript, CSS
Interest in building JavaScript applications

Description

The JAMstack allows people to create websites that are simpler, faster, and more secure than other methods of creating websites. Sites created with the JAMstack are delivered by pre-rendering files that are served directly from a CDN, removing the requirement to manage or run web servers.

JAMstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.

Better Performance

Why wait for pages to build on the fly when you can generate them at deploy time? When it comes to minimising the time to first byte, nothing beats pre-built files served over a CDN.

Higher Security

With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services.

Cheaper, Easier Scaling

When your deployment amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. CDNs are perfect for this, and often include scaling in all of their plans.

Better Developer Experience

Loose coupling and separation of controls allow for more targeted development and debugging, and the expanding selection of CMS options for site generators remove the need to maintain a separate stack for content and marketing.

Project 1: You're gonna learn how to build a website from start to finish. 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.

Project 2: You will learn how to build a blazing fast and secure shop in no time. Using Gatsby you will be able to pull all your product at build time and pre render them so they load almost instantly.

Who this course is for:

Frontend developers who want to put their applications to the web
Backend developers who want to get into modern frontend development and deployment
Anyone who wants to learn about Jamstack

Learn JAMStack by building Ecommerce website

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 4min

First Project11 lectures • 1hr 36min

Build a jamstack E-commerce site16 lectures • 2hr 4min

Requirements

Description

Who this course is for: