Building a Horoscope App with React and Vedika API

React is the perfect framework for building interactive horoscope applications. With its component-based architecture, state management capabilities, and vast ecosystem, React allows developers to create beautiful, responsive astrology apps that users love.

In this comprehensive tutorial, we'll build a production-ready horoscope application from scratch using React and Vedika API - the only B2B astrology API with AI-powered conversational capabilities.

                What You'll Build: A complete horoscope app with daily predictions, birth chart visualization, compatibility matching, and AI-powered chat. The app will be responsive, fast, and production-ready.
            

Why React for Astrology Apps?

Component Reusability

Build zodiac cards, chart visualizations, and prediction displays as reusable components.

State Management

Manage user birth details, predictions, and chat history with React Context or Redux.

Performance

Virtual DOM ensures smooth updates even with complex chart animations.

Ecosystem

Rich library ecosystem for charts, animations, and date/time handling.

Project Setup

Step 1: Create React App

# Create new React app with TypeScript
npx create-react-app horoscope-app --template typescript
cd horoscope-app

# Install dependencies
npm install @vedika-io/sdk axios date-fns react-router-dom
npm install -D @types/react-router-dom tailwindcss postcss autoprefixer
            

Step 2: Configure Tailwind CSS

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        zodiac: {
          aries: '#FF6B6B',
          taurus: '#4ECDC4',
          gemini: '#FFE66D',
          cancer: '#95E1D3',
          leo: '#F38181',
          virgo: '#AA96DA',
          libra: '#FCBAD3',
          scorpio: '#A8D8EA',
          sagittarius: '#FF9A8B',
          capricorn: '#88D8B0',
          aquarius: '#7EC8E3',
          pisces: '#DCD6F7'
        }
      }
    }
  },
  plugins: []
}
            

Step 3: Set Up Vedika API Client

// src/services/vedikaClient.ts
import { VedikaClient } from '@vedika-io/sdk';

const vedikaClient = new VedikaClient({
  apiKey: process.env.REACT_APP_VEDIKA_API_KEY!,
  environment: 'production'
});

export default vedikaClient;
            

Building Core Components

Zodiac Sign Selector Component

// src/components/ZodiacSelector.tsx
import React from 'react';

const zodiacSigns = [
  { name: 'Aries', symbol: '♈', dates: 'Mar 21 - Apr 19' },
  { name: 'Taurus', symbol: '♉', dates: 'Apr 20 - May 20' },
  { name: 'Gemini', symbol: '♊', dates: 'May 21 - Jun 20' },
  { name: 'Cancer', symbol: '♋', dates: 'Jun 21 - Jul 22' },
  { name: 'Leo', symbol: '♌', dates: 'Jul 23 - Aug 22' },
  { name: 'Virgo', symbol: '♍', dates: 'Aug 23 - Sep 22' },
  { name: 'Libra', symbol: '♎', dates: 'Sep 23 - Oct 22' },
  { name: 'Scorpio', symbol: '♏', dates: 'Oct 23 - Nov 21' },
  { name: 'Sagittarius', symbol: '♐', dates: 'Nov 22 - Dec 21' },
  { name: 'Capricorn', symbol: '♑', dates: 'Dec 22 - Jan 19' },
  { name: 'Aquarius', symbol: '♒', dates: 'Jan 20 - Feb 18' },
  { name: 'Pisces', symbol: '♓', dates: 'Feb 19 - Mar 20' }
];

interface Props {
  onSelect: (sign: string) => void;
  selected?: string;
}

export const ZodiacSelector: React.FC<Props> = ({ onSelect, selected }) => {
  return (
    <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
      {zodiacSigns.map((sign) => (
        <button
          key={sign.name}
          onClick={() => onSelect(sign.name)}
          className={`p-4 rounded-xl transition-all duration-300 ${
            selected === sign.name
              ? 'bg-purple-600 text-white shadow-lg scale-105'
              : 'bg-white hover:bg-purple-50 border border-gray-200'
          }`}
        >
          <span className="text-3xl block mb-2">{sign.symbol}</span>
          <span className="font-semibold">{sign.name}</span>
          <span className="text-xs text-gray-500 block">{sign.dates}</span>
        </button>
      ))}
    </div>
  );
};
            

