AI Story Planner (Mobile App)

MyStory — AI Anime Story Generator

Generate personalized anime-style comic stories powered by Google Gemini AI. Define your characters, pick a genre, and watch your story come to life as illustrated comic panels.

---

Screenshots

<table> <tr> <td align="center"><b>My Stories</b></td> <td align="center"><b>Create Story</b></td> <td align="center"><b>Story Viewer</b></td> <td align="center"><b>Profile</b></td> </tr> <tr> <td><img src="images/stories-page.png" width="220" alt="My Stories screen" /></td> <td><img src="images/create-story.png" width="220" alt="Create Story screen" /></td> <td><img src="images/story-preview.png" width="220" alt="Story Viewer screen" /></td> <td><img src="images/profile.png" width="220" alt="Profile screen" /></td> </tr> </table>

---

Features

• AI Story Generation — 5-panel anime-style comic narratives generated by Gemini
• Character Images — AI-generated anime character portraits per story
• Comic Viewer — Scrollable panel layout with dialogue bubbles and scene narrations
• Local Storage — Stories saved on-device; read them offline anytime
• Simple Onboarding — Just enter a username — no passwords, no accounts
• Form Auto-Reset — Create form clears automatically after each successful generation
• Light Theme — Clean, modern UI with soft lavender tones and purple accents

---

Tech Stack

---

Project Structure

mystory/
├── app/
│   ├── _layout.tsx          # Root layout — auth guard + navigation
│   ├── login.tsx            # Onboarding screen
│   ├── (tabs)/
│   │   ├── _layout.tsx      # Tab bar (Home · Create · Profile)
│   │   ├── index.tsx        # Home — story list
│   │   ├── create.tsx       # Create story form
│   │   └── profile.tsx      # Profile & stats
│   └── story/
│       └── [id].tsx         # Comic story viewer
├── lib/
│   ├── types.ts             # TypeScript interfaces
│   ├── storage.ts           # AsyncStorage helpers
│   └── gemini.ts            # Gemini API integration
└── images/                  # App screenshots

---

Getting Started

Prerequisites

• Node.js 18+
• Expo Go app on your phone, or an iOS/Android simulator
• A Gemini API key — get one free at aistudio.google.com

Installation

# Clone the repository
git clone https://github.com/Hitesh-s0lanki/ai-story-planner.git
cd ai-story-planner

# Install dependencies
npm install

Environment Setup

Create a .env file in the project root:

EXPO_PUBLIC_GEMINI_API_KEY=your_gemini_api_key_here

The EXPO_PUBLIC_ prefix is required for Expo to expose the variable to client-side code.

Run the App

# Start the development server
npx expo start

# Run on iOS simulator
npx expo start --ios

# Run on Android emulator
npx expo start --android

---

How It Works

Story Generation Flow

User fills form
      │
      ▼
Gemini (gemini-2.0-flash)
generates 5-panel story as structured JSON
      │
      ▼
Gemini (gemini-2.0-flash-preview-image-generation)
generates character portraits (base64 inline)
      │
      ▼
Story saved to AsyncStorage
      │
      ▼
Comic viewer opens

Data Models

Story {
  id         string
  title      string
  characters Character[]
  panels     Panel[]
  createdAt  string        // ISO date string
}

Panel {
  imageBase64?      string // base64 data URI (optional)
  imageDescription  string // illustrated placeholder fallback
  dialogue          string
  narration         string
  characterName?    string
}

---

Screens

---

Environment Variables

---

License

MIT