Build a Daily Rashifal Mobile App: Complete Tutorial

Why Build a Rashifal App?

Daily horoscope apps have 70%+ retention rates - users check every morning. Apps like Co-Star and Sanctuary earn $1M+ monthly through subscriptions and premium features. The market is huge: 400M+ monthly searches for "daily horoscope" globally, with 65% on mobile.

Tech Stack Selection

Part 1: React Native Implementation

Project Setup

# Create new React Native app
npx react-native init RashifalApp

cd RashifalApp

# Install dependencies
npm install axios
npm install @react-native-async-storage/async-storage
npm install @react-navigation/native @react-navigation/bottom-tabs
npm install react-native-push-notification
npm install react-native-linear-gradient

# iOS setup
cd ios && pod install && cd ..

API Service Layer

// services/VedikaAPI.js
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const API_KEY = 'your_vedika_api_key';
const BASE_URL = 'https://api.vedika.io/v1';

class VedikaAPI {
  constructor() {
    this.client = axios.create({
      baseURL: BASE_URL,
      headers: {
        'Authorization': `Bearer ${API_KEY}`,
        'Content-Type': 'application/json'
      },
      timeout: 10000
    });
  }

  async getDailyRashifal(zodiacSign, language = 'en') {
    try {
      const response = await this.client.post('/horoscope/daily', {
        zodiacSign: zodiacSign,
        language: language,
        date: new Date().toISOString().split('T')[0]
      });
      return response.data;
    } catch (error) {
      throw new Error('Failed to fetch rashifal: ' + error.message);
    }
  }

  async getWeeklyRashifal(zodiacSign, language = 'en') {
    const response = await this.client.post('/horoscope/weekly', {
      zodiacSign: zodiacSign,
      language: language
    });
    return response.data;
  }

  async getCompatibility(sign1, sign2) {
    const response = await this.client.post('/compatibility/signs', {
      sign1: sign1,
      sign2: sign2
    });
    return response.data;
  }

  async saveFavoriteSign(sign) {
    await AsyncStorage.setItem('favoriteSign', sign);
  }

  async getFavoriteSign() {
    return await AsyncStorage.getItem('favoriteSign');
  }
}

export default new VedikaAPI();

Main Rashifal Screen

// screens/DailyRashifalScreen.js
import React, { useState, useEffect } from 'react';
import {
  View, Text, ScrollView, StyleSheet,
  ActivityIndicator, RefreshControl
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import VedikaAPI from '../services/VedikaAPI';

const DailyRashifalScreen = ({ route }) => {
  const { zodiacSign } = route.params;
  const [rashifal, setRashifal] = useState(null);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  const loadRashifal = async () => {
    try {
      setLoading(true);
      const data = await VedikaAPI.getDailyRashifal(zodiacSign);
      setRashifal(data);
    } catch (error) {
      console.error('Error loading rashifal:', error);
    } finally {
      setLoading(false);
    }
  };

  const onRefresh = async () => {
    setRefreshing(true);
    await loadRashifal();
    setRefreshing(false);
  };

  useEffect(() => {
    loadRashifal();
  }, [zodiacSign]);

  if (loading) {
    return (
      
        
      
    );
  }

  return (
    
      }
    >
      
        {zodiacSign}
        
          {new Date().toLocaleDateString('en-US', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
          })}
        
      

      
        {/* Overall Prediction */}
        
          Today's Prediction
          {rashifal.prediction}
        

        {/* Categories */}
        
          
          
          
          
        

        {/* Lucky Details */}
        
          Lucky For You
          
            
            
            
            
          
        
      
    
  );
};

const CategoryCard = ({ title, content, icon, color }) => (
  
    
      {icon}
      {title}
    
    {content}
  
);

