Stock Portfolio Tracker 📈

A modern, responsive stock portfolio tracker built with React and Node.js

Live Demo • API Endpoint • Report Bug

✨ Features

• 📊 Portfolio Management - Track your stocks with real-time updates
• 👀 Watchlist - Monitor potential investments
• 🌓 Dark/Light Mode - Easy on the eyes, day and night
• 📱 Fully Responsive - Perfect on desktop and mobile
• 🔄 Live Updates - Stock prices update automatically
• 📈 Price History - Visualize stock performance

🚀 Quick Start

Prerequisites

• Node.js 14+
• npm or yarn
• MySQL

Frontend Setup

1. Clone and install:

git clone https://github.com/HackStyx/portfolio-tracker.git
cd portfolio-tracker
npm install

2. Create .env:

VITE_API_BASE_URL=http://localhost:5000/api

3. Start development server:

npm run dev

Backend Setup

1. Setup backend:

cd backend
npm install

2. Configure .env:

DATABASE_URL=mysql://user:password@localhost:3306/portfolio_tracker
PORT=5000
NODE_ENV=development

3. Run migrations and start:

npm run migrate
npm start

🔌 API Endpoints

Portfolio

GET     /api/stocks           # Get portfolio stocks
POST    /api/stocks           # Add stock
PUT     /api/stocks/:id       # Update stock
DELETE  /api/stocks/:id       # Remove stock

Watchlist

GET     /api/watchlist           # Get watchlist
POST    /api/watchlist           # Add to watchlist
PUT     /api/watchlist/:id       # Update watchlist item
DELETE  /api/watchlist/:id       # Remove from watchlist

⚡️ Tech Stack

Frontend

• React + Vite
• TailwindCSS
• Framer Motion
• Tremor Charts
• Axios

Backend

• Node.js
• Express
• MySQL
• Knex.js

⚠️ Limitations

• Uses simulated stock data
• Single-user environment
• Price updates every minute
• Best viewed in modern browsers

📄 License

MIT © HackStyx