Build an Online Store with React and GraphQL in 90 Minutes
4.1 (370 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,527 students enrolled

Build an Online Store with React and GraphQL in 90 Minutes

Create a full-stack e-commerce app from scratch using React, GraphQL, Stripe, and the Headless CMS Strapi in record time
4.1 (370 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,527 students enrolled
Created by Reed Barger
Last updated 12/2019
English [Auto]
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 34 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create e-commerce apps with React and GraphQL
  • Make full-stack React apps in a very short period of time
  • Learn how to integrate the payment service Stripe with React applications
  • Send emails to users of your React applications
  • Build attractive, mobile-first user interfaces
Course content
Expand all 51 lectures 03:40:57
+ Setup React App (Routing, Navigation)
4 lectures 15:00
Gestalt Setup and Navbar Component
Add Base CSS Rules and Apply Class to Active NavLink (Optional)
+ Create Server with Strapi, Add GraphQL to our API
6 lectures 22:57
Configuring MongoDB Atlas with Strapi
Brief Look at Strapi CLI (Optional)
Start the Strapi Server, Create Root Admin for CMS
Overview of Strapi Admin Panel (Optional)
Add Brand Content Type with Content Type Builder, Add First Brand
Install GraphQL Plugin, Visit GraphQL Playground
+ Executing Queries in GraphQL Playground
2 lectures 08:13
Query Brand by Id in GraphQL Playground, Give Permission to All Users (Optional)
Query Multiple Brands with GraphQL, Change Permissions Again
+ Query Brands with GraphQL in React App , Display Brands in UI
4 lectures 14:45
Run Client Script with Server, Add Markup for Brands Section
Catch async / await Errors with try / catch, Put Brand Data in Local State
Display Brands on Home Page, Create Brand Card Component
+ Additional Features - Responsive Design, Searching, Loading Spinners
4 lectures 16:16
Add Flex Wrap to Brand Cards for Responsive Design, More Styles (Optional)
Add SearchField Component to Search Brands (Optional)
Client-Side Search with .filter() (Optional)
Add Loading State for Brand Data, Create Loader Component (Optional)
+ Create Brews Data / Brews Component
6 lectures 24:06
Add Brew Content Type
Seed Brew Data
Query Brew / Brews, Change Permission for Public / Auth Users
Query Brand by Id to Get Associated Brews
Request Brews by Brand Id in Brews Component
Add Markup to Display Brews
+ Create User Cart
4 lectures 16:58
Add Cart Markup in Brews Component
Create Function to Add Items to Cart
Persist Cart to LocalStorage
+ Add Signin / Signup Components, User Authentication with JWT
7 lectures 28:43
Create Sign Up Form
Add Form Validation to Sign Up (Optional)
Change Navbar Upon Sign Up
Sign Out User
Create Sign In Markup / Functionality
+ Checkout Component, Process Payments with Stripe
8 lectures 40:41
Make Checkout a Private Route (Optional)
Add Markup for Checkout Form
Add Cart to Checkout, Show Default Text if Cart Empty
Add Confirmation Modal to Order on Submit
Sign Up for Stripe and Get API Keys
Create Orders Content Type, Add Create Function in Controllers
Submit Order to Database, Send / Process Payment with Stripe
  • Some experience with React (i.e. having built a couple of projects with React Create App)
  • Prior knowledge of ES6 features will help (spread operators, destructuring, object shorthand syntax)

Interested in building impressive full-stack apps with React and GraphQL in record time? This is the course for you!

Here's what we will cover:

  • Creating a complete E-commerce app with React, GraphQL, Stripe and the Headless CMS Strapi from scratch

  • Writing and executing GraphQL queries on the client and server

  • Performing precise queries and searching operations with GraphQL

  • Processing credit card payments and creating orders with Stripe

  • Integrating Stripe with React using the React-Stripe Components library

  • Using the Headless CMS Strapi for lightning-fast project creation and prototyping

  • JWT Authentication for Users with Sign in / Sign up

  • Sending emails to users with the email service/API SendGrid

  • Building unique, attractive, mobile-first UIs using the new React Component library, Gestalt

  • Creating private routes in React for authenticated users

  • Extensive work with the LocalStorage API to persist data on the client

  • Toast notifications for our users to give users feedback about successful actions as well as errors

  • Custom loading animations with the library React Spinners

  • Responsive Design using CSS Flexbox

  • Essential work with React Router 4 (route params, the history object, withRouter, NavLinks, etc.)

  • Tons of work with ES6 / 7, particularly async / await functions (with error handling)

  • And more!

What will be building in this course?

Throughout this course, we'll be building an online store called BrewHaha, an E-commerce app that will allow users to order for delivery drinks on demand.

This will be a full-stack application from scratch, made with React, and GraphQL on top of a Node API created by the tool Strapi. We will create and use a MongoDB database, hosted by MLab. It will utilize industry-renowned tools such as Stripe to process credit card payments made within our React app and the email client SendGrid to send our users emails upon performing certain actions (like making a payment).

How will we build our app so fast (within 90 minutes)?

The secret to making our app so quickly is through the help of the headless CMS, Strapi. It's a tool that, with a single command, will create both a complete Node API and administration panel for us to interact with our data. In the end, this will make building full-stack apps with React (and all JavaScript libraries) much easier. We won't need to reinvent the wheel for future projects we build--the basic things we need to do across our apps (data management, roles and permissions, authentication) will be made much easier

And we won't be taking any shortcuts in creating our app. By the end we will truly have a complete app which we'll be able to deploy to the web and have visitors register, add products to their user cart, checkout their items and have their credit card processed for payment!

What is a headless CMS?

Headless refers to a lack of a frontend; in other words, a headless CMS doesn't give us the client to our app for users to interact with (we will be doing that with React), it gives us a better way to work with the data in our apps, as you'll see. CMS stands for 'content management system'. It provides us with a rich, intuitive interface to, well, manage content within our projects! To create new types of data with ease, manage the roles and permissions of users; in general, to give us extensive control over our app in one convenient place.

If you've not working with content management systems before, you're in the right place. I'll show you how to get up and running with Strapi to create a Node backend and complete API, to customize plugins and features within our app and to become productive quickly.

Who this course is for:
  • Anyone who has at least two months of experience with the JavaScript library React
  • Beginner / intermediate React developers interested in making practical, real-world apps
  • Web developers in general looking how to build and prototype projects very quickly
  • Developers looking to begin (or continue) building apps with React and GraphQL