📚 Interactive Story-Telling App 📚

Where Every Choice Writes Your Destiny

📢 Interactive Experience | 📽️ Spotlight Project | 🎯 MERN Stack Powered

🎯 What Makes This Special?

    ╔═══════════════════════════════════════════════╗
    ║  🌙 DARK/LIGHT MODE  │   🎭 MULTIPLE ENDINGS  ║
    ║  📱 RESPONSIVE UI    │   ⚡ REAL-TIME UPDATES ║
    ║  🚀 MERN STACK       │   🎨 BEAUTIFUL DESIGN  ║
    ╚═══════════════════════════════════════════════╝

Transform static storytelling into an interactive journey where YOU control the narrative! Experience branching storylines, dynamic character interactions, and endings that change based on your choices.

🛠️ Power Stack

_MongoDB
_{Story Database}

_Express.js
_{API Backend}

_React
_{Interactive UI}

_Node.js
_{Server Runtime}

🎮 App Flow Architecture

graph TB
    A[🎬 Story Begins] --> B[👤 Enter Your Name]
    B --> C[🌲 Forest Adventure]
    C --> D[🧙‍♂️ Talk to Aniket]
    C --> E[🧝‍♂ Talk to Soham]
    C --> F[🏯 Talk to Yashraj]
    C --> G[🏞️ Talk to Krishna]
    
    D --> H[🏞️ Hidden River]
    E --> I[🕳️ Mysterious Cave]
    F --> J[⛩️ Ancient Temple]
    G --> K[🏔️ Mountain Path]
    
    H --> L[✨ Magical Fish Ending]
    I --> M[💎 Crystal Discovery Ending]
    J --> N[📜 Ancient Secrets Ending]
    K --> O[👑 Kingdom View Ending]
    
    style A fill:green
    style L fill:orange
    style M fill:red
    style N fill:olive
    style O fill:green
    style D fill:purple
    style E fill:purple
    style F fill:purple
    style G fill:purple
    style H fill:blue
    style I fill:brown
    style J fill:yellow
    style K fill:gray
    style B fill:white
    style C fill:green

🚀 Lightning Fast Setup

⚡ Get Running !

📋 Prerequisites Checklist

✅ Node.js (v14+)
✅ MongoDB (local or Atlas)
✅ npm
✅ Git

🎯 Installation Commands

🔧 Backend Setup

# 📥 Clone Repository
git clone https://github.com/soham-kyo/Interactive-Story-Telling-App.git
cd Interactive-Story-Telling-App

# 🔙 Backend Configuration  
cd backend
npm install

# 🔐 Environment Setup
echo "MONGO_URI=your_connection_string" > .env

# 🚀 Launch Backend
npm start (or) node server.js

🎨 Frontend Setup

# 🎨 Frontend Configuration
cd ../frontend
npm install

# 🌐 Start Development Server
npm start

# 🎉 Open Browser
# http://localhost:3000

📊 Project Architecture


interactive-story-telling-app/
├── 📁 frontend/
│   ├── 📁 public/
│   │   ├── 🖼️ photos
│   │   ├── 📑 manifest.json
    │   └── 📄 index.html
│   ├── 📁 src/
│   │   ├── 📁 components/
│   │   │   └── 📄 StoryScreen.js
│   │   ├── 📄 App.js
│   │   ├── 🎨 App.css
│   │   ├── 🎨 index.css
│   │   ├── 📄 index.js
│   │   ├── 📄 reportWebVitals.js
│   │   ├── 📄 setupTests.js
│   │   └── 📑 App.test.js
│   ├── 📦 package-lock.json
│   └── 📦 package.json
├── 📁 backend/
│   ├── 📁 models/
│   │   └── 📄 Story.js
│   ├── 📁 routes/
│   │   └── 📄 storyRoutes.js
│   ├── 🔐 .env
│   ├── 📄 forestStoryData.js
│   ├── 🌱 seed.js
│   ├── 🚀 server.js 
│   ├── 🔒 .env.sample
│   ├── 📦 package.json
│   └── 🔒 package-lock.json
├── 🚫 .gitignore
├── 📜 LICENSE (MIT)
└── 📝 README.md

🎭 Story Features Showcase

🌟 Feature	📝 Description	🎯 Impact
🌙 Theme Toggle	Seamless dark/light mode switching	Enhanced user experience
🎭 Branching Stories	Multiple story paths and endings	High replay value
📱 Responsive Design	Perfect on all device sizes	Universal accessibility
⚡ Real-time Updates	Instant story progression	Smooth user flow
🎨 Visual Storytelling	Rich images for each scene	Immersive experience

🚀 API Reference

🛣️ Endpoint	🔧 Method	📋 Description	🎯 Response
`/api/stories`	`GET`	Fetch all stories	`📚 Story Array`
`/api/stories/:id`	`GET`	Get specific story	`📖 Single Story`
`/api/stories`	`POST`	Create new story	`✅ Created Story`