Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development React

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
Rating: 4.3 out of 54.3 (435 ratings)
3,002 students
Created by Reed Barger
Last updated 12/2019
English
English [Auto]
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

12 sections • 51 lectures • 3h 40m total length

  • Preview04:36
  • Preview01:22

  • Preview03:18
  • Preview03:18
  • Gestalt Setup and Navbar Component
    06:30
  • Add Base CSS Rules and Apply Class to Active NavLink (Optional)
    01:54

  • Configuring MongoDB Atlas with Strapi
    06:39
  • Brief Look at Strapi CLI (Optional)
    02:26
  • Start the Strapi Server, Create Root Admin for CMS
    02:15
  • Overview of Strapi Admin Panel (Optional)
    05:30
  • Add Brand Content Type with Content Type Builder, Add First Brand
    04:50
  • Install GraphQL Plugin, Visit GraphQL Playground
    01:17

  • Query Brand by Id in GraphQL Playground, Give Permission to All Users (Optional)
    05:15
  • Query Multiple Brands with GraphQL, Change Permissions Again
    02:58

  • Run Client Script with Server, Add Markup for Brands Section
    02:21
  • Preview04:14
  • Catch async / await Errors with try / catch, Put Brand Data in Local State
    02:36
  • Display Brands on Home Page, Create Brand Card Component
    05:34

  • Add Flex Wrap to Brand Cards for Responsive Design, More Styles (Optional)
    01:44
  • Add SearchField Component to Search Brands (Optional)
    05:07
  • Client-Side Search with .filter() (Optional)
    03:47
  • Add Loading State for Brand Data, Create Loader Component (Optional)
    05:38

  • Add Brew Content Type
    02:22
  • Seed Brew Data
    04:20
  • Query Brew / Brews, Change Permission for Public / Auth Users
    03:16
  • Query Brand by Id to Get Associated Brews
    02:28
  • Request Brews by Brand Id in Brews Component
    05:39
  • Add Markup to Display Brews
    06:01

  • Add Cart Markup in Brews Component
    04:39
  • Create Function to Add Items to Cart
    05:03
  • Preview03:58
  • Persist Cart to LocalStorage
    03:18

  • Create Sign Up Form
    05:12
  • Add Form Validation to Sign Up (Optional)
    02:22
  • Create Toast Message Component to Show Upon Validation Error (Optional)
    Preview05:07
  • Preview06:23
  • Change Navbar Upon Sign Up
    03:53
  • Sign Out User
    03:51
  • Create Sign In Markup / Functionality
    01:55

  • Make Checkout a Private Route (Optional)
    02:35
  • Add Markup for Checkout Form
    05:34
  • Add Cart to Checkout, Show Default Text if Cart Empty
    05:51
  • Add Confirmation Modal to Order on Submit
    07:00
  • Sign Up for Stripe and Get API Keys
    01:07
  • Preview04:10
  • Create Orders Content Type, Add Create Function in Controllers
    05:59
  • Submit Order to Database, Send / Process Payment with Stripe
    08:25

Requirements

  • 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)

Description

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

Instructor

Reed Barger
Professional Web and Mobile Developer
Reed Barger
  • 4.4 Instructor Rating
  • 8,946 Reviews
  • 38,281 Students
  • 21 Courses

I am a professional developer with a passion for learning and teaching everything I know.

I believe in learning through doing and this philosophy is present in every course that I teach.

I love to explore new web & mobile technologies and my courses focus on giving you the edge in our fast-moving industry.

Looking forward to seeing you inside one of my courses!

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.