🛍🛒 Full-stack React/Prisma/TS/GraphQL E-Commerce Example
Clone or download

README.md

React/Prisma/TS/GraphQL E-Commerce Example

Build Status Maintainability

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

Tech

/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:

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!