Portfolio Dashboard

A real-time stock portfolio dashboard built with Next.js, featuring live data from Yahoo Finance and Google Finance.

Features

• Live Stock Data - Real-time prices from Yahoo Finance
• P/E & EPS - Scraped from Google Finance
• Dark/Light Mode - Theme toggle with system preference support
• Auto-refresh - Data updates every 15 seconds
• Sortable Table - Click headers to sort by any column
• Optimized - Caching, memoization, retry logic

Setup

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/Rudra-P11/OctaByte.git
cd portfolio-dashboard

# Install the dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000

Build for Production

npm run build
npm start

Project Structure

src/
├── app/
│   ├── api/portfolio/     # API route
│   ├── globals.css        # Theme & animations
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Main dashboard
├── components/
│   ├── ui/                # shadcn/ui components
│   ├── PortfolioTable.tsx # Holdings table
│   └── SectorSummary.tsx  # Sector breakdown
├── hooks/
│   └── use-portfolio.ts   # Data fetching hook
├── lib/
│   ├── holdings.ts        # Portfolio data
│   └── services/          # Stock API service
└── types/
    └── portfolio.ts       # TypeScript types

Configuration

Edit src/lib/holdings.ts to customize your portfolio:

export const PORTFOLIO_HOLDINGS = [
  {
    id: "1",
    ticker: "RELIANCE.NS",
    name: "Reliance Industries",
    exchange: "NSE",
    sector: "Energy",
    purchasePrice: 2450,
    quantity: 10,
  },
];

## Tech Stack

- Framework: Next.js 16 (App Router)

- Language: TypeScript

- Styling: Tailwind CSS 4

- State: TanStack Query

- APIs: Yahoo Finance, Google Finance (scraping)

License

MIT