StoryMosaic - Collaborative Storytelling Platform.

🎯 Overview

StoryMosaic is a cutting-edge collaborative storytelling platform that combines real-time collaboration with AI-powered writing assistance. Create, collaborate, and bring your stories to life with an intuitive interface and powerful features.

🌟 Features

Real-time Collaboration

• Live Editing: Multiple users can edit documents simultaneously
• Cursor Tracking: See where others are writing in real-time
• Presence Indicators: Know who's currently working on the document
• Collaborative Rooms: Create dedicated spaces for different projects

AI-Powered Writing Assistant

• Smart Completion: Get context-aware sentence suggestions
• Style Matching: AI adapts to your writing style
• Template Generation: Create story outlines instantly
• Writing Prompts: Get AI-generated creative prompts

Rich Text Editing

• Formatting Tools: Bold, italic, underline, and more
• Text Alignment: Left, center, right, and justify options
• Lists & Headers: Organize your content effectively

Document Management

• Access Control: Set specific permissions for editors and viewers
• Export Options: Download your stories in PDF format
• Template Library: Start with pre-designed templates
• Auto-Save: Never lose your work

🚀 Tech Stack

Frontend

• React 19.0.0
• Vite 6.1.0
• TipTap Editor
• Framer Motion
• Tailwind CSS
• Socket.IO Client
• Google Generative AI

Backend

• Node.js
• Express
• MongoDB
• Socket.IO
• JWT Authentication
• Google's Gemini AI API

🛠️ Installation

1. Clone the repository

   git clone https://github.com/yourusername/storymosaic.git
   cd storymosaic

2. Install dependencies

   # Frontend
   cd Frontend
   npm install
   
   # Backend
   cd ../Backend
   npm install

3. Environment Setup

   Create .env files in both Frontend and Backend directories:

   Frontend .env:

   VITE_API_URL=http://localhost:5000
   VITE_GEMINI_API_KEY=your_gemini_api_key

   Backend .env:

   MONGODB_URI=your_mongodb_uri
   JWT_SECRET=your_jwt_secret
   PORT=5000
   FRONTEND_URL=http://localhost:3000

4. Start Development Servers

   # Backend
   cd Backend
   npm run dev
   
   # Frontend
   cd Frontend
   npm run dev

📱 Usage

1. Create an Account

   • Sign up using Google Authentication
   • Set up your writer profile

2. Create a Document

   • Click "Create New Document"
   • Choose a template or start from scratch
   • Set document permissions

3. Collaborate

   • Share document link with collaborators
   • See real-time changes
   • Use AI assistance for suggestions

4. Export

   • Download as PDF
   • Share with specific access levels

🔒 Security Features

• JWT-based authentication
• Secure socket connections
• Role-based access control
• Google OAuth integration

🎨 UI/UX Features

• Responsive design for all devices
• Dark/Light mode support
• Smooth animations with Framer Motion
• Intuitive document management
• Real-time collaboration indicators

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create your feature branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m 'Add some AmazingFeature'

4. Push to the branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

📝 Development Guidelines

• Follow the existing code style
• Write meaningful commit messages
• Add appropriate comments
• Update documentation as needed
• Test thoroughly before submitting PRs

🐛 Bug Reports

Please use the GitHub Issues tab to report bugs. Include:

• Detailed description of the issue
• Steps to reproduce
• Expected vs actual behavior
• Screenshots if applicable

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Google Gemini AI for AI capabilities
• Google Cloud Console for google authentication
• Socket.IO for real-time features
• Framer Motion for animations
• Tailwind CSS for styling

👨‍💻 Creators

Vishv Boda

Deep Patel

Subrat Jain

Nirav Shah

---

Made By the CodePirates at Hackathon at IIT Gandhinagar 2025