📝 Real-Time Collaborative Notes App

A full-stack MERN application with real-time collaboration features using Socket.IO.

✨ Features

• ✅ JWT Authentication
• ✅ Real-time note editing with Socket.IO
• ✅ Online users tracking
• ✅ Role-based access (creator can edit, others read-only)
• ✅ Optimistic UI updates
• ✅ Auto-save with debouncing
• ✅ Responsive design
• ✅ MongoDB persistence

🚀 Setup Instructions

Clone Project

git clone https://github.com/VivekDev01/LiveDraft.git
cd LiveDraft

Backend Setup

1. Install dependencies:

cd backend
npm install

2. Create .env file in backend folder:

PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key_here

3. Start the backend server:

npm run start

Server will run on http://localhost:5000

Frontend Setup

1. Install dependencies:

cd frontend
npm install

2. Start the development server:

npm run start

Frontend will run on http://localhost:3000

🔑 API Endpoints

Authentication

• POST /auth/signup - Register new user
• POST /auth/login - Login user

Notes

• GET /notes - Get all notes for logged-in user
• GET /notes/:id - Get specific note
• POST /notes - Create new note
• DELETE /notes/:id - Delete note (creator only)

🔌 Socket.IO Events

Client → Server

• user-online - Announce user is online
• join-note - Join a note room
• leave-note - Leave a note room
• note-update - Update note content

Server → Client

• online-users - Broadcast online users list
• note-updated - Broadcast note updates to room

🎯 How It Works

1. Authentication: Users login with email/password, receive JWT token
2. Dashboard: Shows all notes created by the user
3. Real-time Editing:
   • Creator can edit notes
   • Changes broadcast to all viewers in real-time
   • Auto-save with 500ms debounce
   • Optimistic UI updates
4. Online Users: Socket.IO tracks and displays online users
5. Role-based Access: Only note creator can edit, others have read-only access

🧪 Testing

Create Test User via Signup Endpoint

curl -X POST http://localhost:5000/auth/signup \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Test User",
    "email": "test@example.com",
    "password": "password123",
  }'

Login

curl -X POST http://localhost:5000/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@example.com",
    "password": "password123"
  }'

💡 Tips

• Open multiple browser windows/tabs to test real-time collaboration
• Use incognito mode to test with different users
• Check browser console for Socket.IO connection logs
• MongoDB connection string can be from MongoDB Atlas or local MongoDB

🛠️ Tech Stack

• Frontend: React.js, React Router, Socket.IO Client
• Backend: Node.js, Express.js, Socket.IO
• Database: MongoDB
• Authentication: JWT, Bcrypt
• Real-time: Socket.IO

📝 Notes

• Notes are tied to the creator's user ID
• Real-time updates use Socket.IO rooms for efficient broadcasting
• Debouncing prevents excessive database writes
• JWT tokens expire after 2 days
• CORS is enabled for local development

🚧 Future Enhancements

• Search and filter notes
• Rich text editor
• File attachments
• Note sharing with specific users
• Note categories/tags
• Dark mode