A Next.js dashboard for exploring Indian mutual fund schemes and NAV trends using MFAPI.

This app integrates all major MFAPI endpoints and provides:

• searchable mutual fund schemes
• top scheme listing (currently first 100 via limit=100&offset=6)
• latest NAV snapshot
• latest NAV date shown alongside the Latest NAV stat label
• historical NAV trend chart with date presets
• quick performance stats (absolute and percentage change)
• bookmark/unbookmark schemes with local persistence and prioritized list display

Reference API documentation: MFAPI Docs

• Next.js App Router + TypeScript
• Tailwind CSS
• Recharts for NAV graph visualization

The app proxies external API calls through internal routes:

• GET /api/mf/list -> MFAPI GET /mf
• GET /api/mf/search -> MFAPI GET /mf/search?q=...
• GET /api/mf/[schemeCode] -> MFAPI GET /mf/{scheme_code}
• GET /api/mf/[schemeCode]/latest -> MFAPI GET /mf/{scheme_code}/latest

MFAPI has rate limiting guidance. To reduce repeated requests, the frontend uses an in-memory cache with request deduplication:

• list cache TTL: 60m
• search cache TTL: 10m
• history cache TTL: 30m
• latest NAV cache TTL: 5m

This behavior is implemented in lib/client-cache.ts and used by hooks/use-mf-dashboard.ts.

• app/page.tsx - page composition
• hooks/use-mf-dashboard.ts - dashboard state + data fetching
• components/dashboard/* - UI subcomponents
• lib/dashboard-utils.ts - date/range/formatting helpers
• lib/client-cache.ts - client cache + in-flight request deduping
• lib/mfapi.ts - typed MFAPI service helpers
• app/api/mf/* - internal API route handlers

Install dependencies:

npm install

Run dev server:

npm run dev

Open http://localhost:3000.

npm run lint
npm run build