White-Board
Application
Prepared by:
Muhammad Hasan
(SP24-BSSE-0101)
Muhammad Ali
(SP24-BSSE-0087)
Shoaib Ahmed Abbasi (SP24-BSSE-0080)
PAGE 1
We will cover these
 Introduction
 Problem Statement & Objective
 Product overview
 Key Features
Agenda
 User Types
 System Architecture
 Diagrams
 UI (Figma)
 Future Enhancements
PAGE 2
Introduction
What is the White-Board Application?
An interactive, collaborative platform to create, edit,
and share drawings, diagrams, and notes in real time.
Target Users:
 Professionals
 Students
 Educators
PAGE 3
Problem Statement & Objective
Objective:
Problem:
Lack of interactive and real-time digital
whiteboard tools with modern
collaboration and AI features.
 Enable multi-user collaboration
 Support handwriting & shape
recognition
 Integrate cloud storage
 AI suggestions
 Voice Note-taking
PAGE 4
Product Overview
 Real-time multi-user collaboration
 Drawing tools: freehand, shapes, sticky
notes
 Save/Export: PDF, PNG, SVG
 AI assisted Diagrams
 Voice to text support
 Available across web, mobile and
Desktop
PAGE 5
 Students: Brainstorming, Group projects
User Type
 Teachers: Interactive lessons, Annotations
 Professionals: Remote meetings, Sessions
PAGE 6
 Frontend (React + Tailwind)
Technologies
to build
Application
 Backend (Node.js + Express)
 Database (MongoDB)
 Real-time collaborations (Firebase)
 File storage (AWS S3)
PAGE 7
Use case
Diagram
PAGE 8
Activity
Diagram
PAGE 9
Sequential
Diagram
Explaining how the collaboration
happening between two users.
PAGE 10
Entity
Relationship
Diagram(ERD)
PAGE 11
Data Flow
Diagram(DFD)
PAGE 12
UML Class
diagram
PAGE 13
Gantt Chart
PAGE 14
UI Design using Figma
Thanks.
PAGE 16