- Project's Title
- Project Description
- How to Install and Run the Project
- How to Use the Project
- Credits
- References
This project is a comprehensive transaction management system designed to help users track and analyze their sales data efficiently. It provides detailed statistics, a searchable transaction table, and interactive charts for better insights.
The Transaction Dashboard is built to offer users a seamless experience in managing and analyzing transaction data. It includes features such as searching transactions, viewing monthly statistics, and visualizing price ranges through charts.
Key features include:
- Transaction Management: View and search transactions with pagination.
- Statistics: Detailed monthly statistics for sales, sold items, and unsold items.
- Visualization: Interactive bar charts to visualize price ranges and transaction distributions.
Technologies used:
- Frontend: React, Tailwind CSS, ApexCharts
- Backend: Node.js, Express, MongoDB
- UI Components: NextUI
Challenges faced:
- Implementing efficient search and pagination.
- Creating responsive and interactive charts.
- Ensuring smooth integration between frontend and backend.
Future improvements:
- Adding user authentication.
- Enhancing the filtering options.
- Implementing real-time data updates.
- Node.js
- MongoDB
-
Clone the repository:
git clone https://github.com/BidyasagarAnupam/roxiler-systems-task cd transaction-dashboard
-
Install the dependencies in both root and backend directories:
npm install
-
Set up the environment variables. Create a
.env
file in the root directory and in backend file and add the following:In root directory
.env
REACT_APP_BASE_URL = http://localhost:4000/api/v1
In backend directory
.env
MONGODB_URL=your_mongodb_connection_string PORT=4000
-
1st hit the
api
(given below) from Postman withpost
method to initialize the DBhttp://localhost:4000/api/v1/db/intializeDB
-
Start the backend server:
npm run dev
-
Start the frontend development server:
npm start
-
Start the backend server and frontend development server concurrently:
npm run dev
-
Search Transactions: Type keywords in the search bar and press Enter to filter transactions based on the search term.
-
Select Month: Use the dropdown menu to select a month and view statistics and transactions for that period.
-
View Statistics: Scroll down to view detailed statistics for the selected month.
-
Visualize Data: Check out the interactive bar charts for a visual representation of the price ranges and transaction data.
- Bidyasagar - GitHub