Build an Online Store with React and GraphQL in 90 Minutes

Video description

Create a full-stack e-commerce app from scratch using React, GraphQL, Stripe, and the headless CMS, Strapi, in record time

About This Video

  • Create an e-commerce app with React and GraphQL
  • Build attractive, mobile-first user interfaces with the new React component library from Pinterest: Gestalt

In Detail

Welcome to Build an Online Store with React and GraphQL in 90 Minutes!

Throughout this course, we'll be building an online store called BrewHaha, an e-commerce app that will allow users to order 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 Strapi tool. 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 SendGrid email client to send our users emails when they perform certain actions (such as making a payment).

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 SendGrid email service/API
  • Building a 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 them feedback about successful actions as well as errors
  • Custom-loading animations with the React Spinners library
  • Responsive design using CSS Flexbox
  • Deploy your application to the web using Heroku and Now
  • In the end, this will make building full-stack apps with React (and all JavaScript libraries) much easier. We won't be taking any shortcuts in creating our app; we will truly have a complete app which we'll be able to deploy to the web. Visitors will be able to register, add products to their user cart, check-out their items, and pay via their credit card!

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

    Publisher resources

    Download Example Code

    Table of contents

    1. Chapter 1 : Getting Started
      1. Tools Used / Needed for Our App 00:04:36
    2. Chapter 2 : Setup React App (Routing, Navigation)
      1. Git Clone Repo, Install Dependencies, Scaffold React App 00:03:18
      2. Create Components, Routing for Project 00:03:19
      3. Gestalt Setup and Navbar Component 00:06:31
      4. Add Base CSS Rules and Apply Class to Active NavLink (Optional) 00:01:55
    3. Chapter 3 : Create Server with Strapi, Add GraphQL to our API
      1. Configuring MongoDB Atlas with Strapi 00:06:40
      2. Brief Look at Strapi CLI (Optional) 00:02:26
      3. Start the Strapi Server, Create Root Admin for CMS 00:02:16
      4. Overview of Strapi Admin Panel (Optional) 00:05:31
      5. Add Brand Content Type with Content Type Builder, Add First Brand 00:04:51
      6. Install GraphQL Plugin, Visit GraphQL Playground 00:01:17
    4. Chapter 4 : Executing Queries in GraphQL Playground
      1. Query Brand by Id in GraphQL Playground, Give Permission to All Users (Optional) 00:05:15
      2. Query Multiple Brands with GraphQL, Change Permissions Again 00:02:58
    5. Chapter 5 : Query Brands with GraphQL in React App, Display Brands in UI
      1. Run Client Script with Server, Add Markup for Brands Section 00:02:22
      2. Connecting React with GraphQL using Strapi SDK, Fetch Data from Client 00:04:14
      3. Catch async / await Errors with try / catch, Put Brand Data in Local State 00:02:36
      4. Display Brands on Home Page, Create Brand Card Component 00:05:34
    6. Chapter 6 : Additional Features - Responsive Design, Searching, Loading Spinners
      1. Add Flex Wrap to Brand Cards for Responsive Design, More Styles (Optional) 00:01:45
      2. Add SearchField Component to Search Brands (Optional) 00:05:08
      3. Client-Side Search with .filter() (Optional) 00:03:48
      4. Add Loading State for Brand Data, Create Loader Component (Optional) 00:05:38
    7. Chapter 7 : Create Brews Data / Brews Component
      1. Add Brew Content Type 00:02:23
      2. Seed Brew Data 00:04:21
      3. Query Brew / Brews, Change Permission for Public / Auth Users 00:03:17
      4. Query Brand by Id to Get Associated Brews 00:02:28
      5. Request Brews by Brand Id in Brews Component 00:05:39
      6. Add Markup to Display Brews 00:06:01
    8. Chapter 8 : Create User Cart
      1. Add Cart Markup in Brews Component 00:04:40
      2. Create Function to Add Items to Cart 00:05:03
      3. Create Function to Delete Item from Cart, Calculate Cart Total 00:03:59
      4. Persist Cart to LocalStorage 00:03:18
    9. Chapter 9 : Add Signin / Signup Components, User Authentication with JWT
      1. Create Sign Up Form 00:05:12
      2. Add Form Validation to Sign Up (Optional) 00:02:22
      3. Create Toast Message Component to Show Upon Validation Error (Optional) 00:05:08
      4. Register User, Store JWT in LocalStorage 00:06:24
      5. Change Navbar Upon Sign Up 00:03:53
      6. Sign Out User 00:03:52
      7. Create Sign In Markup / Functionality 00:01:56
    10. Chapter 10 : Checkout Component, Process Payments with Stripe
      1. Make Checkout a Private Route (Optional) 00:02:36
      2. Add Markup for Checkout Form 00:05:34
      3. Add Cart to Checkout, Show Default Text if Cart Empty 00:05:52
      4. Add Confirmation Modal to Order on Submit 00:07:00
      5. Sign Up for Stripe and Get API Keys 00:01:08
      6. Add Stripe to Checkout Page 00:04:10
      7. Create Orders Content Type, Add Create Function in Controllers 00:06:00
      8. Submit Order to Database, Send / Process Payment with Stripe 00:08:25
    11. Chapter 11 : BONUS: Send Emails with SendGrid
      1. Set up SendGrid, Give API Key to Strapi (Optional) 00:03:18
      2. Send Confirmation Email upon Checkout (Optional) 00:09:01
    12. Chapter 12 : BONUS #2: Search with GraphQL, Mobile Design, UI Features
      1. Search with GraphQL and where / field_contains (Optional) 00:07:46
      2. Make App Fully Mobile-Compatible (Optional) 00:07:18

    Product information

    • Title: Build an Online Store with React and GraphQL in 90 Minutes
    • Author(s): Reed Barger
    • Release date: October 2019
    • Publisher(s): Packt Publishing
    • ISBN: 9781839218446