How to Build an Astrology App Like Co-Star in 2026 (Complete Developer Guide)

# Create Expo project
npx create-expo-app CoStarClone --template blank-typescript
cd CoStarClone

# Install dependencies
npm install vedika                    # Vedika API SDK
npm install @react-navigation/native  # Navigation
npm install @react-navigation/bottom-tabs
npm install firebase                  # Auth + Firestore + FCM
npm install react-native-svg          # Birth chart rendering
npm install @expo/vector-icons        # Icons
npm install expo-notifications        # Push notifications
npm install react-native-reanimated   # Animations

screens/DailyHoroscopeScreen.tsx

// screens/DailyHoroscopeScreen.tsx
import React, { useEffect, useState } from 'react';
import {
  View, Text, ScrollView, StyleSheet,
  ActivityIndicator, RefreshControl
} from 'react-native';
import vedika from '../api/vedikaClient';
import { useAuth } from '../hooks/useAuth';

interface DailyReading {
  general: string;
  love: string;
  career: string;
  selfGrowth: string;
  luckyNumber: number;
  mood: string;
}

export default function DailyHoroscopeScreen() {
  const { user } = useAuth();
  const [reading, setReading] = useState<DailyReading | null>(null);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  const fetchDailyReading = async () => {
    try {
      // Vedika AI generates personalized predictions
      // based on the user's actual birth chart + transits
      const response = await vedika.chat.ask({
        question: 'Give me my daily horoscope for today. ' +
          'Break it into: general overview, love, career, ' +
          'and personal growth. Include lucky number and mood.',
        birthData: user.birthData,
        language: 'en'
      });

      // Parse AI response into structured sections
      const parsed = parseDailyReading(response.answer);
      setReading(parsed);
    } catch (error) {
      console.error('Failed to fetch daily reading:', error);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  useEffect(() => {
    fetchDailyReading();
  }, []);

  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#6366f1" />
        <Text style={styles.loadingText}>
          Reading the stars...
        </Text>
      </View>
    );
  }

  return (
    <ScrollView
      style={styles.container}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={() => {
            setRefreshing(true);
            fetchDailyReading();
          }}
        />
      }
    >
      <Text style={styles.date}>
        {new Date().toLocaleDateString('en-US', {
          weekday: 'long', month: 'long', day: 'numeric'
        })}
      </Text>

      <Text style={styles.title}>Your Day</Text>

      {/* Category Cards -- Co-Star Style */}
      <CategoryCard
        icon="sun" title="General"
        content={reading?.general}
      />
      <CategoryCard
        icon="heart" title="Romance"
        content={reading?.love}
      />
      <CategoryCard
        icon="briefcase" title="Career"
        content={reading?.career}
      />
      <CategoryCard
        icon="user" title="Self"
        content={reading?.selfGrowth}
      />

      {/* Mood + Lucky Number */}
      <View style={styles.quickStats}>
        <View style={styles.statBox}>
          <Text style={styles.statLabel}>Mood</Text>
          <Text style={styles.statValue}>
            {reading?.mood}
          </Text>
        </View>
        <View style={styles.statBox}>
          <Text style={styles.statLabel}>Lucky Number</Text>
          <Text style={styles.statValue}>
            {reading?.luckyNumber}
          </Text>
        </View>
      </View>
    </ScrollView>
  );
}

// Co-Star-inspired minimal styling
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    padding: 20
  },
  date: {
    color: '#666',
    fontSize: 14,
    marginTop: 60
  },
  title: {
    color: '#fff',
    fontSize: 32,
    fontWeight: '700',
    marginTop: 8,
    marginBottom: 24
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000'
  },
  loadingText: {
    color: '#666',
    marginTop: 12
  },
  quickStats: {
    flexDirection: 'row',
    gap: 12,
    marginTop: 16,
    marginBottom: 40
  },
  statBox: {
    flex: 1,
    backgroundColor: '#111',
    padding: 16,
    borderRadius: 12
  },
  statLabel: {
    color: '#666',
    fontSize: 12,
    textTransform: 'uppercase'
  },
  statValue: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
    marginTop: 4
  }
});

screens/BirthChartScreen.tsx

// screens/BirthChartScreen.tsx
import React, { useEffect, useState } from 'react';
import {
  View, Text, ScrollView, StyleSheet,
  ActivityIndicator
} from 'react-native';
import Svg, { Circle, Line, Text as SvgText } from 'react-native-svg';
import vedika from '../api/vedikaClient';
import { useAuth } from '../hooks/useAuth';

