GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → KATT → Shop

KATT / Shop

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

Programming Languages

typescript
32286 projects

Labels

reactgraphqlnextjsjestcirclecinowprisma

Projects that are alternatives of or similar to Shop

Pizzaql
🍕 Modern OSS Order Management System for Pizza Restaurants
Stars: ✭ 631 (+75.77%)
Mutual labels:  graphql, prisma, nextjs
Este
This repo is suspended.
Stars: ✭ 5,467 (+1422.84%)
Mutual labels:  graphql, prisma, nextjs
Next Advanced Apollo Starter
Advanced, but minimalistic Next.js pre-configured starter with focus on DX
Stars: ✭ 131 (-63.51%)
Mutual labels:  graphql, nextjs, jest
nextal
Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Stars: ✭ 88 (-75.49%)
Mutual labels:  jest, nextjs
nextjs-baseweb
Slightly opinionated scaffold of Next.js and Base Web.
Stars: ✭ 46 (-87.19%)
Mutual labels:  jest, nextjs
monorepo-typescript-next-the-sane-way
A monorepo example using TypeScript and Next.js
Stars: ✭ 104 (-71.03%)
Mutual labels:  jest, nextjs
Prisma Ecommerce
💰A graphql e-commerce real-world fullstack example (backoffice included)
Stars: ✭ 231 (-35.65%)
Mutual labels:  graphql, prisma
platforms
A template for site builders and low-code tools.
Stars: ✭ 1,156 (+222.01%)
Mutual labels:  nextjs, prisma
personal-blog
✍️ 个人技术博客
Stars: ✭ 79 (-77.99%)
Mutual labels:  jest, nextjs
Babel Plugin Import Graphql
Enables import syntax for .graphql and .gql files
Stars: ✭ 284 (-20.89%)
Mutual labels:  graphql, nextjs
Covid19 Brazil Api
API com dados atualizados sobre o status do COVID-19 🦠
Stars: ✭ 300 (-16.43%)
Mutual labels:  now, nextjs
Hangar
Hackathon sponsorship made easy
Stars: ✭ 34 (-90.53%)
Mutual labels:  jest, nextjs
now-course
Proyecto para el curso de Now.sh en Platzi
Stars: ✭ 19 (-94.71%)
Mutual labels:  nextjs, now
Batteries-Included-Next.js
A starting boilerplate for a TS Next.js project with batteries included. Tailwind CSS for styling, Jest and React Testing Library working with path aliases and node-mock-http for API route testing.
Stars: ✭ 35 (-90.25%)
Mutual labels:  jest, nextjs
portfolio
My personal portfolio website, proudly built with Next.js, TypeScript and Tailwind
Stars: ✭ 165 (-54.04%)
Mutual labels:  jest, nextjs
boilerplate
Fullstack boilerplate using Typescript, React, Node & GraphQL
Stars: ✭ 738 (+105.57%)
Mutual labels:  nextjs, prisma
Circleci Cli
Use CircleCI from the command line
Stars: ✭ 297 (-17.27%)
Mutual labels:  graphql, circleci
Awesome Prisma
A collection of awesome things regarding Prisma ecosystem.
Stars: ✭ 310 (-13.65%)
Mutual labels:  graphql, prisma
Relate
[ARCHIVED] experimenting React + GraphQL + Next.js web app on the theme of mindfulness
Stars: ✭ 324 (-9.75%)
Mutual labels:  graphql, nextjs
Modern Graphql Tutorial
📖 A simple and easy GraphQL tutorial to get started with GraphQL.
Stars: ✭ 219 (-39%)
Mutual labels:  graphql, prisma
View All Similar Projects ➔

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!

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

 KATTCORP LTD.

by kattcorp.com

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].