React + Vedika: Building an Intelligent Horoscope Query Tool in 10 Minutes [2026-04]

The Problem: Static Text vs. Dynamic AI Insights

Building a web application around astrology used to mean two things: either scraping static horoscope pages (which are often inaccurate and outdated) or building a massive Vedic mathematics engine from scratch (which is computationally expensive and prone to bugs).

Modern web applications demand dynamic content. Users don't just want to see their "Sun Sign"; they want to know, "Will I get a promotion this year?" or "Should I move to a new city based on my Dasha?".

This is where the Vedika API comes in. It provides a single, powerful endpoint that uses AI to interpret Vedic astrology charts based on user inputs. In this tutorial, we will integrate this API into a modern React application to create a real-time, interactive astrology query tool.

Prerequisites

Before we dive into the code, ensure you have:

• Node.js installed.
• A basic understanding of React Hooks (useState, useEffect).
• A free API key from the Vedika Sandbox.

---

Step 1: Project Setup

We’ll use Vite for this tutorial because it offers a faster build setup and modern tooling. Open your terminal and run:

npm create vite@latest vedika-astro-app -- --template react
cd vedika-astro-app
npm install

Step 2: Understanding the API Payload

The Vedika API expects a specific JSON structure. To use it effectively in React, we need to define our data types.

According to the documentation, the endpoint is POST /api/v1/astrology/query.

The Request Body:

{
  "question": "Will I get a job offer next month?",
  "birthDetails": {
    "datetime": "1990-05-15T10:30:00Z", // ISO 8601 format
    "lat": 28.6139, // Latitude
    "lng": 77.2090  // Longitude
  }
}

Step 3: Creating a Custom Hook

In a professional React application, we never put API logic directly inside our UI components. Instead, we extract it into a custom hook. This keeps our code clean, reusable, and testable.

Create a file named useVedikaQuery.js (or .ts if you prefer TypeScript).

javascript
import { useState } from 'react';

const VEDIKA_API_URL = 'https://api.vedika.io/api/v1/astrology/query';

export const useVedikaQuery = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  const queryAstrology = async (question, birthDetails) => {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch(VEDIKA_API_URL, {
        method: 'POST',
        headers: {
          'Content