Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kiranwankhade/roxiler-systems
Its the Transaction Details App Having Barchart And PieChart
https://github.com/kiranwankhade/roxiler-systems
chakra-ui css expressjs mongodb mongoose nodejs react reactjs
Last synced: about 16 hours ago
JSON representation
Its the Transaction Details App Having Barchart And PieChart
- Host: GitHub
- URL: https://github.com/kiranwankhade/roxiler-systems
- Owner: kiranwankhade
- Created: 2024-02-22T10:22:39.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-03-01T14:57:23.000Z (8 months ago)
- Last Synced: 2024-04-24T04:17:51.945Z (7 months ago)
- Topics: chakra-ui, css, expressjs, mongodb, mongoose, nodejs, react, reactjs
- Language: JavaScript
- Homepage: https://frontend-azure-nine-78.vercel.app/
- Size: 8.15 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN Stack Coding Challenge
This project implements a MERN (MongoDB, Express.js, React.js, Node.js) stack application for managing product transactions.
## Backend
### Data Source
The backend fetches data from a third-party API endpoint and initializes the database with seed data.
- **Third Party API Endpoint**: `https://s3.amazonaws.com/roxiler.com/product_transaction.json`
- **New Created API**: `https://easy-cyan-coati-tux.cyclic.app/`
- **Request Method**: GET
- **Response Format**: JSON
#### APIs
1. **Initialize Database API**
- Endpoint: `/api/products`
- Method: GET
- Description: Initializes the database with data fetched from the third-party API.
2. **List Transactions API**
- Endpoint: `/api/search`
- subEndPoints: `/api/search?search=""&page=${page}&perPage=10`
- Method: GET
- Description: Lists all transactions with support for search and pagination.
3. **List Transactions API For Search by Month **
- Endpoint: `/api/search/search-month`
- Method: GET
- Description: Lists all transactions with support for search and pagination.
4. **Statistics API**
- Endpoint: `/api/statistics?month=""`
- Method: GET
- Description: Provides statistics for the total sale amount, total sold items, and total not sold items for the specified month.
5. **Bar Chart API**
- Endpoint: `/api/barChart?month=""`
- Method: GET
- Description: Generates data for a bar chart displaying price ranges and the number of items in each range for the specified month.
6. **Pie Chart API**
- Endpoint: `/api/pieChart?month=""`
- Method: GET
- Description: Generates data for a pie chart showing unique categories and the number of items from each category for the specified month.
7. **Combined Data API**
- Endpoint: `/api/combinedData?month=""`
- Method: GET
- Description: Fetches data from all the above APIs for the specified month, combines the response, and sends a final response.
## Frontend
### Transactions Page
#### Transactions Table
- Displays a table listing transactions for the selected month.
- Supports search and pagination.
- Default pagination values: page = 1, per page = 10.
#### Transactions Statistics
- Displays total amount of sale, total sold items, and total not sold items for the selected month.
#### Transactions Bar Chart
- Displays a bar chart showing price ranges and the number of items in each range for the selected month.
## Usage
1. Clone the repository.
2. Install dependencies for both frontend and backend.
3. Start the backend server.
4. Start the frontend development server.
5. Access the application in your browser.
## Technologies Used
- MongoDB
- Express.js
- React.js
- Node.js
- Chart.js
- Axios
- Chakra UI
##Screen Short Of App
- DashBoard
- Statisticts
- Bar Chart
- Pie Chart
