I developed a comprehensive single-page MERN application showcasing a product transactions table alongside monthly transaction statistics. It includes dynamic visual elements such as a bar chart illustrating price ranges and item counts for the chosen month, and a pie chart presenting unique categories with corresponding item counts.
-
Frontend:
- Search Functionality: Search transactions by title, description, or price.
- Transaction Table: Displays all product transaction data with comprehensive details.
- Monthly Statistics: Select a month to view statistics, bar charts, and pie charts specific to that month.
- Statistics: Shows total sales amount, total sold items, and total unsold items for the selected month.
- Bar Chart: Displays the price range and the number of items within that range for the selected month, irrespective of the year.
- Pie Chart: Displays categories and the number of items within each category for the selected month, irrespective of the year.
- Responsive Design: Ensures optimal viewing experience across all devices.
-
Backend:
- Data Import API: Imports data from
https://s3.amazonaws.com/roxiler.com/product_transaction.json
into the database. - Transaction Listing API: Lists all transactions with support for search and pagination.
- Search and Pagination: Allows searching by product title, description, or price, and paginates results. If no search parameters are provided, returns all records for the specified page.
- Default Pagination: Defaults to page = 1, per page = 10.
- Statistics API: Provides the total sales amount, number of sold items, and number of unsold items for the selected month.
- Bar Chart Data API: Returns the price range and number of items within that range for the selected month, irrespective of the year.
- Pie Chart Data API: Returns unique categories and the number of items within each category for the selected month, irrespective of the year.
- Combined Data API: Fetches data from the Statistics, Bar Chart Data, and Pie Chart Data APIs, combines the results, and returns a single JSON response.
- Data Import API: Imports data from
List and provide a brief overview of the technologies used in the project.
- MongoDB
- Mongoose
- Express.js
- React.js
- Context API
- JavaScript
- Axios
- CORS
- Dotenv
- Nodemon
- Mongoose Paginate v2
- HTML
- CSS
- Chakra UI
- React Icons
Product Transactions Table
Statistics of Month
Bar Chart of Month
Pie Chart of Month