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

Learn

Learn to make full-stack React apps in a very short period using the headless CMS: Strapi
Learn to integrate the Stripe payment service with React applications
Send emails to users of your React applications with the SendGrid email client
Deploy React apps to the web with Heroku and Now

About

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!

All the code files are placed at github.com/PacktPublishing/Build-an-Online-Store-with-React-and-GraphQL-in-90-Minutes

Features

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