Add a Birth Chart Feature to Your React App in 15 Minutes

#javascript #api #react #tutorial

I spent 3 months learning Vedic astrology calculations. Then I realized I could just use an API.

Here's how to add a full birth chart feature to your React app in 15 minutes.

What We're Building

A component that takes a user's birth details and displays their complete Vedic birth chart - planets, houses, nakshatras, and AI-powered insights.

Prerequisites

React 18+
A Vedika API key (free sandbox available)

Step 1: Install Dependencies

npm install axios

Step 2: Create the Birth Chart Component

// components/BirthChart.jsx
import { useState } from 'react';
import axios from 'axios';

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

export function BirthChart({ apiKey }) {
  const [birthDetails, setBirthDetails] = useState({
    datetime: '',
    latitude: '',
    longitude: ''
  });
  const [chart, setChart] = useState(null);
  const [loading, setLoading] = useState(false);

  const fetchChart = async () => {
    setLoading(true);
    try {
      const response = await axios.post(VEDIKA_API, {
        question: "Give me a complete birth chart analysis with planetary positions, house placements, and key yogas",
        birthDetails: {
          datetime: birthDetails.datetime,
          latitude: parseFloat(birthDetails.latitude),
          longitude: parseFloat(birthDetails.longitude)
        }
      }, {
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': apiKey
        }
      });
      setChart(response.data);
    } catch (error) {
      console.error('Chart fetch failed:', error);
    }
    setLoading(false);
  };

  return (
    <div className="birth-chart">
      <h2>Generate Your Birth Chart</h2>
      <div className="form">
        <input
          type="datetime-local"
          value={birthDetails.datetime}
          onChange={(e) => setBirthDetails({...birthDetails, datetime: e.target.value})}
        />
        <input
          type="number"
          step="0.0001"
          value={birthDetails.latitude}
          onChange={(e) => setBirthDetails({...birthDetails, latitude: e.target.value})}
          placeholder="Latitude (e.g., 28.6139)"
        />
        <input
          type="number"
          step="0.0001"
          value={birthDetails.longitude}
          onChange={(e) => setBirthDetails({...birthDetails, longitude: e.target.value})}
          placeholder="Longitude (e.g., 77.2090)"
        />
        <button onClick={fetchChart} disabled={loading}>
          {loading ? 'Calculating...' : 'Generate Chart'}
        </button>
      </div>
      {chart && (
        <div className="results">
          <h3>Your Birth Chart Analysis</h3>
          <div className="answer">{chart.answer}</div>
        </div>
      )}
    </div>
  );
}

Step 3: Use It

import { BirthChart } from './components/BirthChart';

function App() {
  return (
    <BirthChart apiKey="your-vedika-api-key" />
  );
}

What's Happening Behind the Scenes

When you call the Vedika API, it:

Calculates exact planetary positions using Swiss Ephemeris
Determines house placements based on your birth location
Identifies nakshatras (lunar mansions) for each planet
Runs a 6-agent AI swarm to interpret the chart
Returns both raw data AND natural language insights

Try It Free

The sandbox at api.vedika.io/sandbox returns mock data - perfect for development.

Full API docs: vedika.io/docs

What would you build with an astrology API? Drop your ideas in the comments!

DEV Community