Adomin - An E-Commerce Admin Dashboard

Table of Contents

1. Links
2. About The Project
   • Project Description
   • User Stories
   • Notable Features
   • Built With
3. API Endpoints
   • Client APIs
   • General APIs
   • Management APIs
   • Sales APIs
4. Entity Relationship Diagram
5. Getting Started
   • Prerequisites
   • Installation

---

Links

• Frontend Repository: https://github.com/hoanglechau/adomin-fe
• Backend Repository: https://github.com/hoanglechau/adomin-be
• Deployed Frontend: https://adomin.vercel.app/
• Deployed Backend: https://adomin-be-production.up.railway.app/

(back to top)

---

About The Project

Project Description

Adomin is a full-stack e-commerce Admin Dashboard app that displays graphs and tables of sales and performance stats.

(back to top)

User Stories

• As a user, I can view a Dashboard with general sales information in table and graph forms.
• As a user, I can view a list of products.
• As a user, I can view a table with a list of customers.
• As a user, I can view a table with a list of transactions.
• As a user, I can view a world map showing where the users are located.
• As a user, I can view a line graph displaying an overview of general sales revenue and profit.
• As a user, I can view a chart of daily sales.
• As a user, I can view a chart of monthly sales.
• As a user, I can view a pie chart breakdown of sales by category.
• As a user, I can view a table with a list of admins.
• As a user, I can view a table with my Affiliate Sales Performance.
• As a user, I can toggle between light and dark modes.

(back to top)

Notable Features

• Users can switch between dark and light modes.
• In the Transactions page, users can choose to hide or show individual columns.
• In the Transactions page, users can change the display density of the table information (Compact, Standard, or Comfortable).
• In the Transactions page, users can download the data in CSV format.
• In the Transactions page, users can print the table.
• In the Overview page, users can change the unit of currency of the vertical axis (Units or Sales).
• In the Daily page, users can change the time period shown on the chart.
• All tables have server-side paginations. Users can change the number of rows per page, and change pages.

(back to top)

Built With

• React
• React Router
• Redux
• Redux Toolkit
• Material UI
• nivo (charts)
• Node.js
• Express
• MongoDB
• ESLint
• Prettier

(back to top)

---

API Endpoints

Client APIs

/**
 * @description Get all products
 * @param {*} req
 * @param {*} res
 * @route GET /client/products
 * @access Public
 */

/**
 * @description Get all customers
 * @param {*} req
 * @param {*} res
 * @route GET /client/customers
 * @access Public
 */

/**
 * @description Get the locations of all customers
 * @param {*} req
 * @param {*} res
 * @route GET /client/geography
 * @access Public
 */

(back to top)

General APIs

/**
 * @description Get a single user by ID
 * @param {id} req
 * @param {*} res
 * @route GET /general/user/:id
 * @access Public
 */

/**
 * @description Get the Dashboard stats
 * @param {*} req
 * @param {*} res
 * @route GET /general/dashboard
 * @access Public
 */

(back to top)

Management APIs

/**
 * @description Get all admins
 * @param {*} req
 * @param {*} res
 * @route GET /management/admins
 * @access Public
 */

/**
 * @description Get the performance stats of users
 * @param {id} req
 * @param {*} res
 * @route GET /management/performance/:id
 * @access Public
 */

(back to top)

Sales APIs

/**
 * @description Get all sales data
 * @param {*} req
 * @param {*} res
 * @route GET /sales/sales
 * @access Public
 */

(back to top)

---

Entity Relationship Diagram

(back to top)

---

Getting Started

Prerequisites

1. Check your version of Node.js and npm

   node -v
   npm -v

2. Install Node.js and npm if needed at https://nodejs.org/en/download

(back to top)

Installation

Backend

1. Clone the repo

   git clone https://github.com/hoanglechau/adomin-be.git
   cd adomin-be

2. Install NPM packages

   npm install

3. Create an .env file with the following contents

   MONGO_URI=your_mongodb_uri
   PORT=your_port // default value: 9000

4. Replace the default values with your own values for PORT (optional), and MONGO_URI in the .env file
5. Start the server

   npm start

Frontend

1. Clone the repo

   git clone https://github.com/hoanglechau/adomin-fe.git
   cd adomin-fe

2. Install NPM packages

   npm install

3. Create an .env file with the following contents

   REACT_APP_BASE_URL=your_api_url // default: http://localhost:5001

4. Replace the value of REACT_APP_BASE_URL with the URL of your deployed API
5. Build the app

   npm run build

6. Run the app

   npm run start

(back to top)