Ice-Breakering Storyteller

📖 Collaborative AI Storytelling – Weave Tales Together in Real-Time!

🌟 Inspiration

Storytelling has always been a powerful way to connect people. Whether through books, movies, or interactive games, stories allow us to explore new worlds and ideas. We wanted to merge human creativity with AI-generated content to create a truly collaborative storytelling experience. Inspired by multiplayer games and AI-powered writing assistants, we set out to build an interactive real-time storytelling platform where multiple users can contribute to a story while AI enhances the narrative.

🛠 How We Built It

Our project consists of a React (Next.js) frontend and a Django backend powered by WebSockets for real-time interaction. Here's a breakdown of the tech stack:

Frontend:
- 🎨 Next.js (React) – For building an interactive user interface.
- ⚡ WebSockets – To enable real-time updates when players contribute to the story.
- 💄 Tailwind CSS – For styling the UI efficiently.
Backend:
- 🐍 Django (Python) + Django Channels – To handle real-time communication.
- 🧠 Google Gemini AI API – For generating AI-powered story continuations.
- 🌐 Daphne & ASGI – To support WebSockets in Django.

🚧 Challenges We Faced

Every project comes with its hurdles. Here are some of the major challenges we tackled:

1️⃣ WebSocket Synchronization

Ensuring that all users received updates in real-time was a challenge. We had to properly manage WebSocket connections, ensuring that messages were broadcasted efficiently without duplication.

2️⃣ Avoiding Duplicate AI Responses

Initially, AI-generated responses were being appended twice due to a combination of WebSocket messages and fetch API calls. We fixed this by ensuring AI messages were only handled via WebSocket and not added from the fetch response.

3️⃣ Player List Not Updating

A key feature was seeing all connected players in real-time. However, due to improper WebSocket event handling, new users were not being shown to others. We resolved this by broadcasting player list updates whenever a user joined or left.

4️⃣ Handling AI-generated Text Properly

The AI sometimes repeated responses or didn't seamlessly integrate with previous inputs. We refined how we sent user prompts to Gemini AI, ensuring that each story addition felt natural.

📚 What We Learned

🚀 Real-time applications require careful state management – Managing multiple users simultaneously requires proper WebSocket handling and backend synchronization.
🤖 AI-generated content needs constraints – Without guiding AI responses properly, the output can be repetitive or too random.
🎨 UI/UX is crucial for an engaging experience – A simple and intuitive design makes collaboration fun and accessible.
🔗 Integrating WebSockets with Django is powerful – Django Channels allowed us to build an interactive multiplayer experience.

🎉 The Final Product

After overcoming these challenges, we successfully built a real-time collaborative AI storytelling platform where users can: ✅ Join a game session with others.
✅ Add their own story input.
✅ Watch as AI expands their ideas into a creative tale.
✅ See updates in real-time with a chat-style interface.

This project showcases the power of AI-assisted creativity and the potential of real-time web applications. We're excited about the future possibilities for expanding this into a larger-scale interactive storytelling game! 🚀📖✨