Skip to content

HackStyx/portfolio-tracker

Repository files navigation

Stock Portfolio Tracker πŸ“ˆ

Vercel Render React Vite MySQL TailwindCSS Node.js Finnhub API Docs

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

Live Demo β€’ API Documentation β€’ Report Bug

Note: Due to the free tier limitations of Render, the initial load of the demo might take 30-60 seconds. If no data appears, please refresh the page. If issues persist, click the logout button to reset the application state. The backend spins down after 15 minutes of inactivity and needs time to restart.

Portfolio Dashboard

✨ 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 - Real-time stock prices via Finnhub API
  • πŸ“ˆ Price History - Visualize stock performance with historical data
  • πŸ’Ή Market Data - Real-time quotes and market status tracking
  • 🎯 Price Targets - Set and monitor stock price targets

πŸš€ Quick Start

Prerequisites

  • Node.js 14+
  • npm or yarn
  • MySQL
  • Finnhub API Key (get one at finnhub.io)

Frontend Setup

  1. Clone and install:
git clone https://github.com/HackStyx/portfolio-tracker.git
cd portfolio-tracker
npm install
  1. Create .env:
VITE_API_BASE_URL=http://localhost:5000/api
  1. Start development server:
npm run dev

Backend Setup

  1. Setup backend:
cd backend
npm install
  1. Configure .env:
DATABASE_URL=mysql://user:password@localhost:3306/portfolio_tracker
PORT=5000
NODE_ENV=development
FINNHUB_API_KEY=your_finnhub_api_key
  1. Run migrations and start:
npm run migrate
npm start

πŸ”Œ API Documentation

Our API is fully documented and available at https://hackstyx.github.io/portfolio-tracker/

Base URL

https://portfolio-tracker-backend-y7ne.onrender.com/api

Key Endpoints

Portfolio Management

GET     /stocks              # Get all stocks in portfolio
POST    /stocks              # Add new stock
PUT     /stocks/:id          # Update existing stock
DELETE  /stocks/:id          # Remove stock from portfolio

Watchlist Management

GET     /watchlist           # Get watchlist items
POST    /watchlist           # Add stock to watchlist
DELETE  /watchlist/:id       # Remove from watchlist

Market Data

GET     /stocks/:ticker/quote    # Get real-time stock quote
GET     /stocks/:ticker/history  # Get historical price data
GET     /stocks/summary         # Get portfolio analytics

For detailed API documentation including:

  • Request/Response formats
  • Authentication details
  • Rate limiting
  • Error handling
  • Code examples

Visit our API Documentation

⚑️ Tech Stack

🎨 Frontend

  • Framework: React - A JavaScript library for building user interfaces
  • Build Tool: Vite - Next generation frontend tooling
  • Styling:
  • State Management: React Context API
  • HTTP Client: Axios - Promise based HTTP client

πŸ›  Backend

  • Runtime: Node.js - JavaScript runtime
  • Framework: Express - Web framework for Node.js
  • Database: MySQL - Open-source relational database
  • ORM: Sequelize - Modern TypeScript and Node.js ORM
  • Market Data: Finnhub - Real-time RESTful APIs for stocks
  • API Documentation: Github Pages

πŸš€ DevOps & Infrastructure

  • Frontend Hosting: Vercel
    • Zero-config deployments
    • Automatic HTTPS
    • Edge Network for optimal performance
  • Backend Hosting: Render
    • Containerized deployment
    • Automatic scaling
    • Built-in monitoring
  • Database Hosting: Railway
    • Managed MySQL database
    • Automated backups
    • High availability

πŸ“¦ Additional Tools

  • Version Control: Git & GitHub
  • Code Quality: ESLint & Prettier
  • API Testing: Thunder Client
  • Environment Variables: dotenv
  • Security: CORS
  • Real-time Monitoring: UpTimeRobot

⚠️ Limitations

  • Uses simulated stock data when Finnhub API rate limit is reached
  • Single-user environment
  • Price updates every minute
  • Best viewed in modern browsers
  • Backend spins down after 15 minutes of inactivity and needs time to restart
  • Limited to 60 API calls per minute (Finnhub free tier)

πŸ“„ License

This project is licensed under the MIT License. License: MIT

For more information, see the LICENSE file in the repository.

THANK YOU FOR VISITING ❀️