StockVision

Visualize Your Portfolio Performance

Track your investments, analyze performance, and make data-driven decisions with our powerful financial dashboard.

---

Project Overview

StockVision is a modern, interactive dashboard for investors and traders. It provides a comprehensive view of your portfolio, real-time market data, and insightful analytics to help you make smarter financial decisions.

---

Features

• Portfolio Overview: Visualize your holdings and performance at a glance.
• Multi-Portfolio Management: Create, manage, and compare multiple portfolios.
• Portfolio Comparison: Interactive charts to compare performance across portfolios.
• Historical Analysis: Track portfolio performance over different time periods.
• Market Data Center: Access up-to-date market data and trends.
• Performance Analytics: Analyze your portfolio's growth and risk.
• Recent Activity: Track your latest transactions and changes.
• Customizable Dashboard: Modular components for a personalized experience.

---

---

Tech Stack

Frontend

• Framework: Next.js 15 (Monorepo)
• Language: TypeScript
• State Management: React Context API
• UI: Radix UI, Shadcn UI
• Styling: Tailwind CSS
• Deployment: Vercel

Backend

• Framework: FastAPI (Python)
• Features: REST API, CORS, Pydantic validation, auto docs, market/stock endpoints
• Dev Tools: Uvicorn, Black, isort, flake8, pytest

For a detailed explanation of the backend structure, API endpoints, and integration, see Backend.md.

---

Folder Structure

StockVision/
├── frontend/                 # Next.js Frontend Application
│   ├── app/                 # Next.js App Router
│   ├── public/             # Static assets
│   ├── package.json        # Frontend dependencies
│   └── ...                 # Frontend config files
├── backend/                 # FastAPI Backend Application
│   ├── app/                # FastAPI application code
│   │   ├── models.py       # Pydantic models
│   │   └── routers/        # API route handlers
│   ├── main.py            # FastAPI entry point
│   ├── requirements.txt    # Python dependencies
│   └── ...                # Backend config files
├── package.json            # Root monorepo configuration
├── Backend.md              # **Backend details and API documentation**
└── README.md              # This file

---

Quick Start

Prerequisites

• Node.js 18+ and npm 9+
• Python 3.8+ and pip
• PostgreSQL 14+ (running locally with a database created, e.g. stockvision)
• Git

Installation & Setup

1. Clone the repository

   git clone https://github.com/MIHIR2006/StockVision.git
   cd StockVision

2. Install all dependencies

   npm install
   # (installs both frontend and backend dependencies)

3. Set up backend environment variables (PostgreSQL required)

   cd backend
   cp env.example .env
   # Edit .env and set DATABASE_URL, for example:
   # DATABASE_URL=postgresql://user:password@localhost:5432/stockvision
   cd ..

4. Start PostgreSQL locally (recommended: Docker)

   # Start a local PostgreSQL 16 container on port 5432
   docker run --name stockvision-postgres \
     -e POSTGRES_USER=svuser -e POSTGRES_PASSWORD=svpass -e POSTGRES_DB=stockvision \
     -p 5432:5432 -d postgres:16
   
   # Set the same DATABASE_URL in your shell (PowerShell example)
   # $env:DATABASE_URL="postgresql://svuser:svpass@localhost:5432/stockvision"

   Useful Docker commands:

   • Start: docker start stockvision-postgres
   • Stop: docker stop stockvision-postgres
   • Logs: docker logs -f stockvision-postgres

5. Setup database client (Prisma) for frontend

   cd frontend
   npm install
   # Ensure DATABASE_URL is available in environment (same as backend)
   # On Windows PowerShell:
   #   $env:DATABASE_URL="postgresql://user:password@localhost:5432/stockvision"
   # On Unix shells:
   #   export DATABASE_URL="postgresql://user:password@localhost:5432/stockvision"
   npm run db:generate
   npm run db:dev
   cd ..

6. Run the development servers

   # Start both frontend and backend together
   npm run dev
   # Or run individually:
   npm run dev:frontend  # Frontend only (http://localhost:3000)
   npm run dev:backend   # Backend only (http://127.0.0.1:8000)

   • Frontend: Open http://localhost:3000
   • Backend: Open http://localhost:8000/docs for API docs

---

Access Points

• Frontend: http://localhost:3000
• Backend API: http://localhost:8000
• API Documentation: http://localhost:8000/docs
• API ReDoc: http://localhost:8000/redoc
• Health Check: http://localhost:8000/health

---

Development & Scripts

Monorepo Scripts

npm run dev              # Start both frontend and backend
npm run dev:frontend     # Start frontend only
npm run dev:backend      # Start backend only
npm run build            # Build both applications
npm run build:frontend   # Build frontend only
npm run build:backend    # Build backend only
npm run start            # Start both in production mode
npm run lint             # Lint all workspaces
npm run install:all      # Install all dependencies

Frontend Scripts

