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.59 (461 reviews)
Udemy
platform
English
language
Web Development
category
instructor
3,311
students
3.5 hours
content
Dec 2019
last update
$34.99
regular price
What you will 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

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.

Screenshots
Build an Online Store with React and GraphQL in 90 Minutes - Screenshot_01Build an Online Store with React and GraphQL in 90 Minutes - Screenshot_02Build an Online Store with React and GraphQL in 90 Minutes - Screenshot_03Build an Online Store with React and GraphQL in 90 Minutes - Screenshot_04
Content
Getting Started
Tools Used / Needed for Our App
Short Path versus the Long(er) Path in the Course
Setup React App (Routing, Navigation)
Git Clone Repo, Install Dependencies, Scaffold React App
Create Components, Routing for Project
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
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
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
Run Client Script with Server, Add Markup for Brands Section
Connecting React with GraphQL using Strapi SDK, Fetch Data from Client
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
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
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
Add Cart Markup in Brews Component
Create Function to Add Items to Cart
Create Function to Delete Item from Cart, Calculate Cart Total
Persist Cart to LocalStorage
Add Signin / Signup Components, User Authentication with JWT
Create Sign Up Form
Add Form Validation to Sign Up (Optional)
Create Toast Message Component to Show Upon Validation Error (Optional)
Register User, Store JWT in LocalStorage
Change Navbar Upon Sign Up
Sign Out User
Create Sign In Markup / Functionality
Checkout Component, Process Payments with Stripe
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
Add Stripe to Checkout Page
Create Orders Content Type, Add Create Function in Controllers
Submit Order to Database, Send / Process Payment with Stripe
BONUS: Send Emails with SendGrid
Set up SendGrid, Give API Key to Strapi (Optional)
Send Confirmation Email upon Checkout (Optional)
BONUS #2: Search with GraphQL, Mobile Design, UI Features
Search with GraphQL and where / field_contains (Optional)
Make App Fully Mobile-Compatible (Optional)
Reviews
Joe
18 August 2021
I love the objectives of this course .. ecomm, mongoAtlas, graphQL, react, but the instability of the versions used in the course and also the changes in the newer version (that do work) makes following along pretty difficult
Luis
6 June 2021
Course is fully packed with content, but would recommend to bring it up to date to avoid any compatibility issues.
Atef
22 December 2020
If the instructor cares about updating the content and reply to questions in Q&A, i could give 5 stars to this course. Instructor way of giving information is simple and content is great in a very limited time.
Kenneth
29 November 2018
Excellent course with latest technology toolsets to address typical web apps. I had learnt a lot of techniques/tricks. First time I saw how Gestatl in action and how good it is for desktop/mobile browsing. Thank you Reed!
Leopold
25 November 2018
This is a very practical and fast paced course. It provides a very good introduction to strapi and graphql, showcasing its potential in a simple but relevant example.
Hannah
9 November 2018
Second time going through course using it as a template for a very large store architecture. Reed is a great instructor. Learned even more the 2nd time around.
John
5 November 2018
Great information in a pretty short course. Was a very quick pace and that could be frustrating at times, but that's how it's done in 90 minutes. Informative. The best thing to add I feel would be deploying the app to see how that is done with all of the dependencies. Overall, great course.
Sean
4 November 2018
Absolutely wicked course, really happy I bought it. Reed gets down to business and starts building the application straight away, the Strapi api tooling is great, I wish their were some exercises in Reeds courses as I think that would solidify learning a little better. However, if you are looking for a no nonsence code along course at exactly the right pacing that shows you how to build an app with MongoDB, Strapi, GraphQL, Stripe and React. Look no futher.
Ronny
27 October 2018
As an experienced developer, it becomes annoying that many courses on Udemy are developed with the beginner in mind. For example, I don't need to be explained what destructuring is, but I do need to learn how to build an online store using GraphQL! Reed talks to you assuming you already know React and ES6. This is definitely an intermediate course for people experienced with React. Because of this I was able to learn a lot from this course quickly!
Glenn
21 October 2018
A bit of a struggle with compatibility and version issues, but with perseverance and patience, I managed to successfully get through this course. thanks, reed.
Jed
17 October 2018
Solid course. Could use a little more in depth explanations but would definitely recommend. Might just have to do some solo research but provides excellent framework especially for such a quick course.
Abel
12 October 2018
This is a great course. I never used strapi before, but I understood that the integration of backend and frontend was perfect. The other good thing was the integration of sendgrid with strapi.
Eric
10 October 2018
This course has been a good match for me because I have attended a few coding boot camps in the past that have not helped me be successful in landing a developer role. Learning how to use React and how quickly I've already set up routes for an app in this course has left me pleasantly surprised. I am very eager to get through the short path of this course then dig deeper into the longer path and make a great online store web app!
Scott
10 October 2018
Great course for someone with a solid understanding of React and other dev tools. I don't recommend attempting this course if you aren't familiar with the basics of React.
Maddy
13 September 2018
The main technologies utilized in this course has run into major configuration issues for multiple people including myself. This means, cannot move forward with 90+% of the course. Unfortunately, instructor was not helpful as of yet.
Charts

Price

Build an Online Store with React and GraphQL in 90 Minutes - Price chart

Rating

Build an Online Store with React and GraphQL in 90 Minutes - Ratings chart

Enrollment distribution

Build an Online Store with React and GraphQL in 90 Minutes - Distribution chart
1796660
udemy ID
7/13/2018
course created date
5/6/2019
course indexed date
Bot
course submited by
TwitterFacebookInstagramYoutubeTelegramTelegram