✨ Skyread

A daily horoscope app that explains the planetary movements behind every reading for grounded, credible insights

React + TypeScript Vite Gemini AI Tailwind CSS Framer Motion

🎬 See It In Action

📋 Project Overview & Problem Statement

Challenge: Most horoscope apps deliver generic, vague readings with no explanation of why they apply to a specific sign on a specific day. Users have no reason to trust the output, and the experience feels disconnected from any real astrological basis.

Solution: Skyread is a bilingual daily horoscope app powered by Google Gemini AI. For every reading, it surfaces the actual planetary movements driving the forecast — a "Sky Explainer" and "Sky Snapshot" that tell users what is happening in the sky and why it matters to their sign, making every reading feel grounded and credible.

Key Benefits

🖥️ Application Features

🔮 Daily Reading

A ~100-word personalized horoscope for the user's selected zodiac sign. Generated fresh each day via Gemini AI, tone is atmospheric and credible rather than generic. Supports English and Mandarin Chinese.

🌌 Sky Explainer

Plain-language explanation of 2–3 real planetary movements occurring today and how they specifically influence the user's sign. Transforms the reading from vague advice into an astronomically-grounded forecast.

🪐 Sky Snapshot

A structured panel showing 3 key planets, their current astrological position (e.g. "Mars in Leo"), and a brief influence note. Gives users a quick at-a-glance view of the celestial landscape.

📚 Reading Archive

Automatically saves readings to localStorage. Users can browse and revisit up to 30 days of past horoscopes with full detail — daily reading, sky explainer, and snapshot — all available offline.

🌐 Bilingual Toggle

One-tap language switch between English (EN) and Mandarin Chinese (ZH). Switching language triggers a fresh AI-generated reading in the selected language, stored separately in the archive.

⚡ Smart Caching

Readings are cached by date, sign, and language — the app only calls the Gemini API once per combination per day. Revisiting the app on the same day instantly loads the cached reading from localStorage.

🤖 AI Integration & Intelligence

🧠 Gemini 3 Flash (Structured Output)

Skyread uses Google's Gemini 3 Flash model with a strict JSON response schema. The prompt requests a daily reading, sky explainer, and planet snapshot — all returned as a typed JSON object, eliminating parsing errors.

📐 Schema-Enforced Responses

The API call passes a full responseSchema specifying the exact shape of the output — date, reading, skyExplainer, and a snapshot array — ensuring consistent, structured AI responses every time.

💬 Language-Aware Prompting

The prompt dynamically instructs Gemini to respond "in Mandarin Chinese (Simplified)" or "in English" based on the user's selected language. The entire output — including planet names and positional descriptions — is returned in the target language.

⚙️ Low Thinking Mode

The Gemini API call uses ThinkingLevel.LOW for fast response times. Horoscope generation does not require deep reasoning — speed and creativity matter more than analytical depth for this use case.

🛠️ Technical Architecture & Implementation

Frontend Stack

React 19 TypeScript Vite Tailwind CSS Framer Motion Lucide React Icons

AI & Backend

Google Gemini 3 Flash @google/genai SDK JSON Schema (structured output) LocalStorage (caching)

Deployment & Infrastructure

Google AI Studio Google Cloud Run Vite Build (SPA)

System Architecture

📖 Development Setup & Installation Guide

Prerequisites

Quick Start Installation

# Clone the repository git clone https://github.com/lyven81/ai-project.git cd ai-project/projects/skyread # Install dependencies npm install # Set up environment variables cp .env.example .env.local # Add your GEMINI_API_KEY to .env.local # Run the app in development mode npm run dev

Environment Configuration

# Required API Configuration GEMINI_API_KEY=your_gemini_api_key_here

Available Scripts

🚀 Deployment on Google Cloud Run

# Build and deploy to Cloud Run via Google AI Studio # Or deploy manually: gcloud run deploy skyread \ --source . \ --platform managed \ --region asia-east1 \ --set-env-vars GEMINI_API_KEY=your_api_key

Production Notes

📊 Key Metrics

12
Zodiac Signs Supported
2
Languages (EN + ZH)
3
Reading Sections per Day
30
Days of Archive Storage

User Value