Daily Horoscope Component

// src/components/DailyHoroscope.tsx
import React, { useState, useEffect } from 'react';
import vedikaClient from '../services/vedikaClient';

interface Props {
  sign: string;
  birthDetails?: {
    datetime: string;
    latitude: number;
    longitude: number;
    timezone: string;
  };
}

export const DailyHoroscope: React.FC<Props> = ({ sign, birthDetails }) => {
  const [prediction, setPrediction] = useState<string>('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchPrediction = async () => {
      setLoading(true);
      try {
        // Use AI-powered natural language query
        const response = await vedikaClient.query({
          question: `What is today's horoscope for ${sign}? Include career, love, and health predictions.`,
          birthDetails: birthDetails
        });

        setPrediction(response.answer);
      } catch (error) {
        console.error('Error fetching prediction:', error);
      } finally {
        setLoading(false);
      }
    };

    if (sign) {
      fetchPrediction();
    }
  }, [sign, birthDetails]);

  if (loading) {
    return (
      <div className="animate-pulse bg-gray-100 rounded-lg p-6">
        <div className="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
        <div className="h-4 bg-gray-200 rounded w-1/2"></div>
      </div>
    );
  }

  return (
    <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 shadow-lg">
      <h3 className="text-xl font-bold text-purple-800 mb-4">
        Today's Horoscope for {sign}
      </h3>
      <p className="text-gray-700 leading-relaxed">{prediction}</p>
    </div>
  );
};
            

AI Chat Component

The most powerful feature - let users ask any astrology question naturally:

// src/components/AstrologyChat.tsx
import React, { useState, useRef, useEffect } from 'react';
import vedikaClient from '../services/vedikaClient';

interface Message {
  role: 'user' | 'assistant';
  content: string;
}

interface Props {
  birthDetails: {
    datetime: string;
    latitude: number;
    longitude: number;
    timezone: string;
  };
}

export const AstrologyChat: React.FC<Props> = ({ birthDetails }) => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const chatEndRef = useRef<HTMLDivElement>(null);

  const scrollToBottom = () => {
    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleSend = async () => {
    if (!input.trim() || loading) return;

    const userMessage: Message = { role: 'user', content: input };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setLoading(true);

    try {
      const response = await vedikaClient.query({
        question: input,
        birthDetails: birthDetails
      });

      const assistantMessage: Message = {
        role: 'assistant',
        content: response.answer
      };
      setMessages(prev => [...prev, assistantMessage]);
    } catch (error) {
      console.error('Chat error:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex flex-col h-[500px] bg-white rounded-xl shadow-lg">
      {/* Chat Header */}
      <div className="bg-purple-600 text-white p-4 rounded-t-xl">
        <h3 className="font-bold">Ask Your Astrology Question</h3>
        <p className="text-sm text-purple-200">Powered by Vedika AI</p>
      </div>

      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((msg, idx) => (
          <div
            key={idx}
            className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
          >
            <div
              className={`max-w-[80%] p-3 rounded-lg ${
                msg.role === 'user'
                  ? 'bg-purple-600 text-white'
                  : 'bg-gray-100 text-gray-800'
              }`}
            >
              {msg.content}
            </div>
          </div>
        ))}
        {loading && (
          <div className="flex justify-start">
            <div className="bg-gray-100 p-3 rounded-lg">
              <span className="animate-pulse">Consulting the stars...</span>
            </div>
          </div>
        )}
        <div ref={chatEndRef} />
      </div>

      {/* Input */}
      <div className="p-4 border-t">
        <div className="flex gap-2">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && handleSend()}
            placeholder="Ask about career, love, health..."
            className="flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500"
          />
          <button
            onClick={handleSend}
            disabled={loading}
            className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
          >
            Send
          </button>
        </div>
      </div>
    </div>
  );
};
            

