Online Store with React, Strapi CMS with GraphQL & Stripe

July 2020 (updated: October 2020)

🔨 From Udemy 'Build an Online Store with React and GraphQL in 90 Minutes'.

Demo on Github page.

To valid the credit card do as suggested by Stripe: Need a test card? Try 4242 4242 4242 4242, a valid expiration date in the future, and any CVC number and zip code.

The Strapi CMS part is hosted on heroku and uses cloudinary to host images.

About

How to launch in dev mode

React app: npm start

Strapi:

cd server //(or name choosen)

npm run develop

If error: Cannot find module '../build/Release/sharp.node'

• • Delete node_modules folder
• Clear npm cache npm cache clean --force
• (Optional) upgrade npm packages npm install npm@latest -g
• Re-install packages by running npm install

React

Use import in React to import Strapi as component:

import Strapi from 'strapi-sdk-javascript/build/main';

GraphQL

Playground in Strapi with documentations and schemas: Playground

In Strapi, in Role & Permission add for users:

content-type: find + findone

Allow to perform this action for: ratelimit

Exemple to list all brands:

query {
	brands {
  	_id
    name
    description
        image {
        name
        }
	}
}

Components & Services

• MongoDB Atlas, cloud MongoDB service.
• Gestalt, React UI Components
• Strapi, Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first => Use npm run develop to launch strapi in developer mode (otherwise won't be possible to add content-types)
• GraphGL: installed using Strapi dashboard.
• Stripe, Online payment processing for internet businesses => Use npm i stripe after modifying server/api/orders/controllers/order.js
• strapi-provider-email-sendgrid
• SendGrid => In /server/ use npm i strapi-provider-email-sendgrid

Useful Links

• Build an Online Store with React and GraphQL in 90 Minutes
• Source code for the "Build an Online Store with React and GraphQL in 90 Minutes" Udemy Course.
• Strapi - Open source Node.js Headless CMS 🚀
• Local Strapi + cloud MongoDB Atlas
• Stripe: Online payment processing for internet businesses
• FAQ: No LogoTypes shows up..
• React Spinners
• A Guide To The Reduce Method In Javascript​
• Finally Understand the JavaScript Reduce Method
• Reduce() : Le couteau suisse du développeur Javascript
• Destructuring Props in React
• Using React Router to Specify Which Element in a Navigation Bar Is Active
• https://www.npmjs.com/package/strapi-provider-email-sendgrid
• How to Store API Keys and ENV Vars in a create-react-app Project
• Deploy Strapi app on Heroku using MongoDB Atlas (MongoDB tab)
• How to deploy React App to GitHub Pages
• Deploying a create-react-app with routing to GitHub pages
• Module build failed: BrowserslistError: Unknown browser query dead
• My React application failed to compile strapi sdk
• Strapi stable version 3.0.x set default file upload provider to AWS S3 / Google Cloud Storage (GCS) / Cloudinary
• How to fix 'Error: querySrv EREFUSED' when connecting to MongoDB Atlas?How to fix 'Error: querySrv EREFUSED' when connecting to MongoDB Atlas?