nextjs-ecommerce

Next.js E-commerce

Example web shop built with Next.js and Keystone.js

Explore the docs »

Report Bug
·
Request Feature

About The Project
- Built With
Screenshots
Getting Started
- Prerequisites
- Installation
Usage
Tests
Roadmap
Contact
Acknowledgements

About The Project

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

Built With

Next.js (React.js framework)
Typescript with strict:true
React Hook Form
Keystone.js
Mongo DB
Chakra UI
Stripe
Mailgun

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

Screenshots

You can find more screenshots in the screenshots/ folder.

Getting Started

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

Prerequisites

yarn v1
```
npm install yarn -g
```
Docker and Docker Compose

Installation

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.

Usage

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/.

Tests

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

Roadmap

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

Contact

Sophia Brandt – @hisophiabrandt
Project Link: https://github.com/sophiabrandt/nextjs-ecommerce