const LuckyItem = ({ label, value }) => (
  
    {label}
    {value}
  
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F9FAFB'
  },
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  header: {
    padding: 24,
    paddingTop: 48
  },
  headerTitle: {
    fontSize: 32,
    fontWeight: 'bold',
    color: 'white',
    marginBottom: 8
  },
  headerDate: {
    fontSize: 14,
    color: 'rgba(255,255,255,0.9)'
  },
  content: {
    padding: 16
  },
  section: {
    marginBottom: 24
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 12,
    color: '#1F2937'
  },
  prediction: {
    fontSize: 16,
    lineHeight: 24,
    color: '#4B5563'
  },
  categories: {
    marginBottom: 24
  },
  card: {
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    borderLeftWidth: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3
  },
  cardHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8
  },
  cardIcon: {
    fontSize: 24,
    marginRight: 8
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#1F2937'
  },
  cardContent: {
    fontSize: 14,
    lineHeight: 20,
    color: '#6B7280'
  },
  luckySection: {
    marginBottom: 24
  },
  luckyGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginHorizontal: -6
  },
  luckyItem: {
    width: '50%',
    padding: 6
  },
  luckyLabel: {
    fontSize: 12,
    color: '#9CA3AF',
    marginBottom: 4
  },
  luckyValue: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#8B5CF6'
  }
});

export default DailyRashifalScreen;

Part 2: Push Notifications

// services/NotificationService.js
import PushNotification from 'react-native-push-notification';
import VedikaAPI from './VedikaAPI';

class NotificationService {
  configure() {
    PushNotification.configure({
      onNotification: function (notification) {
        console.log('Notification:', notification);
      },
      requestPermissions: Platform.OS === 'ios'
    });

    // Create notification channel (Android)
    PushNotification.createChannel({
      channelId: 'daily-rashifal',
      channelName: 'Daily Rashifal',
      channelDescription: 'Daily horoscope notifications',
      importance: 4,
      vibrate: true
    });
  }

  async scheduleDailyNotification(zodiacSign, time = '09:00') {
    // Cancel existing notifications
    PushNotification.cancelAllLocalNotifications();

    // Schedule daily notification
    const [hour, minute] = time.split(':').map(Number);

    PushNotification.localNotificationSchedule({
      channelId: 'daily-rashifal',
      title: `Your Daily ${zodiacSign} Rashifal`,
      message: 'Tap to see what the stars have in store for you today!',
      date: this.getNextNotificationTime(hour, minute),
      repeatType: 'day',
      allowWhileIdle: true
    });
  }

  getNextNotificationTime(hour, minute) {
    const now = new Date();
    const next = new Date();
    next.setHours(hour, minute, 0, 0);

    // If time has passed today, schedule for tomorrow
    if (next <= now) {
      next.setDate(next.getDate() + 1);
    }

    return next;
  }

  async sendPersonalizedNotification(zodiacSign) {
    // Fetch today's prediction
    const rashifal = await VedikaAPI.getDailyRashifal(zodiacSign);

    PushNotification.localNotification({
      channelId: 'daily-rashifal',
      title: `${zodiacSign} - Today's Highlight`,
      message: rashifal.summary,
      bigText: rashifal.prediction
    });
  }
}

export default new NotificationService();

Part 3: Flutter Implementation

// lib/services/vedika_api.dart
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';

class VedikaAPI {
  static const String baseUrl = 'https://api.vedika.io/v1';
  static const String apiKey = 'your_vedika_api_key';

  static Future> getDailyRashifal(
    String zodiacSign,
    {String language = 'en'}
  ) async {
    final response = await http.post(
      Uri.parse('$baseUrl/horoscope/daily'),
      headers: {
        'Authorization': 'Bearer $apiKey',
        'Content-Type': 'application/json',
      },
      body: jsonEncode({
        'zodiacSign': zodiacSign,
        'language': language,
        'date': DateTime.now().toIso8601String().split('T')[0],
      }),
    );

    if (response.statusCode == 200) {
      return jsonDecode(response.body);
    } else {
      throw Exception('Failed to load rashifal');
    }
  }

  static Future saveFavoriteSign(String sign) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('favoriteSign', sign);
  }

  static Future getFavoriteSign() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString('favoriteSign');
  }
}

// lib/screens/daily_rashifal_screen.dart
import 'package:flutter/material.dart';
import '../services/vedika_api.dart';

class DailyRashifalScreen extends StatefulWidget {
  final String zodiacSign;

  const DailyRashifalScreen({Key? key, required this.zodiacSign})
      : super(key: key);

  @override
  _DailyRashifalScreenState createState() => _DailyRashifalScreenState();
}

