Build a Daily Horoscope App with React + Vedic Astrology API

By the end of this tutorial you will have a working daily horoscope component that fetches a sun sign prediction, today's panchang data, and the user's current dasha period — all with three parallel API calls and a single custom hook.

Step 1 — Get your API key

Sign up at vedintelastroapi.com/auth/signup. Your key starts with vai_. Add it to your .env.local as NEXT_PUBLIC_VEDINTEL_KEY.

Step 2 — The data-fetching hook

Three parallel fetches: daily sun prediction, today's panchang, and current mahadasha. Using Promise.all keeps the total wait time equal to the slowest single call (~150ms for cached birth data).

// hooks/useHoroscope.ts
import { useState, useEffect } from 'react'

const BASE = 'https://vedintelastroapi.com/api/v1'

export function useHoroscope(birthData: {
  dob: string; tob: string; lat: number; lon: number; tz: number
}) {
  const [data, setData] = useState<any>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const params = new URLSearchParams({
      api_key: process.env.NEXT_PUBLIC_VEDINTEL_KEY!,
      ...Object.fromEntries(Object.entries(birthData).map(([k,v]) => [k, String(v)]))
    })

    Promise.all([
      fetch(`${BASE}/predictions/daily-sun?${params}`).then(r => r.json()),
      fetch(`${BASE}/panchang/panchang?${params}`).then(r => r.json()),
      fetch(`${BASE}/dashas/current-mahadasha?${params}`).then(r => r.json()),
    ]).then(([sun, panchang, dasha]) => {
      setData({ sun: sun.response, panchang: panchang.response, dasha: dasha.response })
      setLoading(false)
    })
  }, [])

  return { data, loading }
}

Step 3 — The display component

// components/DailyHoroscope.tsx
export default function DailyHoroscope({ birthData }: { birthData: BirthData }) {
  const { data, loading } = useHoroscope(birthData)

  if (loading) return <div className="animate-pulse">Reading the stars…</div>

  return (
    <div className="horoscope-card">
      <h2>Today's Reading</h2>

      {/* Prediction */}
      <section>
        <h3>Sun in {data.sun.sun_sign}</h3>
        <p>{data.sun.prediction}</p>
      </section>

      {/* Panchang */}
      <section className="panchang">
        <div><span>Tithi</span><strong>{data.panchang.tithi.name}</strong></div>
        <div><span>Nakshatra</span><strong>{data.panchang.nakshatra.name}</strong></div>
        <div><span>Yoga</span><strong>{data.panchang.yoga.name}</strong></div>
        <div><span>Rahu Kaal</span><strong>{data.panchang.rahu_kaal}</strong></div>
      </section>

      {/* Current Dasha */}
      <section>
        <h3>Current Period</h3>
        <p>{data.dasha.name} Mahadasha until {data.dasha.end}</p>
      </section>
    </div>
  )
}

What the response contains

The sun prediction endpoint returns:

• sun_sign — zodiac sign name
• prediction — 2–3 sentence personalised daily reading
• lucky_color, lucky_number
• favourable_direction

Performance tips

• VedIntel caches natal charts permanently. Repeat calls for the same birth data return in under 50ms.
• Add your component-level fetch to a daily cache key so you are not re-fetching on every render.
• The panchang endpoint takes a date parameter — default is today.
• For a mobile app, the Python SDK handles auth and retries automatically.