// Planet glyphs for chart rendering
const PLANET_GLYPHS: Record<string, string> = {
  sun: '\u2609', moon: '\u263D', mars: '\u2642',
  mercury: '\u263F', jupiter: '\u2643', venus: '\u2640',
  saturn: '\u2644', rahu: '\u260A', ketu: '\u260B'
};

interface PlanetData {
  sign: string;
  house: number;
  degree: number;
  isRetrograde: boolean;
  dignity?: string;
}

export default function BirthChartScreen() {
  const { user } = useAuth();
  const [chart, setChart] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchChart() {
      try {
        const result = await vedika.vedic.birthChart({
          datetime: user.birthData.datetime,
          latitude: user.birthData.latitude,
          longitude: user.birthData.longitude,
          timezone: user.birthData.timezone
        });
        setChart(result);
      } catch (err) {
        console.error('Birth chart fetch failed:', err);
      } finally {
        setLoading(false);
      }
    }
    fetchChart();
  }, []);

  if (loading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" color="#6366f1" />
      </View>
    );
  }

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>Your Birth Chart</Text>

      {/* Ascendant */}
      <View style={styles.ascendantBox}>
        <Text style={styles.ascLabel}>Ascendant</Text>
        <Text style={styles.ascValue}>
          {chart.ascendant.sign} {chart.ascendant.degree.toFixed(1)}
        </Text>
      </View>

      {/* SVG Wheel Chart */}
      <View style={styles.chartContainer}>
        <Svg height="320" width="320" viewBox="0 0 320 320">
          {/* Outer ring */}
          <Circle cx="160" cy="160" r="150"
            stroke="#333" strokeWidth="1" fill="none" />
          {/* Inner ring */}
          <Circle cx="160" cy="160" r="100"
            stroke="#222" strokeWidth="1" fill="none" />

          {/* House dividers (12 lines) */}
          {Array.from({ length: 12 }).map((_, i) => {
            const angle = (i * 30 - 90) * (Math.PI / 180);
            return (
              <Line key={i}
                x1={160 + 100 * Math.cos(angle)}
                y1={160 + 100 * Math.sin(angle)}
                x2={160 + 150 * Math.cos(angle)}
                y2={160 + 150 * Math.sin(angle)}
                stroke="#333" strokeWidth="1"
              />
            );
          })}

          {/* Planet positions */}
          {chart.planets &&
            Object.entries(chart.planets).map(
              ([name, data]: [string, any]) => {
                const totalDeg = (data.house - 1) * 30
                  + data.degree;
                const angle = (totalDeg - 90) * (Math.PI / 180);
                const r = 125;
                return (
                  <SvgText key={name}
                    x={160 + r * Math.cos(angle)}
                    y={160 + r * Math.sin(angle)}
                    fill={data.isRetrograde ? '#ef4444' : '#fff'}
                    fontSize="14" textAnchor="middle"
                  >
                    {PLANET_GLYPHS[name] || name[0].toUpperCase()}
                  </SvgText>
                );
            })}
        </Svg>
      </View>

      {/* Planet Details List */}
      <Text style={styles.sectionTitle}>Planetary Positions</Text>
      {chart.planets &&
        Object.entries(chart.planets).map(
          ([name, data]: [string, any]) => (
          <View key={name} style={styles.planetRow}>
            <Text style={styles.planetGlyph}>
              {PLANET_GLYPHS[name]}
            </Text>
            <View style={styles.planetInfo}>
              <Text style={styles.planetName}>
                {name.charAt(0).toUpperCase() + name.slice(1)}
                {data.isRetrograde ? ' (R)' : ''}
              </Text>
              <Text style={styles.planetDetail}>
                {data.sign} {data.degree.toFixed(1)} | House {data.house}
                {data.dignity ? ` | ${data.dignity}` : ''}
              </Text>
            </View>
          </View>
        ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#000', padding: 20 },
  center: {
    flex: 1, justifyContent: 'center',
    alignItems: 'center', backgroundColor: '#000'
  },
  title: {
    color: '#fff', fontSize: 28,
    fontWeight: '700', marginTop: 60, marginBottom: 16
  },
  ascendantBox: {
    backgroundColor: '#111', padding: 16,
    borderRadius: 12, marginBottom: 20
  },
  ascLabel: {
    color: '#666', fontSize: 12, textTransform: 'uppercase'
  },
  ascValue: {
    color: '#fff', fontSize: 22, fontWeight: '600', marginTop: 4
  },
  chartContainer: { alignItems: 'center', marginBottom: 24 },
  sectionTitle: {
    color: '#fff', fontSize: 20,
    fontWeight: '600', marginBottom: 16
  },
  planetRow: {
    flexDirection: 'row', alignItems: 'center',
    backgroundColor: '#111', padding: 14,
    borderRadius: 10, marginBottom: 8
  },
  planetGlyph: { color: '#fff', fontSize: 24, width: 40 },
  planetInfo: { flex: 1 },
  planetName: { color: '#fff', fontSize: 16, fontWeight: '600' },
  planetDetail: { color: '#888', fontSize: 13, marginTop: 2 }
});

screens/AIChatScreen.tsx

// screens/AIChatScreen.tsx
import React, { useState, useRef } from 'react';
import {
  View, Text, TextInput, TouchableOpacity,
  FlatList, StyleSheet, KeyboardAvoidingView,
  Platform
} from 'react-native';
import vedika from '../api/vedikaClient';
import { useAuth } from '../hooks/useAuth';

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

export default function AIChatScreen() {
  const { user } = useAuth();
  const [messages, setMessages] = useState<Message[]>([
    {
      id: '0',
      role: 'assistant',
      content: 'Ask me anything about your birth chart, ' +
        'career, relationships, or upcoming transits.',
      timestamp: new Date()
    }
  ]);
  const [input, setInput] = useState('');
  const [isTyping, setIsTyping] = useState(false);
  const flatListRef = useRef<FlatList>(null);

  const sendMessage = async () => {
    if (!input.trim() || isTyping) return;

    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: input.trim(),
      timestamp: new Date()
    };

    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsTyping(true);

    try {
      // Send question to Vedika AI with birth data
      const response = await vedika.chat.ask({
        question: userMessage.content,
        birthData: {
          datetime: user.birthData.datetime,
          latitude: user.birthData.latitude,
          longitude: user.birthData.longitude,
          timezone: user.birthData.timezone
        },
        language: 'en'
      });

      const aiMessage: Message = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: response.answer,
        timestamp: new Date()
      };

      setMessages(prev => [...prev, aiMessage]);
    } catch (error) {
      const errorMsg: Message = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: 'Unable to read the stars right now. ' +
          'Please try again.',
        timestamp: new Date()
      };
      setMessages(prev => [...prev, errorMsg]);
    } finally {
      setIsTyping(false);
    }
  };

  const renderMessage = ({ item }: { item: Message }) => (
    <View style={[
      styles.messageBubble,
      item.role === 'user'
        ? styles.userBubble
        : styles.aiBubble
    ]}>
      <Text style={[
        styles.messageText,
        item.role === 'user'
          ? styles.userText
          : styles.aiText
      ]}>
        {item.content}
      </Text>
    </View>
  );

  // Suggested questions for first-time users
  const suggestions = [
    'What does my birth chart say about my career?',
    'When is a good time to start a business?',
    'Tell me about my current Mahadasha period',
    'Am I going through Sade Sati?'
  ];

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      keyboardVerticalOffset={90}
    >
      <FlatList
        ref={flatListRef}
        data={messages}
        renderItem={renderMessage}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.messageList}
        onContentSizeChange={() =>
          flatListRef.current?.scrollToEnd()
        }
        ListHeaderComponent={
          messages.length <= 1 ? (
            <View style={styles.suggestionsBox}>
              <Text style={styles.suggestLabel}>
                Try asking:
              </Text>
              {suggestions.map((q, i) => (
                <TouchableOpacity key={i}
                  style={styles.suggestChip}
                  onPress={() => {
                    setInput(q);
                  }}
                >
                  <Text style={styles.suggestText}>{q}</Text>
                </TouchableOpacity>
              ))}
            </View>
          ) : null
        }
      />

      {isTyping && (
        <View style={styles.typingIndicator}>
          <Text style={styles.typingText}>
            Analyzing your chart...
          </Text>
        </View>
      )}

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={input}
          onChangeText={setInput}
          placeholder="Ask about your chart..."
          placeholderTextColor="#666"
          multiline
          maxLength={500}
        />
        <TouchableOpacity
          style={[
            styles.sendButton,
            (!input.trim() || isTyping)
              && styles.sendDisabled
          ]}
          onPress={sendMessage}
          disabled={!input.trim() || isTyping}
        >
          <Text style={styles.sendIcon}>↑</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#000' },
  messageList: { padding: 16, paddingBottom: 8 },
  messageBubble: {
    maxWidth: '80%', padding: 14,
    borderRadius: 16, marginBottom: 10
  },
  userBubble: {
    alignSelf: 'flex-end',
    backgroundColor: '#6366f1',
    borderBottomRightRadius: 4
  },
  aiBubble: {
    alignSelf: 'flex-start',
    backgroundColor: '#1a1a1a',
    borderBottomLeftRadius: 4
  },
  messageText: { fontSize: 15, lineHeight: 22 },
  userText: { color: '#fff' },
  aiText: { color: '#e5e5e5' },
  typingIndicator: { paddingHorizontal: 20, paddingBottom: 8 },
  typingText: { color: '#666', fontSize: 13, fontStyle: 'italic' },
  inputContainer: {
    flexDirection: 'row', alignItems: 'flex-end',
    padding: 12, borderTopWidth: 1, borderTopColor: '#222',
    backgroundColor: '#000'
  },
  input: {
    flex: 1, backgroundColor: '#111',
    color: '#fff', padding: 12, borderRadius: 20,
    fontSize: 15, maxHeight: 100, marginRight: 8
  },
  sendButton: {
    backgroundColor: '#6366f1', width: 40,
    height: 40, borderRadius: 20,
    justifyContent: 'center', alignItems: 'center'
  },
  sendDisabled: { backgroundColor: '#333' },
  sendIcon: { color: '#fff', fontSize: 20, fontWeight: '700' },
  suggestionsBox: { marginBottom: 16 },
  suggestLabel: {
    color: '#666', fontSize: 13,
    marginBottom: 8, textTransform: 'uppercase'
  },
  suggestChip: {
    backgroundColor: '#111', paddingHorizontal: 14,
    paddingVertical: 10, borderRadius: 20,
    marginBottom: 8, borderWidth: 1, borderColor: '#333'
  },
  suggestText: { color: '#ccc', fontSize: 14 }
});