class _DailyRashifalScreenState extends State {
  Map? rashifal;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    loadRashifal();
  }

  Future loadRashifal() async {
    setState(() => isLoading = true);
    try {
      final data = await VedikaAPI.getDailyRashifal(widget.zodiacSign);
      setState(() {
        rashifal = data;
        isLoading = false;
      });
    } catch (e) {
      setState(() => isLoading = false);
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error loading rashifal: $e')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : RefreshIndicator(
              onRefresh: loadRashifal,
              child: CustomScrollView(
                slivers: [
                  SliverAppBar(
                    expandedHeight: 200,
                    pinned: true,
                    flexibleSpace: FlexibleSpaceBar(
                      title: Text(widget.zodiacSign),
                      background: Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [Color(0xFF8B5CF6), Color(0xFF6366F1)],
                          ),
                        ),
                      ),
                    ),
                  ),
                  SliverToBoxAdapter(
                    child: Padding(
                      padding: EdgeInsets.all(16),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          _buildPredictionCard(),
                          SizedBox(height: 16),
                          _buildCategoryCards(),
                          SizedBox(height: 16),
                          _buildLuckySection(),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
    );
  }

  Widget _buildPredictionCard() {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Today\'s Prediction',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 12),
            Text(
              rashifal?['prediction'] ?? '',
              style: TextStyle(fontSize: 16, height: 1.5),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCategoryCards() {
    final categories = [
      {'title': 'Love', 'icon': '❤️', 'color': Colors.red},
      {'title': 'Career', 'icon': '💼', 'color': Colors.blue},
      {'title': 'Health', 'icon': '🏥', 'color': Colors.green},
      {'title': 'Finance', 'icon': '💰', 'color': Colors.amber},
    ];

    return Column(
      children: categories.map((cat) {
        return Card(
          margin: EdgeInsets.only(bottom: 12),
          child: Container(
            decoration: BoxDecoration(
              border: Border(
                left: BorderSide(color: cat['color'] as Color, width: 4),
              ),
            ),
            child: Padding(
              padding: EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(cat['icon'] as String, style: TextStyle(fontSize: 24)),
                      SizedBox(width: 8),
                      Text(
                        cat['title'] as String,
                        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                  SizedBox(height: 8),
                  Text(
                    rashifal?[cat['title']!.toLowerCase()] ?? '',
                    style: TextStyle(fontSize: 14, color: Colors.grey[700]),
                  ),
                ],
              ),
            ),
          ),
        );
      }).toList(),
    );
  }

  Widget _buildLuckySection() {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Lucky For You',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            GridView.count(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 2,
              childAspectRatio: 3,
              children: [
                _buildLuckyItem('Number', rashifal?['luckyNumber']?.toString()),
                _buildLuckyItem('Color', rashifal?['luckyColor']),
                _buildLuckyItem('Time', rashifal?['luckyTime']),
                _buildLuckyItem('Direction', rashifal?['luckyDirection']),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLuckyItem(String label, String? value) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: TextStyle(fontSize: 12, color: Colors.grey)),
        SizedBox(height: 4),
        Text(
          value ?? '-',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: Color(0xFF8B5CF6),
          ),
        ),
      ],
    );
  }
}

Monetization Implementation

// services/SubscriptionService.js
import { Platform } from 'react-native';
import RNIap from 'react-native-iap';

const SUBSCRIPTION_SKUS = Platform.select({
  ios: ['com.rashifal.premium.monthly', 'com.rashifal.premium.yearly'],
  android: ['premium_monthly', 'premium_yearly']
});

class SubscriptionService {
  async initPurchases() {
    try {
      await RNIap.initConnection();
      const products = await RNIap.getSubscriptions(SUBSCRIPTION_SKUS);
      return products;
    } catch (error) {
      console.error('Failed to initialize purchases:', error);
    }
  }

  async subscribe(sku) {
    try {
      await RNIap.requestSubscription(sku);
      // Verify purchase on backend
      // Grant premium access
    } catch (error) {
      console.error('Subscription failed:', error);
    }
  }

  async checkPremiumStatus() {
    // Check if user has active subscription
    const purchases = await RNIap.getAvailablePurchases();
    return purchases.length > 0;
  }
}

export default new SubscriptionService();

Launch Checklist

Frequently Asked Questions