$35 | Created by Reed Barger | Last Updated 4/2019Duration: 3.5 hours | Video: h264, 1280×720 | Audio: AAC, 44 KHz, 2 Ch | 1.8 GBGenre: eLearning | Language: English + Sub | 52 LecturesCreate a full-stack E-commerce app from scratch using React, GraphQL, Stripe, and the Headless CMS Strapi in record timeWhat you’ll learnCreate E-commerce apps with React and GraphQLMake full-stack React apps in a very short period of time using the headless CMS StrapiLearn how to integrate the payment service Stripe with React applications using react-stripe-componentsSend emails to users of your React applications with the email client SendGridBuild attractive, mobile-first user interfaces with the new React component library from Pinterest, GestaltDeploy React apps to web with Heroku and NowRequirementsSome 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)DescriptionInterested 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 scratchWriting and executing GraphQL queries on the client and serverPerforming precise queries and searching operations with GraphQLProcessing credit card payments and creating orders with StripeIntegrating Stripe with React using the React-Stripe Components libraryUsing the Headless CMS Strapi for lightning-fast project creation and prototypingJWT Authentication for Users with Sign in / Sign upSending emails to users with the email service/API SendGridBuilding unique, attractive, mobile-first UIs using the new React Component library, GestaltCreating private routes in React for authenticated usersExtensive work with the LocalStorage API to persist data on the clientToast notifications for our users to give users feedback about successful actions as well as errorsCustom loading animations with the library React SpinnersResponsive Design using CSS FlexboxEssential 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)Deploy our application to the web using Heroku and NowAnd 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 building 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 easierAnd 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 ReactBeginner / intermediate React developers interested in making practical, real-world appsWeb developers in general looking how to build and prototype projects very quicklyDevelopers looking to begin (or continue) building apps with React and GraphQL
