A Complete Guide to the JAMstack and React E-Commerce

Get ready to build the most modern, comprehensive, feature-rich, full stack e-commerce platform in any online course! By the end of this course, you’ll be completely confident in building large applications with complex functionality all on your own.

With over 75 hours of content across more than 475 lectures, this is a complete full stack masterclass! I’ll be teaching you everything there is to know about building powerful full stack applications from scratch based on the next-generation JAMstack architecture.

The JAMstack is the next step in the evolution of web application architecture. It addresses many of the limitations and frustrations of traditional full stack applications. Unlike a traditional stack, the JAMstack isn’t a specific set of certain tools, like MERN. Instead, the JAMstack is a set of concepts, a philosophy behind how modern full stack applications should be built to enhance performance, security, and scalability while drastically improving the developer experience. This means better software for our users and easier coding for ourselves.

That means there are a number of different JAMstacks using different sets of tools. For our JAMstack, we’ll be using React with Gatsby, Material-UI, Strapi, Stripe, and Netlify. We’ll use these tools to create a production-ready e-commerce platform that’s more comprehensive and full of features than any other online course! Our project includes everything you can imagine about selling products online like grouping them into categories, applying custom sorting and filtering, leaving reviews, adding products to a list of favorites, and subscriptions to have products delivered regularly! To enable all of this powerful functionality we’ll integrate a complete authentication system with login/sign up, forgot/reset password, and social media authentication. This will also include building a user settings page allowing users to change their password as well as any stored shipping or payment information. Then we just need to build our completely custom cart and checkout process to let our customers actually make purchases using their credit cards and receive receipts in their email.

This is a massive project that will guide you through the process of breaking down complex functionality into manageable step-by-step plans of action. You’ll learn to think about large-scale projects and how to make architectural decisions that simplify your systems later on. Even though this course is focused on e-commerce you’ll still learn all the underlying concepts that will transfer to every full stack project.

One of the core principles of the JAMstack is only serving statically generated files. Traditionally in React, like with create-react-app, the server hosting your project sends your JavaScript bundle to be processed and rendered by the client’s browser. We’ll turn this process around by using the static site generator Gatsby. Gatsby will take our React code and generate the resulting static HTML files for us which can be served directly to our users for lightning-fast performance and increased security. Gatsby is a very powerful and extensive system with exceptionally helpful features such as programmatic page creation, automatic accessibility enhancements, and powerful image optimization.

We’ll see how Material-UI can maximize our productive output and reduce complexity for building incredible interfaces with React. We’ll mitigate boilerplate and start working faster by using its vast component library, consisting of all the common elements found in most web applications. Then we can bring our designs to life with Material-UI’s styling system for completely customizing those components and its theming system for consolidating the most commonly used styles. Helping us show off our hard work is the layout system for consistently arranging our components on the screen. Finally, the responsive design system ensures our designs look perfect on the largest screens down to the smallest mobile devices. Material-UI has everything we need to build a stunning frontend with the JAMstack.

Strapi is the future of backend development. Strapi is a headless CMS that singlehandedly revolutionalizes and streamlines all backend processes. A headless CMS also decouples the backend from the frontend in a JAMstack site which is much more flexible and maintainable. Strapi gives us a very simple user interface for managing our backend content and data, then automatically creates APIs with an integrated JWT-based authentication system with roles and permissions to interact with that content. In traditional full stack architectures, creating your database models to represent your content, entering all of your data, creating APIs to serve that content, and configuring those APIs with security and authentication were all completely separate tasks that took days, if not weeks to complete. If you haven’t ever done full stack or backend development it’s hard to truly express the complexity of these tasks! Most full stack courses are going to make you labor through all of these processes manually because there hasn’t been another way — until now!

Thanks to Strapi all of that tedious and repetitive code will be instantly automated. However, all of the underlying database models are completely intact and customizable for projects that need more advanced configurations. Strapi supports most major databases but we’ll use MongoDB in this course, although that doesn’t make much of a difference thanks to Strapi’s abstractions. Strapi is also open source and built with React so it’s completely customizable and extendable. Strapi is the best headless CMS for the JAMstack!

