Portfolio Tracker

A React-based portfolio managment application with real-time stock data and Supabase integration.

Quick Start

npm install
cp .env.example .env.local
# Edit .env.local with your credentials
npm start

Environment Setup

Copy .env.example to .env.local and configure:

REACT_APP_SUPABASE_URL=https://your-project.supabase.co
REACT_APP_SUPABASE_ANON_KEY=your-anon-key
REACT_APP_FINNHUB_API_KEY=your-finnhub-key

Tech Stack

• Frontend: React 18, TypeScript, Tailwind CSS
• Backend: Supabase (Auth + Database)
• API: Finnhub for real-time stock data
• State: React Context + Custom Hooks
• Build: Create React App

Architecture

src/
├── components/        # UI components
├── contexts/         # Global state management
├── hooks/           # Custom React hooks
├── services/        # API clients and data layer
├── utils/           # Shared utilities
└── types/           # TypeScript definitions

Development

npm start          # Development server
npm run build      # Production build
npm test           # Run tests
npm run lint       # ESLint

Notes

• Uses Finnhub API for stock data (free tier: 60 calls/min)
• Supabase handles auth and data persistence
• Responsive design with mobile-first approach
• Real-time price updates every 2 minuts
• Mock data fallback when APIs are unavailable

Deployment

The app builds to static files and can be deployed to any static hosting service (Vercel, Netlify, etc.). Make sure to configure environment variables in your deployment platform.