Motivation

There are two reasons why this repo exists.

1. My main mission behind this repo is to show you my ability to work with this stack of technologies and how I organize the project and code as well.

2. Just challenging myself with the latest version (during development) of NextJs (v14+) and React-toolkit

I haven't used any AI tools like ChatGPT, CoPIlot, or any other "crutches" for the mind.

Basic preview of the functionality

Requirements

• Node ^18.17.0
• NPM ^9.6.7

Installation

After confirming that your environment meets the above requirements, it is time to clone the projects locally by doing the following:

Cloning the FE App:

$ git clone [email protected]:DeanHristov/fake-e-commerce-web-app.git <project-name>
$ cd <project-name>

When you're done with the steps above, run the following command:

$ npm install # or yarn install

---

Cloning the Fake API

$ git clone https://github.com/DeanHristov/fake-api-e-commerce.git <project-name>
$ cd <project-name>

When you're done with the steps above, run the following command:

$ npm install # or yarn install

Configuration

Create a .env file in a root folder and copy-paste variables below

# Not used at this stage!
API_MOCKING=false

# This variable must match the running URL on the Fake API!
# See: https://github.com/DeanHristov/fake-api-e-commerce?tab=readme-ov-file#running-the-project
API_URL=http://localhost:3002/api/v1

BASE_URL=http://localhost:3000/api

JWT_SECRET=super-secret-word
JWT_EXPIRE=10m

Running the Project

Before starting the app you must first start the Fake API by following the steps here!

Running the app in development mode

$ npm run dev

Running the app in production mode. Firstly, build the app with the following command:

$ npm run build

then start the app

$ npm start

Included functionality

• Currently, the app supports the following pages:

  • A home page
  • A shopping cart page
  • A wish list page
  • A login page
  • A checkout page
  • An admin page (portal) - Coming soon

• The visitor (not signed user) can do following:

  • See a list of products
  • Adding a product to the basket
  • Removing a product from the basket
  • Adding a product to the wish list
  • Removing a product from the wish list
  • See details (through the modal box) of any product
  • Do a checkout process (fake!)
  • Keeping basket & wish list in persistent store (localStorage)
  • Pagination - Coming soon

• Authentication

  • Using server-side cookies & JWT for auth.
  • Cookie & JWT have a short time life period (10 minutes)
  • User can login with email and password
  • User can logout
  • Only the admin user has access to the /admin route
  • Only the signed-in user has access to the /profile route
  • Protecting the /login route from already signed in users.

• When the user is signed In:

  • See a list of products
  • Adding a product to the basket
  • Removing a product from the basket
  • Adding a product to the wish list
  • Removing a product from the wish list
  • See details (through the modal box) of any product
  • Do a checkout process (fake!)
  • Do voting - Coming soon
  • Be able to fetch, see and manage its basket - Coming soon
  • Be able to fetch, see and manage its wish list - Coming soon
  • Be able to manage its personal information like password, name, email etc... - Coming soon
  • See a history with its orders - Coming soon

• When the admin is signed In:

  • Has access to the admin panel
  • Can perform all CRUD operations over the users - Coming soon
  • Can perform all CRUD operations over the orders - Coming soon
  • Can perform all CRUD operations over the products - Coming soon
  • Managing a delivery process
  • Managing payment process

Currently, there are three kinds of users. Each of them has different abilities

#	email	pass	Role	effects
1	[email protected]	12345	admin	Super user
2	[email protected]	13579	visitor	Mutate its own data
3	[email protected]	024680	visitor	Mutate its own data

Main tasks

All tasks automation are based on NPM scripts.

Tasks	Description
npm run dev	Running the app in dev mode
npm run build	Building the app in production-ready mode
npm run start	Running the app in prod mode
npm run lint	Linting the code
npm run test	Running the unit tests ( using jest/RTL)
npm run test:watch	Running the unit tests in "watch" mode
npm run test:coverage	Running the coverage of the unit tests

Used technologies

• NodeJS- https://nodejs.org/en/
• Git - https://git-scm.com/
• TypeScript - https://www.typescriptlang.org/
• NextJS (v14.0.4) - https://nextjs.org/

Made by

Author: D. Hristov | Documentation