Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Build an Online Store with React and GraphQL in 90 Minutes


Getting Started :
Tools Used / Needed for Our App

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)