---
# System prepended metadata

title: Sales Dashboard - MERN
tags: [MERN, FullStack]

---

# Sales Dashboard - MERN

*MERN*

## Objective
Create a full-stack application using the MERN stack to simulate, process, and display sales and products data.
The application will simulate the arrival of CSV files at specified intervals, store the data in MongoDB, and present it on a user-friendly dashboard.

## General Requirements

#### Setup
Assume we have the following 2 folders where files that come in are stored, in regular intervals as mentioned below.
* **`data/sales`** - **Default Arrival Interval: every 60 seconds**
* **`data/products`** - **Default Arrival Interval: every 90 seconds**

#### Notes on Data Generation
- You must generate the fake sales and product data yourself using a fake data generation library. The data should be saved in CSV format.
- Name the sales data files sequentially.
    - e.g., **`sales_1.csv`, `sales_2.csv`, `sales_3.csv`** and so on.
- Name the products data files sequentially.
    - e.g., **`products_1.csv`, `products_2.csv`, `products_3.csv`** and so on.
- The arrival time for both of the files should be adjustable through an **`env`** variable, something like **`SALES_ARRIVAL_TIME`** and **`PRODUCTS_ARRIVAL_TIME`**
**NOTE: If these `env` variables are not set, the application should take the default values (mentioned above) for the arrival times for the sales data and products data.**
---
- Generate data for **100 products separated into 10 different files** with **10 products** each.
- The products data file should contain the following information with the headers mentioned below.

| product_id | product_name | brand_name | cost_price | selling_price | category | expiry_date |
| ---------- | ------------ | ---------- | ---------- | ------------- | -------- | ----------- |
| `uuid`     | `string`     | `string`   | `float`    | `float`       | `string` | `date`      |


- Generate sales data for the **100 products** with maximum of **100 rows** for each sales file and generate at least **20 sales files**.
- The sales file should have the following information with the headers as mentioned below.

| transaction_id | product_id | quantity | total_transacion_amount | transaction_date |
| -------------- | ---------- | -------- | ----------------------- | ---------------- |
| `uuid`         | `uuid`     | `float`  | `float`                 | `date`           |

#### Assumptions
- Each product data file contains **10 products**.
- Each sales data file contains up to **100 rows**, with a maximum of 20 sales files.

---

#### Node + Mongo Requirements
Once the files are generated into the corresponding folders, your application should

* Simulate the arrival of files by reading them from the respective folders in the set time intervals in the order of the files by name, i.e., `sales_1.csv` is read first, `sales_2.csv` read second and so on, for both sales and product files.
* Process the information and store them in MongoDB.

---

#### React Requirements
* List the data from the data store in a decent webpage with the intention of providing a good sales report.
* Prompt the user to refresh the page once new files have been processed.
* Implement sorting by column headers.
* Implement useful filters based on your judgment.
* Create the following pages/screens and other necessary and relevant endpoints:

###### **Sales by Products**

| S. No. | Product Name | Brand Name | Category | Total Quantity Sold | Total Revenue | Total Profit |
| ------ | ------------ | ---------- | -------- | ------------------- | ------------- | ------------ |

###### **Sales by Brand**

| S. No. | Brand Name | Most Sold Product | Total Quantity Sold | Total Revenue | Total Profit |
| ------ | ---------- | ----------------- | ------------------- | ------------- | ------------ |

###### **A simple dashboard showing (but not limited to)** *You can be creative here*
- Most profitable product
- Least profitable product
- Date of highest sales
- Date of least sales

**Note:
You can add other relevant information to the dashboard as you see fit. Implement filters as needed.**

---
### Your submission must include
- The link to the source repository(ies).
- A working version of your containerized application.
- A `README.md` with detailed instructions on how to run the application.

### Good to haves
- Unit tests
- API documentation

###### tags: `FullStack` `MERN`
