headless-commerce

(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 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-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, React, Redux, Recharts, Ant Design, React Hook Form, Apollo Client, react-i18next, Jest, React Testing Library

Back-End Technologies:
TypeScript, Koa, Apollo Server, GraphQL, Nexus, Prisma, PostgreSQL, Redis, JWT, GraphQL Shield

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.