Pillar B — Build guides

Published 2026-06-07 · Updated 2026-06-19 · By Avinash Chandan, Founder, Navamsha

Build a Kundli Generator in React with Navamsha API

A React Kundli generator collects birth date, time, and place, then displays sidereal chart data from Navamsha. The API key must stay off the client — use a Next.js Route Handler, Vite server proxy, or your FastAPI backend as the fetch layer.

Architecture

React component → your /api/kundli route → Navamsha GET /api/v1/kundali/basic. Store NAVAMSHA_API_KEY in server env only.

async function fetchKundli(input: BirthInput) {
  const res = await fetch("/api/kundli?" + new URLSearchParams({
    date: input.date,
    time: input.time,
    latitude: String(input.latitude),
    longitude: String(input.longitude),
  }));
  if (!res.ok) throw new Error("Chart failed");
  return res.json();
}

UI patterns

• Show loading skeleton while the chart fetch runs — typical latency is under 50ms once warm.
• Display lagna sign, Moon nakshatra, and meta.ayanamsa in the header for trust.
• Link to /getting-started for users who need their own API key for self-hosted forks.