Build a Mutual Fund Explorer with SIP Calculator (Next.js + MUI)

[develper21]

Body

Objective Help In This Task How can I'm completed this

Create a Next.js application that:

1. Wraps the MFAPI.in public APIs to provide custom endpoints for mutual funds.
2. Builds frontend pages using Material UI (MUI) components and MUI Charts for visualizations.
3. Implements a Systematic Investment Plan (SIP) calculator for each mutual fund, using historical NAV data to calculate returns.

---

Data Source

You will use MFAPI.in:

• All schemes list:
  https://api.mfapi.in/mf
• Scheme NAV history:
  https://api.mfapi.in/mf/{SCHEME_CODE}

---

Part 1: API Wrappers (Backend with Next.js)

You must implement the following API routes inside src/api/:

1. List all schemes

   • GET /api/mf
   • Fetches and caches the full list of schemes.

2. Scheme details (metadata + NAV history)

   • GET /api/scheme/:code
   • Returns metadata (fund house, type, category, ISINs) and NAV history (date, nav).

3. Returns calculator

   • GET /api/scheme/:code/returns

   • Query parameters:

     • period=1m|3m|6m|1y (standard periods) OR
     • from=YYYY-MM-DD&to=YYYY-MM-DD (custom duration).

   • Response includes:

     • startDate, endDate
     • startNAV, endNAV
     • simpleReturn %
     • annualizedReturn % (if duration ≥ 30 days)

4. SIP calculator

   • POST /api/scheme/:code/sip

   • Request body:

     {
       "amount": 5000,
       "frequency": "monthly",
       "from": "2020-01-01",
       "to": "2023-12-31"
     }

   • Response includes:

     • totalInvested
     • currentValue (using latest NAV)
     • totalUnits purchased
     • absoluteReturn %
     • annualizedReturn %

---

Part 2: Frontend Pages (Next.js + MUI)

Build the following pages:

1. Fund Search / Listing Page (/funds)

   • Display all fund houses and categories (grouped).
   • Search bar to filter by scheme name.
   • Use MUI components (Grid, Card, Typography).

2. Scheme Detail Page (/scheme/[code])

   • Show scheme metadata (fund house, category, ISIN info).
   • NAV Chart (last 1 year, plotted with MUI Charts).
   • Table of pre-computed returns (1m, 3m, 6m, 1y).

3. SIP Calculator Section (inside scheme detail page)

   • Form fields: SIP amount, frequency, start date, end date.

   • Button: “Calculate Returns”.

   • Show results in a Card:

     • Total invested
     • Current value
     • Absolute return %
     • Annualized return %

   • Chart showing growth of investment over time.

---

Part 3: SIP Calculation Rules

1. On each SIP date:

   • Fetch NAV of that date (or nearest earlier available NAV).
   • Units purchased = SIP amount / NAV.
   • Keep adding units for each SIP.

2. At end date (or latest NAV available):

   • Total value = (total units) × (end NAV).
   • Absolute return % = ((totalValue – totalInvested) / totalInvested) × 100.
   • Annualized return % = ((totalValue / totalInvested)^(1/years)) – 1.

3. Handle edge cases:

   • If NAV is 0.00000 → skip or mark invalid.
   • If date range has insufficient data → return needs_review.

---

Part 4: Technical Requirements

• Use Next.js (API routes + pages).

• Use Material UI (MUI) for design:

  • Responsive layout (mobile-first).
  • Cards, AppBar, Typography, Buttons, Inputs from MUI.

• Use MUI Charts (or Recharts) for visualizing:

  • NAV history (line chart).
  • SIP growth (area/line chart).

• Cache /mf and per-scheme NAVs in memory (12–24 hours TTL).

  • Redis caching = bonus, not mandatory.

---

Be creative:

Now that you have access to all the fund data, think about what additional features you could implement to increase the overall value of your application. For example, you might add:

• A lumpsum investment calculator to compare one-time investments with SIP.
• An SWP (Systematic Withdrawal Plan) calculator to simulate periodic withdrawals.
• More advanced or interactive visualizations to help users better understand fund performance.
• Any other meaningful features that make the application more practical, insightful, or user-friendly.

Use this opportunity to go beyond the basic requirements and showcase your creativity.

Guidelines

• I have read and understood this category's guidelines before making this post.

[t-maypat]

You've already planned out the frameworks and libraries you'll use. So Ig you dont need a lot of help there.
If you’re comfortable with the stack, I think you should focus on following good patterns and not tripping on details.

I'll list some of the resources that'll help you:

1. Go through this if you haven't already: Microsoft’s REST API guidelines
2. the Next.js API routes docs
3. MUI’s official docs cover layouts and components you’ll need for the fund pages, and for charts you can try MUI X Charts or Recharts examples.
4. For the SIP math: date-fns.
5. Also, check out Vercel’s Next.js caching guide.

[develper21]

Yes, you've provided the perfect solution. I did some work on the basics, but I couldn't find the location of the library to collect the charts and the main text. Thanks for helping me figure it out.