Building a Cosmic React App: Integrating the Vedika Astrology API [2026-02]

In today's data-driven world, combining AI-powered services with modern frontend frameworks opens up exciting possibilities. One such combination is integrating the Vedika astrology API with React to create personalized astrology applications. This tutorial will guide you through building a React component that fetches and displays astrology insights based on birth details.

The Problem

Most astrology websites require users to manually input their birth details and then wait for static interpretations. By integrating the Vedika API with React, we can create a dynamic, interactive experience that provides real-time astrology insights based on user input. However, connecting a React frontend to an external API requires handling asynchronous operations, state management, and error handling - which can be challenging without proper guidance.

Step-by-Step Solution

1. Setting Up Your React Project

First, let's create a new React application using Create React App:

npx create-react-app vedika-astrology-app
cd vedika-astrology-app
npm install axios

We'll use Axios for making API requests to the Vedika API.

2. Creating the Astrology Form Component

Create a new file components/AstrologyForm.js:

import React, { useState } from 'react';
import axios from 'axios';

const AstrologyForm = () => {
  const [birthDateTime, setBirthDateTime] = useState('');
  const [latitude, setLatitude] = useState('');
  const [longitude, setLongitude] = useState('');
  const [question, setQuestion] = useState('');
  const [insights, setInsights] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const response = await axios.post('https://api.vedika.io/api/v1/astrology/query', {
        birthDetails: {
          datetime: birthDateTime,
          lat: parseFloat(latitude),
          lng: parseFloat(longitude)
        },
        question: question
      }, {
        headers: {
          'Authorization': `Bearer ${process.env.REACT_APP_VEDIKA_API_KEY}`,
          'Content-Type': 'application/json'
        }
      });

      setInsights(response.data);
    } catch (err) {
      setError(err.response?.data?.error || 'Failed to fetch astrology insights');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="astrology-form">
      <h2>Get Your Personalized Astrology Insights</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Birth Date & Time:</label>
          <input 
            type="datetime-local" 
            value={birthDateTime}
            onChange={(e) => setBirthDateTime(e.target.value)}
            required
          />
        </div>
        <div>
          <label>Latitude:</label>
          <input 
            type="number" 
            step="any"
            value={latitude}
            onChange={(e) => setLatitude(e.target.value)}
            placeholder="e.g., 40.7128"
            required
          />
        </div>
        <div>
          <label>Longitude:</label>
          <input 
            type="number" 
            step="any"
            value={longitude}
            onChange={(e) => setLongitude(e.target.value)}
            placeholder="e.g., -74.0060"
            required
          />
        </div>
        <div>
          <label>Your Question:</label>
          <textarea 
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
            placeholder="Ask about your career, relationships, etc."
            required
          />
        </div>
        <button type="submit" disabled={loading}>
          {loading ? 'Fetching Insights...' : 'Get Insights'}
        </button>
      </form>

      {error && <div className="error">{error}</div>}
      {insights && <AstrologyResult insights={insights} />}
    </div>
  );
};

export default AstrologyForm;

3. Creating the Result Display Component

Create components/AstrologyResult.js:

import React from 'react';

const AstrologyResult = ({ insights }) => {
  return (
    <div className="astrology-result">
      <h3>Your Astrology Insights</h3>
      <div className="insight-content">
        <p>{insights.insight}</p>
        {insights.recommendations && (
          <div className="recommendations">
            <h4>Recommendations:</h4>
            <ul>
              {insights.recommendations.map((rec, index) => (
                <li key={index}>{rec}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
};

export default AstrologyResult;

4. Updating App.js

Now, update your App.js to use the new component:

import React from 'react';
import AstrologyForm from './components/AstrologyForm';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Vedika Astrology Insights</h1>
        <p>Discover what the stars have in store for you</p>
      </header>
      <main>
        <AstrologyForm />
      </main>
    </div>
  );
}

export default App;

5. Adding Basic Styling

Update App.css with some basic styling:

css
.App {
  text-align: center;
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  border-radius: 8px;
  color: white;
  margin-bottom: 30px;
}

.astrology-form {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.astrology-form div {
  margin-bottom: 15px;
  text-align: left;
}

.astrology-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.astrology-form input,
.astrology-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.astrology-form textarea {
  height: 100px;
  resize: vertical;
}

button {
  background-color: #61dafb;
  color: #282c34;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #4fa8c5;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.error {
  color: #d9534f;
  margin-top: 15px;
  padding: 10px;
  background-color: #f9f2f2;
  border-radius: 4px;
}

.astrology-result {
  margin-top: 30px;
  padding: 20px;
  background-color: #e8f4fc;
  border-radius: 8px;
}

.recommendations {
  margin-top: 15px;
  text-align