Frontend Developer Guide

Technology Stacks

• React 18 with TypeScript
• Vite for fast development builds
• Tailwind CSS + ShadCN UI for components
• Axios (src/services/api.js) as the centralized HTTP client
• Lightweight Charts for candlestick and line charts

Project Structure

frontend/
├── src/
│   ├── pages/          # Route-level page components
│   ├── components/     # Reusable UI components
│   ├── services/
│   │   └── api.js      # All API calls (Axios instance + method map)
│   ├── hooks/          # Custom React hooks
│   ├── types/          # TypeScript interfaces
│   └── App.tsx         # Root component + router
├── public/
├── index.html
├── vite.config.ts
└── package.json

Key Pages

Page	File	Description
BhavDownloader	src/pages/BhavDownloader.tsx	NSE sync + AMI data download
Dashboard	src/pages/Dashboard.tsx	Market summary
TradeEntry	src/pages/TradeEntry.tsx	Trade journal
OptionChain	src/pages/OptionChain.tsx	F&O chain viewer

API Service Pattern

All API calls go through src/services/api.js:

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8000/api',
});

export const api = {
  bhavDownloader: {
    triggerDownload: async (date, testingMode) => { ... },
    getStatus: async () => { ... },
    getAmiFiles: async () => { ... },
  }
};

Polling Pattern (BhavDownloader)

Background tasks use a polling loop with a hasSeenRunning guard to prevent premature termination on stale stats.json:

const startPolling = useCallback((alreadyRunning = false) => {
  let hasSeenRunning = alreadyRunning;
  pollingRef.current = setInterval(async () => {
    const res = await api.bhavDownloader.getStatus();
    if (res.status === 'RUNNING') {
      hasSeenRunning = true;
      // Update UI...
    } else if (hasSeenRunning) {
      // Task completed — stop polling
      stopPolling();
    }
    // If !hasSeenRunning and not RUNNING: task hasn't started writing yet — continue polling silently
  }, 1500);
}, []);

Environment Variables

Variable	Description
VITE_API_URL	Backend API base URL

Set in .env or .env.local at frontend/.

Running the Frontend

cd frontend
npm install
npm run dev       # dev server at http://localhost:5173
npm run build     # production build → dist/
npm run preview   # preview production build locally