A comprehensive real-time stock portfolio tracking application built with React/Next.js frontend and Flask backend, integrated with Yahoo Finance API for live market data.
- Live Stock Prices: Fetch real-time stock data using Yahoo Finance API
- Auto-refresh: Manual refresh control with loading indicators and notifications
- Rate Limit Handling: Smart API management to avoid throttling
- Excel Integration: Import portfolio data from Excel files with precise column mapping
- Dynamic Calculations: Real-time P&L calculations, profit percentages, and portfolio totals
- Smart Fallbacks: Graceful handling when live data is unavailable
- Modern Design: Clean, responsive interface built with Chakra UI
- Sortable Tables: Click-to-sort functionality on all columns with visual indicators
- Color-coded Performance: Green/red indicators for gains and losses
- Mobile Responsive: Optimized for all screen sizes
- Filtering: Automatically filter out empty or zero-quantity positions
- Toast Notifications: Real-time feedback for all user actions
- Loading States: Professional loading spinners and progress indicators
- Error Handling: Comprehensive error management with user-friendly messages
| Frontend | Backend |
|
|
Ensure you have the following installed:
- Node.js (v16+ recommended) and npm
- Python 3.8+ and pip
- Your portfolio data in Excel format
-
Clone the repository
git clone https://github.com/D4T4R/portfolio-tracker.git cd portfolio-tracker -
Setup Backend
cd backend pip install -r requirements.txt python app.pyBackend will run on
http://localhost:5000 -
Setup Frontend (in a new terminal)
cd frontend npm install npm run devFrontend will run on
http://localhost:3000 -
Configure Excel File
- Place your Excel portfolio file in the project root
- Use the application to set the Excel file path via the API
- View your portfolio overview with live stock prices
- Individual stock cards showing current price, change, and percentage
- Quick navigation between portfolio views
- Detailed tabular view of your entire portfolio
- Sort by any column (Symbol, Price, Quantity, P&L, etc.)
- Filter automatically removes empty positions
- Total row showing portfolio summary
- Manual refresh with loading states
- Set Excel file path through the backend API
- Customize refresh intervals and display preferences
portfolio-tracker/
├── frontend/ # Next.js React application
│ ├── components/ # Reusable UI components
│ │ ├── Navigation.js # Navigation bar
│ │ ├── Portfolio.js # Portfolio table component
│ │ └── StockCard.js # Individual stock display
│ ├── pages/ # Next.js pages
│ │ ├── _app.js # App wrapper with Chakra UI
│ │ ├── index.js # Main dashboard
│ │ └── portfolio.js # Portfolio table page
│ ├── styles/ # CSS modules
│ └── package.json # Frontend dependencies
├── backend/ # Flask API server
│ ├── app.py # Main Flask application
│ └── requirements.txt # Python dependencies
├── .gitignore # Git ignore rules
└── README.md # This file
GET /api/stocks- Fetch live stock data for portfolioPOST /api/set-excel-path- Set Excel file pathGET /api/portfolio- Get portfolio data from ExcelGET /api/portfolio-summary- Get portfolio summary statistics
The application reads your Excel portfolio file and maps columns correctly:
- Symbol (Column A) - Stock ticker symbols
- Average Price (Column B) - Your average buy price
- Initial Quantity (Column C) - Starting position
- Current Quantity (Column D) - Current holdings
- Dividends (Column E) - Dividend income
- Realized Profit (Column F) - Profit from sold positions
- Current Value: Live price × quantity
- Invested Value: Average price × quantity
- Unrealized P&L: Current value - invested value
- Total Profit: Unrealized + realized + dividends
- Profit Percentage: Total profit / invested value × 100
- Graceful fallback to Excel values when API fails
- Rate limit detection and user notification
- Empty position filtering
- Comprehensive error logging
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow existing code style and conventions
- Add comments for complex logic
- Test your changes thoroughly
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Yahoo Finance for providing free stock data API
- Chakra UI for the excellent component library
- Next.js team for the amazing React framework
- Flask community for the lightweight web framework
- Issues: GitHub Issues
- Discussions: GitHub Discussions
