Shopping-Cart

Full-stack take home assessment @ Zone24x7

Prerequisites

• React
• NestJS
• MySQL
• Yarn

Development Setup

Clone the Project

git clone https://github.com/dinuka-rp/Shopping-Cart.git

---

Backend

Add the database configuration

Create a file called .env in the root folder of the backend and add the following environment variables.

- DB_NAME
- DB_PORT
- DB_USER
- DB_PASSWORD

Optional variables: These have been given the following defaults

- DB_TYPE=mysql
- DB_HOST=localhost

Make sure that the database has been created before running the backend.

Frontend

Add the backend end-point

Create another .env file in the root folder of the frontend and add the following environment variable. This should be the hosted endpoint of the backend.

- REACT_APP_API_ENDPOINT

The listening port of the backend has been set to 3001 in the main.ts file in the backend folder. Therefore if run locally, REACT_APP_API_ENDPOINT=http://localhost:3001/api/v1/ is expected as the endpoint

---

Install Packages in Backend & Frotnend

Run yarn install in the root folder of each project.

---

Run the Backend/ Frotnend

Run yarn start in the root folder of each project.

---

Project Specification

UI Wireframes

Requirements Completition status

• Users should be able to register into the application (by providing email, password and mobile number).
• User login (username and password).
• Available products need to be shown on the homepage as a grid view.
• Users should be able to search for available products.
• Logged in users should be able to rate the product. The average rate should be shown in the product.
• Users should be able to add products to a shopping cart.
• Number of product items need to be indicated in the mini cart in the top-bar.
• The shopping cart needs to be available for logged in users when the user revisits (The shopping cart needs to be visible even after reopening a closed browser)
• Users should be able to continue shopping or checkout in the shopping cart view.
• When the checkout button is clicked, the shopping cart state needs to be changed according to the general flow.
• order details need to be matched with cart details when the checkout happens.

• Pagination for product grid
• Responsiveness of the frontend app

Technology Requirements

Frontend

• React using create-react-app
• TypeScript
• Ant Design - UI Framework
• Redux

Backend

• NestJS
• TypeScript
• TypeORM
• PostgreSQL
• JWT
• Refresh token