Shareed - KeystoneJS Backend for Shareed E-Commerce

About

Shareed is an e-commerce platform that allows users to buy and sell second-hand items. For the frontend is used Next.js and for the backend Keystone.js. The project is deployed free on Vercel and Heroku.

Built With

• Next.js - React Framework used in KeystoneJS to build the frontend
• Keystone.js - KeystoneJS is a flexible and powerful headless CMS and web application framework built on Node.js and GraphQL.
• Typescript - For type safety
• PostgreSQL (on ElephantSQL)
• Prisma (PostgreSQL)
• Mailjet (for sending emails)
• Cloudinary (for image uploads)
• Stripe (for payments)
• Render (for hosting the backend)

Live Demo

The backend is deployed right now on the Heroku free tier. Live demo: https://shareed-backedn.onrender.com/.

Demo credentials:

email: testmail@gmail.com
password: password1

The Heroku backend is connected to a PostgreSQL database on ElephantSQL.

Screenshots

Admin Homepage

CORS issue

The biggest problem I've encountered was the CORS issue. The frontend sends requests to the backend and KeystoneJS backend send session cookies. The problem is that the frontend is deployed on Vercel and the backend runs on Heroku. The Heroku app is on a different domain than the Vercel app.

The solution with proxy CORS Anywhere is not working for me because the proxy is not sending the session cookies. The solution was to use cors package on the backend and to set the credentials option to true, and origin to true. But also session cookies must be set to sameSite: 'none' and secure: true. This way the cookies are sent to the frontend and the session is maintained.

Secure: must be set to true when the sameSite is set to none. This way the browser will not send the cookies to the frontend if the frontend is not on HTTPS. You can read more about this here.

const sessionConfig = {
  maxAge: 60 * 60 * 24 * 360, // How long should they stay signed in?
  secret: process.env.COOKIE_SECRET,
  sameSite: "none",
  secure: true,
};

Getting Started

To get a local copy up and running follow these simple example steps.

1. Clone the repo

git clone https://github.com/thedevmian/shareed_backend.git

2. Install NPM packages

yarn install

3. Create a .env file in the root directory and add the following environment variables:

CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_API_FOLDER=
DATABASE_URL=
FRONTEND_URL=
MAILJET_API_KEY=
MAILJET_API_SECRET=
STRIPE_SECRET_KEY=
COOKIE_SECRET=

4. Run the app

yarn dev