PortfolioPro — Building a Smart Financial Dashboard
PortfolioPro is a personal project that began during my final year of high school and evolved into a full-stack application designed to serve as a modern investment portfolio dashboard. It brings together live financial data, analytics, and a responsive user interface with the goal of making portfolio tracking more insightful, streamlined, and visually accessible.
The motivation behind PortfolioPro was to merge three of my interests: software engineering, user experience, and financial markets. I wanted to create a tool that not only served as a functional utility but could also be used as a portfolio piece to demonstrate my backend and frontend development skills, API integration, and data visualization capabilities.
Key Features
Portfolio Allocation Overview
The app provides a detailed visualization of investment distributions using dynamic pie charts and percentage breakdowns. Users can quickly assess how their funds are distributed across stocks, ETFs, cash, or other assets.
Real-Time Market Data
Using Alpha Vantage and News API integrations, the dashboard pulls live forex data and financial headlines. To handle API rate limits and ensure performance, I implemented caching mechanisms that store results server-side for reuse across sessions.
Historical Stock Analysis
Users can search stock tickers and view historical performance data filtered by custom time intervals. Line charts render live data pulled from APIs, giving users an interactive insight into trends and movements.
Global Market Time Zones
Understanding the open and close times of global markets is key for many investors. PortfolioPro includes a custom-built world clock showing major exchanges in local time, auto-adjusting for daylight savings.
Financial News Aggregation
The application includes a news panel that fetches and displays the latest business and finance stories in real-time, allowing users to stay informed on market-moving headlines without leaving the dashboard.
Technology Stack
Frontend:
- React with TypeScript
- TailwindCSS for styling
- Recharts for data visualisation
- Axios for API calls
- Context API for state management
Backend:
- Node.js with Express
- MongoDB via Mongoose for persistent storage
- Cron jobs for scheduled background API syncs
- Custom middleware for authentication and caching
DevOps & Tooling:
- GitHub for version control
- Vercel for frontend deployment
- Cloudflare for DNS and email routing
- .env for environment variable security
Technical Challenges and Solutions
- API Rate Limiting: Alpha Vantage has strict limits. I implemented a backend cache layer using in-memory storage and fallback strategies that ensure users always receive recent data without triggering rate bans.
- Mobile Responsiveness: A large portion of the user base interacts on mobile. TailwindCSS combined with custom media queries ensures the dashboard scales cleanly across devices.
- Secure API Keys: All keys are stored securely in environment variables and never exposed client-side.
Development Process
I followed a modular development structure, dividing tasks across frontend views, backend services, and utility modules. This allowed for a clean architecture and easier debugging.
- Version Control: Regular commits to a private GitHub repository ensured progress tracking and rollback safety.
- Agile Iteration: Weekly feature updates, interface tweaks, and feedback loops from peers helped refine usability.
- Documentation: All components and backend endpoints are documented, and a README is included for deployment.
Future Improvements
While PortfolioPro is functional and stable, there's room for growth:
- Add user authentication and multi-user portfolio support
- Switch from MongoDB to PostgreSQL for relational data handling
- Add financial indicators (e.g., RSI, MACD) to stock analysis
- Implement dark mode and accessibility improvements
Final Thoughts
PortfolioPro represents more than just a technical exercise. It’s a reflection of my passion for building tools that are both functional and beautiful. It was designed not only to impress potential employers but also to challenge myself in integrating multiple services, managing async operations, and refining front-end interaction design.
If you're interested in viewing the codebase or discussing improvements, feel free to reach out to me via james@coatesy.au.