Stripe is one of the leading payment processors for online merchants and is being used by tech giants like Lyft, Shopify, and Zoom. Stripe features one of the most flexible and powerful payment APIs with extensive and thorough documentation. Using Stripe Elements you can get a secure credit card field set up in seconds, and the Stripe PaymentIntents API powers our completely custom checkout process to finalize the order. Using Stripe enables functionality like securely saving customer payment information for future use and tracking order history.

Once our project is built we’ll deploy it as a live, production website on Netlify. Netlify is without a doubt the best hosting platform for JAMstack sites. Their CEO and co-founder, Mathias Biilmann, actually coined the term! That means Netlify is specially optimized for JAMstack sites to deliver cutting-edge performance, security, and scalability by automatically applying our JAMstack best practices like atomic deploys, cache invalidation, using a CDN, and git-based CI/CD.

We will also be covering extra topics like SEO in React, React Hooks, React Context, creating fluid and engaging interfaces with animations, pagination, webhooks, query strings, tabular data, form handling, and so much more!

The Course Content Includes:

• Understanding the motivation and philosophy behind the next-generation full stack architecture, the JAMstack

• Increasing your opportunities and marketability in the workplace and getting ahead of the curve by learning the JAMstack

• Adopting modern React best practices by using functional components, React Hooks, and the React Context API

• Setting up a new project with Gatsby, Strapi, and Material-UI

• Working based on just a design file like in an actual work environment

• Simplifying and automating backend development with the headless CMS Strapi

• Enhancing performance and security with our static site generator Gatsby

• Creating a theme for your application by mastering Material-UI’s centralized styling system

• Learning how to use responsive design to ensure your applications look perfect on any screen size!

• Using the Material-UI grid system to align complex layouts perfectly

• Integrating a JWT-based authentication system with login/sign up, forgot/reset password, user settings, and social media integration

• Building a completely custom cart and checkout system powered by Stripe

• Saving multiple sets of shipping and payment information for future usage

• Breathing life into your applications with animations from react-lottie and react-spring

• Refining your UI/UX design intuition and seeing concepts in action

• Programmatically sending emails for events such as receipts, confirmations, or resetting passwords

• Automating Search Engine Optimization (SEO) in React applications using Gatsby plugins

• Deploying a Gatsby frontend to Netlify and a Strapi backend to AWS with enhanced server configuration and a custom domain name

• Powerful image optimization techniques like lazy-loading, device-specific sizing, and automatic conversion to next-gen formats

• Learning about the MVC model and how to use it as a mental framework within the JAMstack

Along with lifetime access to over 75 HOURS of content, you’ll also find easy access to support through active Q/A.

You’ve got nothing to lose — this course comes with a 30-day money-back guarantee in case you aren’t completely satisfied!

The JAMstack is the future of web development, so get ahead of the curve and stand out amongst React developers by learning to build powerful, next-generation full stack applications today.

Who this course is for:

• React developers who want to get ahead of the curve by learning a next-generation application architecture, the JAMstack.
• React developers looking for an easier, faster way to get up and running with clean, consistently designed applications.
• React developers who feel like they know React but still have more to learn before building a polished website.
• React developers who want to learn about e-commerce by building a comprehensive online store from scratch.
• React developers who want to build complex interactions between backend data and frontend user interfaces.
• React developers who want to build powerful, complete full-stack applications using a cutting-edge, streamlined workflow.
• React developers who want to master responsive design and make their applications look perfect on any screen size.
• React developers interested in adding user authentication to their applications including social media integration.
• React developers looking for a better understanding of UI/UX design principles in practice.
• React developers who want skills to help them stand out against the typical developer.
• React developers with an interest in building sleek, fluid applications with professional designs.
• React developers who want to be able to build any website design that’s handed to them.
• React developers who would like to add a huge full-stack production application to their portfolio.
• React beginners and experts looking to further their learning and take their skills to the next level.
• React developers just getting started and looking for the next step.
• Full stack developers with basic React knowledge looking for a modern architecture.
• Full stack developers looking for a better developer experience than the frustrations of traditional monolithic applications.
• Full stack developers looking to maximize performance, security, and scalability in their applications.
• Back end developers with React experience looking to simplify their workflow and automate repetitive processes.
• Back end developers looking for an easier way to build powerful APIs with roles and permissions in minutes instead of days.