Archived: This is using Prisma 1 which has been discontinued.

React/Prisma/TS/GraphQL E-Commerce Example

Attempt to create a great reference project with an amazing developer experience wherein a lot of common React/Prisma/GraphQL challenges are addressed.

• shop.kattcorp.co.uk
• shop-api.kattcorp.co.uk

Tech

• TypeScript (we have *.js in .gitignore!)
• Monorepo setup with a few different projects
  • /api - GraphQL API Gateway in front of Prisma
  • /web - Next.js React App with Apollo Client
  • /e2e - Nightwatch.js E2E testing
• Travis CI with Sauce Labs for cross-browser testing

/web features

• Server-side rendered React app.
• GraphQL using Apollo with optmistic updates.
• Pessimistic™ updates - app works completely without JS enabled in the browser (and there's E2E tests for it).
• Creates a shopping cart (Order) before page load, reference id saved to cookies
• Add/edit products to/in cart
• Product list from GraphQL
• Open checkout route in modal
• Discount code support (try code "first")

Setup

1. Install node 9
2. Install Homebrew
3. Install Docker - brew cask install docker
4. Install yarn - npm install -g yarn
5. Start Docker
6. yarn install
   • Installs deps for
     • /
     • /api
     • /web
     • /e2e
7. Start Prisma + seed DB yarn setup:prisma

Development

yarn dev

Starts the /api Gateway, the Next.js /web, and a TypeScript watcher for /e2e in parallell.

If you prefer separate output, navigate to /api, etc in separate shells and run yarn dev

If everything goes smoothly you should be able to access the below:

• API Gateway: http://localhost:4000
• Web App: http://localhost:5000

Tests

API Gateway

Uses Jest.

yarn test:api

Web

/web has no tests (yet).

E2E

Install dependencies

brew install selenium-server-standalone
brew install chromedriver
brew install geckodriver
brew cask install java

Run

1. Run selenium: yarn selenium
2. Setup + start apps: yarn setup && yarn build && yarn dev
3. Run tests: yarn start:e2e
   • Will run E2E in Chrome with JS enabled
   • To run without js: yarn start:e2e -- --env chrome:nojs
   • See nightwatch.ts for all envs

Conventions, how to write etc

/web

• /mutations and /queries exposes render prop components for easy handling of data loading / rendering
• .. TBC

What's next / questions

This is a bit of a playground for web tech for me. I'm still developing it & I gather a list of things I'd like to do in issues.

If you have problems running it, ideas of things to add, things you want me to explain / elaborate on, or need help to build a product - open an issue or reach out to me on Twitter.

Feel free to fork it and make a pull request of something cool!

---

             / )
 / )__/ )___/ /
( @ . @ )     )
 (           )
 //"//""//"//

 KATTCORP LTD.

by kattcorp.com