📚 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

Loading

---

🚀 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

---

🏆 Achievements

---

📞 Connect & Support

---

📜 License

This project is licensed under the MIT License 📋
Feel free to use, modify, and distribute!

---

⭐ Found this project helpful? Give it a star!

🚀 Built by Soham Patil

---

---