cd frontend
npm run dev              # Start Next.js dev server
npm run build            # Build for production
npm run start            # Start production server
npm run lint             # Lint TypeScript/ESLint

Backend Scripts

cd backend
npm run dev              # Start FastAPI dev server
npm run start            # Start production server
npm run test             # Run tests
npm run lint             # Format and lint code

---

API Endpoints (Backend)

See Backend.md for full details, but here are the essentials:

Stock Data

• GET /api/stocks - All stocks
• GET /api/stocks/{symbol} - Specific stock
• POST /api/stocks/search - Search stocks
• GET /api/stocks/{symbol}/price - Stock price only

Portfolio Management

• GET /api/portfolios - Get all portfolios
• GET /api/portfolios/{id} - Get specific portfolio
• POST /api/portfolios - Create new portfolio
• PUT /api/portfolios/{id} - Update portfolio
• DELETE /api/portfolios/{id} - Delete portfolio
• GET /api/portfolios/{id}/history - Portfolio historical data
• POST /api/portfolios/compare - Compare multiple portfolios
• GET /api/portfolios/analytics/summary - Combined portfolio analytics

Market Data

• GET /api/market/summary - Market summary
• GET /api/market/trends - Market trends
• GET /api/market/sectors - Sector performance
• GET /api/market/indicators - Market indicators
• GET /api/market/volume - Volume data

Health & Docs

• GET / - Root
• GET /health - Health check
• GET /docs - Swagger UI
• GET /redoc - ReDoc

---

Configuration

Backend (.env)

API_HOST=0.0.0.0
API_PORT=8000
DEBUG=True
ALLOWED_ORIGINS=http://localhost:3000,http://localhost:3001
# Required PostgreSQL connection string
# Example: postgresql://user:password@localhost:5432/stockvision
DATABASE_URL=postgresql://user:password@localhost:5432/stockvision

Frontend

The frontend uses Prisma + PostgreSQL. Ensure DATABASE_URL is set in your shell (or create frontend/.env.local) before running:

cd frontend
npm run db:generate
npm run db:dev

View the Database (Prisma Studio)

Use Prisma Studio to inspect tables and data in your PostgreSQL database.

PowerShell (Windows):

cd frontend
$env:DATABASE_URL="postgresql://svuser:svpass@localhost:5432/stockvision"
npm run db:studio

Unix shells (macOS/Linux/WSL):

cd frontend
export DATABASE_URL="postgresql://svuser:svpass@localhost:5432/stockvision"
npm run db:studio

This opens a local UI at http://localhost:5555 showing your Prisma models and rows.

Optional: connect with psql (Docker example):

docker exec -it stockvision-postgres psql -U svuser -d stockvision

Example frontend/.env.local

# PostgreSQL database URL used by Prisma
DATABASE_URL="postgresql://user:password@localhost:5432/stockvision?schema=public"

# Optional: Backend API URL if the frontend calls the backend
# NEXT_PUBLIC_API_URL="http://localhost:8000"

---

Roadmap

• Multi-portfolio management and comparison
• Real-time stock data integration
• User authentication and portfolio persistence
• Advanced charting features
• Portfolio optimization suggestions
• Risk analysis and alerts
• Mobile app development
• Machine learning predictions
• Social trading features

---

Production Deployment

Monorepo Management

This project uses Turborepo for monorepo management and build optimization.

• Dev: npm run dev (runs both frontend and backend)
• Build: npm run build
• Start: npm run start

Deployment

• Frontend: Deploy the frontend directory to Vercel (set root to frontend in Vercel dashboard).
• Backend: Deploy the backend directory to a Python-friendly host (Render, Railway, Fly.io, etc).
• API URL: Set NEXT_PUBLIC_API_URL in Vercel to your backend’s public URL.

See Backend.md for backend deployment and API details.

NextAuth on Vercel (production)

Set these environment variables in the Vercel project (Frontend):

• NEXTAUTH_URL = your production URL (e.g. https://your-app.vercel.app)
• NEXTAUTH_SECRET = a strong random string (e.g. output of openssl rand -base64 32)
• DATABASE_URL = your production PostgreSQL connection string
• Optional OAuth providers:
  • GITHUB_ID, GITHUB_SECRET
  • GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET

Provider callback URLs to configure in the provider dashboards:

• GitHub: https://your-app.vercel.app/api/auth/callback/github
• Google: https://your-app.vercel.app/api/auth/callback/google

Notes:

• App Router auth endpoint is at app/api/auth/[...nextauth]/route.ts and is production-safe.
• Keep debug off in production (it's automatically off when NODE_ENV=production).

---

TurboRepo

This monorepo uses Turborepo for fast, cacheable builds and development.

Contributing

We love our contributors! Here's how you can contribute:

• Open an issue if you believe you've encountered a bug.
• Follow the local development guide to get your local dev environment set up.
• Make a pull request to add new features/make quality-of-life improvements/fix bugs.

---

Repo Activity