backend/notifications/dailyPush.ts

// backend/notifications/dailyPush.ts
import { VedikaClient } from 'vedika';
import * as admin from 'firebase-admin';

const vedika = new VedikaClient(process.env.VEDIKA_API_KEY!);
const db = admin.firestore();

/**
 * Runs daily at 7:00 AM via Cloud Scheduler.
 * Fetches personalized transit-based content for each user
 * and sends a push notification via FCM.
 */
export async function sendDailyNotifications() {
  // Get all users with FCM tokens
  const usersSnapshot = await db.collection('users')
    .where('fcmToken', '!=', null)
    .get();

  console.log(
    `Sending notifications to ${usersSnapshot.size} users`
  );

  const batchSize = 50;
  const users = usersSnapshot.docs;

  for (let i = 0; i < users.length; i += batchSize) {
    const batch = users.slice(i, i + batchSize);

    await Promise.allSettled(
      batch.map(async (userDoc) => {
        const userData = userDoc.data();
        try {
          // Generate personalized notification content
          // using Vedika AI + user's birth chart
          const response = await vedika.chat.ask({
            question:
              'Give me a one-sentence insight for today ' +
              'based on current planetary transits affecting ' +
              'my chart. Keep it under 100 characters, punchy ' +
              'and actionable. No greetings.',
            birthData: {
              datetime: userData.birthData.datetime,
              latitude: userData.birthData.latitude,
              longitude: userData.birthData.longitude,
              timezone: userData.birthData.timezone
            },
            language: userData.preferredLanguage || 'en'
          });

          // Send via FCM
          await admin.messaging().send({
            token: userData.fcmToken,
            notification: {
              title: 'Your stars today',
              body: response.answer.slice(0, 178)
            },
            data: {
              type: 'daily_horoscope',
              screen: 'DailyHoroscope'
            },
            android: {
              priority: 'high',
              notification: {
                channelId: 'daily_horoscope'
              }
            },
            apns: {
              payload: {
                aps: {
                  sound: 'default',
                  badge: 1
                }
              }
            }
          });

          console.log(`Sent to ${userDoc.id}`);
        } catch (err) {
          console.error(
            `Failed for ${userDoc.id}:`, err
          );
        }
      })
    );

    // Rate limit: pause between batches
    if (i + batchSize < users.length) {
      await new Promise(r => setTimeout(r, 1000));
    }
  }
}

// Cloud Scheduler entry point
// Schedule: "0 7 * * *" (7 AM daily)
export default sendDailyNotifications;