Discover sophiabrandt/nextjs-ecommerce Open Source project

Example web shop built with Next.js and Keystone.js
Explore the docs »

Report Bug · Request Feature

About The Project

Next.js E-commerce is an example online shop built with React.js and Keystone.js.

Some features:

Role-based Permissions (only a user with permissions can see "Edit" and "Delete" button for a product and can perform these actions, etc.)
Debounced Product Search with DownshiftJS
Incremental Static Site Generation for product pages
Server-Side Rendering for showing orders and updating products
Advanced Usage of Apollo Cache for a snappy user experience by manipulating the Apollo Cache with cache.readQuery, cache.writeQuery, cache.modify and cache.evict
Form Validation with React Hook Form
Automatic Deployment via Docker Swarm and GitLab CI
Testing with React Testing Library and Jest

You can find more screenshots in the screenshots/ folder.

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

Clone the repo

git clone https://github.com/sophiabrandt/nextjs-ecommerce.git

Install NPM packages
```
yarn install
```
Run docker-compose:
```
docker-compose up -d
```
Create configuration file for the backend (backend/.env), see backend/sample.env.
Create configuration file for the frontend (frontend/.env.local), see frontend/sample.env.

cd backend && yarn run dev
cd frontend && yarn run dev

Go to http://localhost:7771 for the Keystone CMS (backend) and http://localhost:7777 for the Next.js application (frontend).

If you want to use Caddy, you can use the included Caddyfile for automatic HTTPS certificates in local development.

sudo caddy run

Node.js will complain about the missing certificate issuer. For local development, ignore the error with NODE_TLS_REJECT_UNAUTHORIZED = '0':

cd frontend
NODE_TLS_REJECT_UNAUTHORIZED = '0' yarn build
NODE_TLS_REJECT_UNAUTHORIZED = '0' yarn start

The frontend app is available at https://frontend.app.localhost. You can reach the backend app at https://backend.app.localhost/.

cd backend && yarn run test
cd frontend && yarn run test

See the open issues for a list of proposed features (and known issues).

Sophia Brandt - @hisophiabrandt