https://github.com/codekcv/headless-commerce
An open-source pluggable full-stack headless commerce solution made with TypeScript, React, Node.js, and GraphQL.
https://github.com/codekcv/headless-commerce
admin antd cms graphql nextjs panel react reactjs redux
Last synced: over 1 year ago
JSON representation
An open-source pluggable full-stack headless commerce solution made with TypeScript, React, Node.js, and GraphQL.
- Host: GitHub
- URL: https://github.com/codekcv/headless-commerce
- Owner: codekcv
- Created: 2021-06-20T07:14:57.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-07-27T14:05:07.000Z (almost 5 years ago)
- Last Synced: 2024-10-30T21:37:59.442Z (over 1 year ago)
- Topics: admin, antd, cms, graphql, nextjs, panel, react, reactjs, redux
- Language: TypeScript
- Homepage:
- Size: 4.18 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# headless-commerce
[](https://github.com/codekcv/headless-commerce/actions/workflows/server.yml) [](https://github.com/codekcv/headless-commerce/actions/workflows/client.yml)
_(No official name yet. This is still work in progress.)_
A pluggable headless E-commerce focused CMS solution for storefront websites that you can install as a package to give you a backend client that can live inside a protected route in your front-end for the merchant to access and manage their commerce content and view analysis.
I do not plan on hosting a server option like other CMS. I only have this demo server above for demo purposes.
You will host the server similar to Strapi though most likely you already have a running instance of it if you're building a commerce application. I will provide a configuration option if you want to use a running server or serverless functions architecture.
## DEMO (DEAD AT THE MOMENT. HEROKU DYNO LIMIT.)
**Back-End Client**: https://kcv-admin-panel.netlify.app
`Username: demo` `Password: demo`
**Back-End Server**: https://kcv-server-test.herokuapp.com/graphql
`Add access token to header after login` `{ "Authorization": "Bearer {token}" }`
**Sample Storefront**: {...}
`To do`
## How To Install
> Note: _Not yet published_
`npm install {@pkg-name}`
or
`yarn add {@pkg-name}`
### Usage Guide
{To do}
## How To Run Locally:
1. `npm install`
2. `npm run prisma:init`
3. `npm start`
**Prerequisites:**
1. _Provide environment variables._
2. _Running database server that [Prisma](https://www.prisma.io/docs/reference/database-reference/supported-databases) supports._
**Environment Variables:**
Server - _DATABASE_URL_ | _ACCESS_TOKEN_SECRET_ | _REFRESH_TOKEN_SECRET_
> **Default ports** @ **client**: 3000 | **server**: 4000 | **database**: 5432(docker) | **adminer**: 8080(docker)
> **Note**: You may use [docker](https://www.docker.com/)-compose for containerized development database.
> **Note**: Tokens are for authentication and keeping session. Authorization depends on if Admin or Super Admin.
**Security**:
Access token storage is in-memory and short lived. Refresh token in cookies + httpOnly, attached to the account in DB. This is the current strategy. Storing in local/session storage is vulnerable to attacks (e.g. XSS). Protection access to server is middleware level so it does not need to hit GraphQL server or database if unauthorized.
## Technology Stack
**Front-End Technologies**:
[TypeScript](https://www.typescriptlang.org/), [React](https://nextjs.org/), [Redux](https://redux-toolkit.js.org/), [Recharts](https://recharts.org/), [Ant Design](https://ant.design/), [React Hook Form](https://react-hook-form.com/), [Apollo Client](https://www.apollographql.com/docs/react/), [react-i18next](https://react.i18next.com/), [Jest](https://jestjs.io/), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
**Back-End Technologies**:
[TypeScript](https://www.typescriptlang.org/), [Koa](https://koajs.com/), [Apollo Server](https://www.apollographql.com/docs/apollo-server/), [GraphQL](https://graphql.org/), [Nexus](https://nexusjs.org/), [Prisma](https://www.prisma.io/), [PostgreSQL](https://www.postgresql.org/), [Redis](https://github.com/luin/ioredis), [JWT](https://jwt.io/), [GraphQL Shield](https://graphql-shield.vercel.app/)
## Project Tracker
* **Front-End Tasks** - https://github.com/codekcv/admin-panel/projects/1
* **Back-End Tasks** - https://github.com/codekcv/admin-panel/projects/2
* **DevOps Tasks** - https://github.com/codekcv/admin-panel/projects/3
Demo back-end client deployed on Netlify.
Demo back-end server deployed on Heroku.
## QA
**Q. Why not use CSS-in-JS or utility classes?**
**A**. I'm using Ant Design and some CSS Modules are enough to override style properties if needed. I will transition to using my own UI components using emotion and theme UI, but not soon.
**Q. Why Redux and Apollo Client together?**
**A**. Apollo Client will handle network data states, but states for UI, session, settings, etc. goes to Redux. It's very robust and performant for managing global states.
**Q. Why not use NestJS?**
**A**. NestJS was initially in the stack, but I removed. I want to use GraphQL Nexus as my code-first approach but it doesn't work well with NextJS' pattern.
**Q. Why Prisma over TypeORM?**
**A**. Just my preference. I believe Prisma is the next-gen ORM for Node.js and TypeScript.
**Q. Why Nexus over Type-GraphQL?**
**A**. Types are stronger and works well with Prisma. I also do not like the decorator syntax.