Dynamic Dashboard
Inspiration
Managing personal finances can be overwhelming, and many budgeting tools either lack simplicity or require too much manual effort. We wanted to create a user-friendly, AI-enhanced financial dashboard that helps users track their spending habits effortlessly. By integrating GitHub Copilot for smarter coding and Azure Static Web Apps for seamless deployment, we built a tool that is efficient, scalable, and easy to maintain.
What It Does
Dynamic Dashboard is a React-based budgeting dashboard that allows users to:
Track spending habits with clear visualisations
Gain financial insights through an interactive UI
Experience real-time updates with a smooth, fast-loading interface
Benefit from seamless deployment using Azure Static Web Apps
How We Built It
Technology Stack
- Frontend: React, built using Visual Studio Code
- AI Assistance: GitHub Copilot for code suggestions, optimisations, and debugging
- Hosting & Deployment: Azure Static Web Apps for a serverless and automated CI/CD pipeline
- Version Control & CI/CD: GitHub, integrated with Azure DevOps for continuous updates
Development Process
- Initial Development: Built the React-based UI for the dashboard.
- AI-Powered Optimisation: Used GitHub Copilot to improve code quality and reduce redundancy.
- Before & After Comparisons: Documented how Copilot’s suggestions enhanced performance.
- Azure Integration: Implemented Azure Static Web Apps for seamless hosting and automatic updates via GitHub Actions.
Challenges We Ran Into
Code Complexity: Structuring a scalable React application while maintaining clean, efficient code.
Deployment Issues: Finding the best hosting service that ensures scalability and security without complex configurations.
Time Constraints: Balancing feature development, testing, and deployment within a limited timeframe.
Accomplishments That We’re Proud Of
Successfully implemented GitHub Copilot to improve productivity and enhance code quality.
Overcame deployment challenges by integrating Azure Static Web Apps for a streamlined, hassle-free experience.
Created an interactive, user-friendly financial dashboard that provides real-time insights.
What We Learned
AI can significantly improve development speed—Copilot made coding more efficient and helped debug issues faster.
Azure provides a powerful, easy-to-use hosting solution—Static Web Apps simplified deployment and automated updates.
A structured workflow is key to project success—From ideation to deployment, following a streamlined process ensured a high-quality result.
What’s Next for Dynamic Dashboard?
Enhancing Features: Adding backend support to allow users to store and manage personal financial data securely.
Expanding Azure Integration: Implementing Azure Functions for automated data processing.
User Customisation: Allowing users to set financial goals and receive AI-powered insights.
Dynamic Dashboard leverages AI-powered development and cloud hosting to bring smarter financial insights to users. The journey doesn’t stop here—bigger features and more powerful integrations are on the way!
