Welcome to Quirkify, a modern, real-time collaborative whiteboard application built with Flask, Flask-SocketIO, and SQLAlchemy. Quirkify enables users to create, share, and collaborate on digital whiteboards with live chat, drawing, and board management features—all wrapped in a beautiful, responsive UI.
- Real-Time Drawing: Draw on a shared canvas with instant updates for all collaborators.
- Live Chat: Communicate with other users on the board in real time.
- Board Management: Create, view, and manage multiple boards.
- Board Sharing: Share boards with other users by username or email.
- User Authentication: Secure signup, login, and logout with hashed passwords and token-based API access.
- Persistent Storage: All boards, drawings, and user data are stored in a SQLite database.
- Access Control: Only users with access can view or edit a board.
- Active User Presence: See who is currently active on your board.
- Undo/Redo & Eraser Tools: (Planned) Enhance your drawing experience.
- Responsive Design: Works beautifully on desktop and mobile devices.
- Modern UI: Neon-inspired, animated branding and a clean, intuitive interface.
real_time_whiteboard/
├── models/
│ ├── __init__.py
│ ├── board_model.py
│ └── user_model.py
├── routes/
│ ├── __init__.py
│ ├── auth.py
│ ├── board_api.py
│ ├── browser_views.py
│ └── whiteboard.py
├── static/
│ └── js/
│ └── whiteboard.js
├── templates/
│ ├── 404.html
│ ├── board_detail.html
│ ├── board_list.html
│ ├── login.html
│ ├── signup.html
│ └── whiteboard.html
├── utils/
│ └── auth.py
├── run.py
└── README.md
- Backend: Python, Flask, Flask-SocketIO, Flask-Login, Flask-Migrate, Flask-RESTful, SQLAlchemy, SQLite
- Frontend: HTML5, CSS3, JavaScript (ES6), Socket.IO, Font Awesome
- Authentication: Secure password hashing (bcrypt), token-based API authentication
- Real-Time: WebSockets via Flask-SocketIO
- Secure signup and login with hashed passwords.
- Token-based authentication for API endpoints.
- Session management with Flask-Login.
- Create, view, and delete boards.
- Boards can be shared with other users.
- Each board stores its own drawing data and access list.
- Draw lines, erase, and save your work.
- All drawing actions are broadcast to connected users in real time.
- Drawing data is persisted and reloaded on page refresh.
- Chat with other users on the same board.
- Messages are displayed in a stylish card format with sender, timestamp, and message content.
- Only users with access to the board can participate.
- See a live list of users currently viewing or editing the board.
- User presence is updated in real time as users join or leave.
- RESTful API for board CRUD operations and drawing data.
- Protected with token-based authentication.
git clone https://github.com/oops-aman/real_time_whiteboard.git
cd real_time_whiteboard
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
pip install -r requirements.txtflask db init
flask db migrate
flask db upgradepython run.pyThe app will be available at http://127.0.0.1:5000.
- Visit
/signupto create a new account. - Login at
/loginto access your boards.
- Create a new board from the board list page.
- Click a board to open the collaborative whiteboard.
- Share a board with other users by entering their username or email in the share form.
- Use the toolbar to pick colors, line width, eraser, and save your work.
- Chat in real time with other users in the chat panel.
- See who is active on your board in the "Active" user list.
- Passwords are hashed using bcrypt.
- API endpoints require a valid token (sent via header or cookie).
- Only authorized users can access or modify boards.
- Add More Drawing Tools: Extend
whiteboard.jsfor shapes, text, or images. - Integrate More Auth Providers: Add OAuth or SSO support.
- Deploy to Production: Use Gunicorn, Nginx, and a production database.
- Socket.IO Connection Issues: Ensure the backend is running and CORS is configured.
- Database Errors: Run migrations and check your SQLite file permissions.
- Board Not Found: Make sure you have access to the board or it exists.
Quirkify is inspired by the need for simple, beautiful, and real-time collaboration tools for teams, classrooms, and creative minds.
Made with ❤️ by Aman Saurav