What it does
The dashboard visualizes ingredient usage, sales, and shipment data over time. It includes scatter plots for item counts vs. prices, top ingredient consumption charts, and critical alerts for low stock or delayed shipments. Managers can select any month to view detailed insights.
How we built it
We used React for the frontend and Node.js/Express for the backend, connected to a PostgreSQL database. Recharts handles all visualizations. The system fetches live data from the database, allowing dynamic updates when the month selection changes.
Challenges we ran into
Joining sales and price data from separate tables in SQL. Making scatter plots readable with a large number of items. Handling cross-origin requests and ensuring smooth API calls. Styling dropdowns and charts to make them user-friendly.
Accomplishments that we're proud of
Successfully built a dynamic, interactive dashboard with live data fetching. Implemented scatter plots and bar charts that provide clear insights for decision-making. Built a system that can scale across multiple months and datasets without hardcoding.
What we learned
How to integrate React with Express and PostgreSQL. Best practices for handling API data and mapping it to chart-friendly formats. Techniques for managing chart readability with large datasets. How to handle frontend styling and interactivity for professional dashboards.
What's next for Mai Shan Yun Inventory Intelligence
Add predictive analytics using historical data to forecast ingredient needs. Implement user authentication and role-based access. Include additional visualizations for sales trends and cost optimization. Improve UX with features like tooltips, zoomable charts, and exportable reports
Log in or sign up for Devpost to join the conversation.