Putting It All Together

// src/App.tsx
import React, { useState } from 'react';
import { ZodiacSelector } from './components/ZodiacSelector';
import { DailyHoroscope } from './components/DailyHoroscope';
import { AstrologyChat } from './components/AstrologyChat';

function App() {
  const [selectedSign, setSelectedSign] = useState<string>('');
  const [birthDetails] = useState({
    datetime: '1990-06-15T14:30:00+05:30',
    latitude: 28.6139,
    longitude: 77.2090,
    timezone: 'Asia/Kolkata'
  });

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-purple-800 to-pink-800">
      <header className="py-8 text-center text-white">
        <h1 className="text-4xl font-bold mb-2">Cosmic Insights</h1>
        <p className="text-purple-200">AI-Powered Astrology • Powered by Vedika API</p>
      </header>

      <main className="max-w-6xl mx-auto px-4 pb-12">
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-white mb-6">Select Your Sign</h2>
          <ZodiacSelector
            onSelect={setSelectedSign}
            selected={selectedSign}
          />
        </section>

        {selectedSign && (
          <section className="mb-12">
            <DailyHoroscope
              sign={selectedSign}
              birthDetails={birthDetails}
            />
          </section>
        )}

        <section>
          <h2 className="text-2xl font-bold text-white mb-6">Ask the Stars</h2>
          <AstrologyChat birthDetails={birthDetails} />
        </section>
      </main>
    </div>
  );
}

export default App;
            

Advanced Features

1. Birth Chart Visualization

Use libraries like D3.js or Chart.js to visualize planetary positions:

// Get birth chart data from Vedika API
const chartData = await vedikaClient.getBirthChart({
  datetime: '1990-06-15T14:30:00+05:30',
  latitude: 28.6139,
  longitude: 77.2090,
  timezone: 'Asia/Kolkata',
  ayanamsa: 'lahiri',
  houseSystem: 'placidus'
});

// Returns: planets, houses, aspects, yogas, doshas
            

2. Compatibility Matching

// Ask AI about compatibility
const compatibility = await vedikaClient.query({
  question: "How compatible am I with someone born on March 15, 1992 at 10:30 AM in Mumbai?",
  birthDetails: myBirthDetails
});
            

3. Multi-Language Support

// Get predictions in Hindi
const hindiPrediction = await vedikaClient.query({
  question: "मेरा करियर कैसा रहेगा?",
  birthDetails: birthDetails,
  language: 'hi'
});
            

Deployment

Environment Variables

# .env.production
REACT_APP_VEDIKA_API_KEY=your_production_api_key
            

Build for Production

npm run build

# Deploy to Vercel
npx vercel --prod

# Or deploy to Netlify
npx netlify deploy --prod
            

Ready to Build Your Horoscope App?

Get started with Vedika API - 10 free queries, no credit card required.

Get Your API Key

Sample Questions Users Can Ask

"What are my career prospects this year?"
"Is this a good time to start a new business?"
"What does my birth chart say about relationships?"
"When will I get married according to my horoscope?"
"What gemstone should I wear for luck?"
"Explain my current Mahadasha"

Conclusion

Building a horoscope app with React and Vedika API is remarkably straightforward. The key advantages:

No astrology knowledge needed - The AI handles complex calculations
Natural language interface - Users ask questions in plain English
Production-ready - 99.9% uptime, rate limiting, secure authentication
Scalable - Pay only for what you use

Next steps:

Get your free API key at vedika.io/dashboard
Clone our React starter template
Deploy your app and start gathering users!

About Vedika Intelligence: Vedika is the only B2B astrology API with AI-powered chatbot capabilities. Build astrology apps with natural language interfaces using our multi-agent swarm intelligence system.