benhiesu / nextjs-ecommerce

Next.js & Keystone.js E-commerce example with TypeScript

Next.js E-commerce

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

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Demo
3. Screenshots
4. Getting Started
   • Prerequisites
   • Installation
5. Usage
6. Tests
7. Roadmap
8. Contact
9. 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

Demo

I've deployed a demo (via GitOps/Gitlab CI) to a $5 Upcloud VPS (How?).

Backend: https://nextjs-ecommerce-keystone.repository.host
GraphQL API: https://nextjs-ecommerce-keystone.repository.host/api/graphql

Frontend: https://nextjs-ecommerce.repository.host

The password reset uses a sandboxed Mailgun account and only works with one email: [email protected]

To read the password reset email, go to https://www.guerrillamail.com/ and set the inbox to "[email protected]".

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

1. Clone the repo

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

2. Install NPM packages

   yarn install

3. Run docker-compose:

   docker-compose up -d

4. Create configuration file for the backend (backend/.env), see backend/sample.env.

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

Acknowledgements

• Wes Bos
• Paulin Trognon