skip to Main Content

Build an Online Store with React and GraphQL in 90 Minutes

$34.99 $12.00

4.88 (12 reviews)


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

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

Course content

  • Getting Started
  • Setup React App (Routing, Navigation)
  • Create Server with Strapi, Add GraphQL to our API
  • Executing Queries in GraphQL Playground
  • Query Brands with GraphQL in React App , Display Brands in UI
  • Additional Features – Responsive Design, Searching, Loading Spinners
  • Create Brews Data / Brews Component
  • Create User Cart
  • Add Signin / Signup Components, User Authentication with JWT
  • Checkout Component, Process Payments with Stripe

12 reviews for Build an Online Store with React and GraphQL in 90 Minutes

  1. Luis Brito

    I can definitely see this course helping breaking through that initial barrier when it comes to learning a programming language. I’m positive I’ll finish it and hopefully master python by then.

  2. Abdallah Galal Abouhussein

    I would like to share my personnel experience, i`m very pleased and happy for taking this impressive course because Dr. Angela always makes it simple and easy to understand and always makes a precaution section before or after any bug that may appear to some students and also write or record the solution for us, and each word she said is very real and easy to understand.
    Thanks Dr. Angela
    Abdallah Galal

  3. Jiaqing Fan

    Very good course. Dr Angela explains things very clearly. The exercises are interactive and helpful.

    Angela’s voice is like ASMR in most lessons. So you won’t lose focus?

  4. Jaime Sánchez Blanco

    Every concept is very well explained so you can assimilate it, and the teacher insists in practicing daily to get the habit of programming. It really motivates to keep studying and practicing every day.

  5. Bradley Carouthers

    3 days in and I’ve already learned more than other training programs where I’ve put months in. Her teaching style is both efficient and effective.

    Edit: Now on day 29 and the course has held up my expectations and hopes. The rise in complexity is not too sharp, and every day feels like an accomplishment. Angela takes her time to explain things without rushing, yet is able to pack tons of information in nuggets of time.

    Still recommend supplemental exposure for a more wholesome grasp. Though, this should be quite enough

  6. Tommy Prévost

    Very good course.

    PROs: lots of coding exercises, clear explanations, great examples, adapted to 2021’s reality.

    CONs: past the first 30 lessons, many similar coding hands-on.

  7. Quang Tu

    I love all the lectures and challenges of this course. I finally find myself in love with coding. This is definitely a fun course. Thank you Angela for this great course.

  8. Fortunate Eze

    This course is nothing short of AMAZING. The level of love and sincere desire to see students succeed present in this course is a rare sight. This course is fun, it’s challenging, it’s suspense-filled, it makes you feel good about yourself solving those challenges. You don’t take this course and memorise codes, you take it and you know what you’re doing because you literally do it yourself.

    It couldn’t possibly be any more obvious that Angela brought out her whole heart, time, energy and resources to give us a course that if priced based on it’s value, many of us certainly can’t afford. I mean, she kept advising and encouraging us to keep going, because she knows the road could get bumpy, she made a few jokes and used funny animations so we smile along the way keeping it fun. Why some people can’t see this and would rather subscribe to trying to bend courses to fit their own personal preferences is beyond me, but I guess people will always be people.

    Dear Angela, I cannot speak for everyone but I certainly can speak for myself and I’m saying thank you. The efforts you put into making this course outstanding didn’t go unnoticed.

    Let as many of us as appreciate your efforts make you happy and energize you to create more life changing courses for us.


  9. Chendaniel

    Just the course fits me. Learn by doing, it is easy to start and just follow the flow and at day 15 you realized how to program in Python. Then the magic happen. I am on day 27 and I am looking forward to start a new section everyday.

  10. Caspar Cheng

    Angela is my favourite teacher on Udemy, her courses always come with clear and concise demonstration, make it really easy to understand the content. Meanwhile, she also provide a lot of tips to encourage us moving further on the way of coding. I’m definitely a super fan of her. I had finished her web development boot camp and now I’m learning Python 100 days of code. This course is amazing as she provided one particular project for each day’s learning, which is, really useful and handy. Also, those projects are really interesting and won’t let me feel disappointed about myself. Although some of them are a little bit difficult, they’re still resolvable after some struggling and searching online. I’ll recommend this course for those who really want to learn Python well and write real python projects from scratch!

  11. Jonas Weber

    The course was awesome in the first half! Really helped me to get back to programming and learning new techniques. Also the course got way to much focused on web development in the second half, which I’m not really interested in and is redundand to your dedicated web development course. The lack of videos in the last quarter was rather sad. I really would’ve liked some video explanations for pandas and matplotlib. The challenges and capstone projects were great and challenging!
    All in all I can really recommend this course for beginners and those who want to learn python and/or get back to programming!

  12. Rohit Prasad

    Angela is the best teacher I have ever experienced. The way she explains all the topics and makes use of it in the projects is commendable. Thank you so much Angela for this course.

Leave a customer review

Your email address will not be published. Required fields are marked *

Back To Top