This project was bootstrapped with Create React App.

react-online-store-with-graphql

https://strapi.io/ — The open source Headless CMS Front-End Developers love.

https://stripe.com/ — The new standard in online payments

Strapi

Install

npm install strapi@alpha -g or npm install -g strapi@beta or try npm install -g strapi@beta --unsafe-perm strapi/strapi#3386, также возникли проблемы с установкой на node v12, в данный момент strapi работает только на node v10 strapi/strapi#3342, пришлось ставить node v10 и юзать strapi@alpha
Then create project strapi new server and select custom -> It's a database connection setup:

mLab strapi/strapi#2013 https://medium.com/strapi/using-mlab-with-strapi-e3f968a9c530

// (for example: mongo connection string "mongodb://<dbuser>:<password>@ds062807.mlab.com:62807/react-online-store-with-graphql")

Choose your installation type Custom (manual settings):
- Choose your main database: MongoDB
- Database name: react-online-store-with-graphql
- Host: ds062807.mlab.com
- +srv connection: false
- Port (It will be ignored if you enable +srv): 62807
- Username: dbuser
- Password: password
- Authentication database (Maybe "admin" or blank): react-online-store-with-graphql
- Enable SSL connection: false

MongoDB Atlas https://strapi.io/documentation/3.0.0-beta.x/guides/databases.html#mongodb-installation

// (for example: mongo connection string "mongodb+srv://<dbuser>:<password>@testcluster-yemab.mongodb.net/test?retryWrites=true&w=majority")

Choose your installation type Custom (manual settings):
- Choose your main database: MongoDB
- Database name: (Default your_name_proj) press enter
- Host: testcluster-yemab.mongodb.net
- +srv connection: true
- Port (It will be ignored if you enable +srv): (Default 27017) press enter
- Username: dbuser
- Password: password
- Authentication database (Maybe "admin" or blank): press enter
- Enable SSL connection: true

cd server and strapi start
Go to Admin panel: http://localhost:1337/admin
Create a root(admin) user
Welcome on board! This will also create several collections in your database.

GraphQL

Install GraphQL plugin on admin dashboard from "Marketplace" or strapi install graphql

Go to playground http://localhost:1337/graphql
Create on dashboard new Content Types: Brand with 3 fields: name, description, image

Add several new Brands

Add on dashboard Roles & Permissions for Brand type in Public and Authenticated: find(brands) and findone(brand(id)) with ratelimit

Make requests

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

query {
  brand(id: "5d014f2d4eb948169c086fda") {
    _id
    name
    description
    image {
      _id
      name
      mime
      url
    }
  }
}

Create on dashboard new Content Types: Brew with 5 fields: name, description, image, price and relation with Brand

Add several new Brews

Add on dashboard Roles & Permissions for Brew type in Public and Authenticated: find(brews) and findone(brew(id)) with ratelimit

Make requests

query {
  brews {
    _id
    createdAt
    updatedAt
    name
    description
    image {
      url
    }
    price
    brand {
      _id
      name
    }
  }
}

query {
  brew(id: "5d02566f82ac160bb8db835a") {
    _id
    createdAt
    name
    description
    image {
      url
    }
    price
  }
}

Create on dashboard new Content Types: Order with 4 fields: address, postalCode, city, brews

Add on dashboard Roles & Permissions for Order type in Authenticated: create

Stripe

https://stripe.com/docs/development

https://stripe.com/docs/recipes/elements-react

Modify create controller in server/api/order/controllers/Order.js

You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.

Send emails

https://app.sendgrid.com/guide/integrate/langs/nodejs

On server-side install provider npm install strapi-provider-email-sendgrid@alpha --save
After installing provider, on dashboard in Email plugin settings, we can select sendgrid option, set Sendgrid API key and your emails

Add on dashboard Roles & Permissions for Email plugin in Authenticated: send

Modify send controller in server/plugins/email/controllers/Email.js

Search with GraphQL

Ищем бренды где в имени есть подстрока "river":

query {
  brands(where: {
    name_contains: "river"
  }) {
    _id
    name
    description
  }
}

Ищем бренды где в описании есть подстрока "s":

query {
  brands(where: {
    description_contains: "s"
  }) {
    _id
    name
    description
  }
}

Поиск сразу по несольким полям (в данный момент strapi всё ещё не поддерживает операторы OR, AND, NOT) поэтому этот запрос не работает, но код должен быть примерно следующим:

query {
  brands(where: {
    OR: [
      { name_contains: "s" },
      { description_contains: "s" }
    ]
  }) {
    _id
    name
    description
  }
}

А также нужно изменить права доступа у Brand в Public и Authenticated: для find и findone с ratelimit на None, т.к. запросов теперь будет гораздо больше

Kirill255 / react-online-store-with-graphql