Skip to content

Agent-A345/CoLab

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🤝 CoLab — Collaborative Workspace

A modern real-time collaborative workspace web app built using HTML, CSS, and JavaScript, enabling multiple users (across tabs) to edit shared documents, manage tasks, create notes, and track activity with live sync using localStorage-based communication.

🚀 Features

  • Real-Time Collaboration – Sync changes instantly across multiple tabs/users.
  • Shared Document Editor – Edit a common document with live updates.
  • Conflict Detection System – Detects simultaneous edits and provides merge/overwrite options.
  • Typing Indicator – Shows when another user is actively editing.
  • User Presence System – Displays active users with avatars and online count.
  • 8Heartbeat Mechanism – Keeps track of active users and removes inactive ones.
  • Shared To-Do List – Add, complete, and delete tasks collaboratively.
  • Shared Notes System – Create and edit notes across users.
  • Activity Log – Tracks all user actions with timestamps.
  • Live Notifications – Displays real-time updates of user actions.
  • Theme Toggle – Switch between dark and light modes.
  • Cross-Tab Sync Engine – Uses localStorage events for real-time updates.

📂 Project Structure

CoLab/
├── index.html
├── script.js
├── style.css

💡 Technologies Used

  • HTML5
  • CSS3
  • JavaScript

🛠️ How to Run

  1. Clone the repository:
git clone https://github.com/Agent-A345/CoLab.git

  1. Open the project and navigate to the file:
cd index.html

  1. Run the game in any modern browser

🎮 How to Use

Use Shared Editor

  • Open Editor tab
  • Start typing in shared document
  • Changes sync across tabs instantly

View Active Users

  • Check top bar
  • See online users and avatars

Track Activity

  • Open Activity Log
  • View all actions with timestamps

Manage Todos

  • Add tasks
  • Mark tasks complete
  • Delete tasks

View Notifications

  • Check live notification panel
  • See user actions in real time

🎯 App Objective

CoLab helps users:

  • Simulate real-time collaboration
  • Understand multi-user systems
  • Learn conflict resolution strategies
  • Manage shared tasks and notes
  • Visualize collaborative workflows

🔄 Future Enhancements

  • WebSocket-based real-time backend
  • User authentication system
  • Cloud sync support
  • Role-based permissions

📜 License

This project is licensed under the MIT License.

About

A modern real-time collaborative workspace web app built using HTML, CSS, and JavaScript, enabling multiple users (across tabs) to edit shared documents, manage tasks, create notes, and track activity with live sync using localStorage-based communication.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors