Skip to content

Latest commit

 

History

History
111 lines (74 loc) · 3.11 KB

README.md

File metadata and controls

111 lines (74 loc) · 3.11 KB
Raw

Shopping-Cart

CodeFactor

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