UNIFLOW – Interactive Class Management & Collaborative Learning Platform

Executive Summary

UNIFLOW is a real-time collaborative class management platform tailored for university students, faculty members, and academic administrators. Built on top of the Quasar Framework (Vue 3) and powered by Firebase Firestore, UNIFLOW centralizes lecture delivery, group collaboration, assignment submissions, code playground sharing, and smart note-taking into a single cohesive ecosystem.

Architecture

System Topology & Client-to-Cloud Flow

flowchart TB
    subgraph Client ["Frontend — Quasar Framework (Vue 3 + Vite)"]
        UI["Quasar UI Components<br/>(Dialogs, Tables, Drawers, Steppers)"]
        ROUTER["Vue Router 4<br/>(Auth & Role Guards)"]
        PINIA["Pinia Modular Stores<br/>(Auth, Session, Group, Task, Note, Todo, User, Admin)"]
        CHARTS["Analytics Engine<br/>(ApexCharts & Chart.js)"]
    end

    subgraph Auth_Layer ["Firebase Authentication"]
        FB_AUTH["Firebase Auth<br/>(Email / Password & Google OAuth)"]
        BCRYPT["bcryptjs Hash Utilities"]
    end

    subgraph Cloud_DB ["Persistence & Real-time Layer (Cloud Firestore)"]
        SEC_RULES["Firestore Security Rules<br/>(Role-Based Access Control)"]
        COLL_FACULTY[("faculties / departments / courses")]
        COLL_GROUPS[("groups / resources")]
        COLL_SESSIONS[("sessions (Live State & Tasks)")]
        COLL_TASKS[("tasks / grading_rubrics / criteria")]
        COLL_NOTES[("notes / todos / items")]
    end

    UI --> PINIA
    ROUTER --> PINIA
    PINIA -->|"Auth Tokens"| FB_AUTH --> BCRYPT
    PINIA -->|"Real-Time Subscriptions (onSnapshot)"| SEC_RULES
    SEC_RULES --> COLL_FACULTY & COLL_GROUPS & COLL_SESSIONS & COLL_TASKS & COLL_NOTES
    COLL_TASKS & COLL_SESSIONS -->|"Aggregated Metrics"| CHARTS

Data Schema & Relationships

UNIFLOW models academic structures, real-time sessions, and grading rubrics inside Cloud Firestore:

erDiagram
    FACULTY ||--o{ DEPARTMENT : contains
    DEPARTMENT ||--o{ COURSE : offers
    COURSE ||--o{ GROUP : organizes
    GROUP ||--o{ RESOURCE : shares
    USER ||--o{ GROUP : joins
    USER ||--o{ SESSION : creates
    SESSION ||--o{ TASK : contains
    TASK ||--|| GRADING_RUBRIC : defines
    GRADING_RUBRIC ||--o{ CRITERION : specifies
    USER ||--o{ NOTE : authors
    USER ||--o{ TODO : tracks
    TODO ||--o{ ITEM : contains

    FACULTY {
        string code PK
        string initial UK
        string name
        string headOfFaculty
    }

    DEPARTMENT {
        string code PK
        string facultyInitial FK
        string name
        number studentCount
    }

    COURSE {
        string code PK
        string departmentInitial FK
        string name
        number credits
    }

    GROUP {
        string groupID PK
        string groupName
        string courseCode FK
        string ownerId FK
        string[] members
        number maxMembers
    }

    SESSION {
        number sessionID PK
        string sessionName
        string createdBy FK
        boolean isActive
        string playgroundLink
        string[] materialLinks
        object[] questions
    }

    TASK {
        number taskID PK
        string title
        string authorId FK
        timestamp deadline
        number totalMarks
    }

    GRADING_RUBRIC {
        string rubricId PK
        number maxPoints
    }

    CRITERION {
        number criterionId PK
        string description
        number maxPoints
    }

Core Technical Decisions

Decision 1 — Pinia Modular Domain Stores with Persisted State

Decision 2 — Real-Time Active Classroom State Synchronization

sequenceDiagram
    autonumber
    actor Teacher as Instructor
    participant UI as Quasar Session Dashboard
    participant Store as useSessionStore (Pinia)
    participant FS as Cloud Firestore
    actor Student as Student Client

    Teacher->>UI: Launch Live Coding Challenge (URL + Questions)
    UI->>Store: updateSessionState(sessionId, payload)
    Store->>FS: doc('sessions', id).update({ isActive: true, playgroundLink: url })
    FS-->>Student: onSnapshot() Event Triggered
    Student->>Student: Reactive UI renders live coding link & question panel
    Student->>FS: Submit answer / code attachment
    FS-->>Teacher: Live submission count increments on instructor dashboard

Visual Workflows & Architecture Wireframes

1. Interactive Class Session Wireframe

+----------------------------------------------------------------------------------------------------+
|  [Logo] UNIFLOW               |  [Classes]  |  [Groups]  |  [Tasks]  |  [Notes]    | (Profile: Teacher)|
+----------------------------------------------------------------------------------------------------+
|                                                                                                    |
|  SESSION: CS401 — Advanced Distributed Systems (Live Active)               [ End Session Button ]  |
|                                                                                                    |
|  +-- INTERACTIVE LECTURE WORKSPACE --------------------------------------------------------------+ |
|  |                                                                                               | |
|  |  +-- CODING PLAYGROUND EMBED --------------+  +-- LIVE QUESTION & TASK QUEUE ---------------+ | |
|  |  | Playground Link: [ compiler.io/p/cs401 ] |  | Q1. Implement Raft Consensus Leader Election | |
|  |  | Mode: Interactive Live Collaboration      |  | Marks: [ 10 Pts ]  | Time Limit: [ 15 Mins ] | |
|  |  | Status: [ ACTIVE - 42 Students Joined ]  |  | Submissions Received: 28 / 42                | |
|  |  |                                         |  +---------------------------------------------+ | |
|  |  | [ Open in Fullscreen ] [ Share Screen ] |  | Attached Resources:                         | | |
|  |  |                                         |  | - [PDF] raft-extended.pdf                   | | |
|  |  |                                         |  | - [Video] MIT 6.824 Lecture 06              | | |
|  |  +-----------------------------------------+  +---------------------------------------------+ | |
|  +-----------------------------------------------------------------------------------------------+ |
|                                                                                                    |
|  +-- CONNECTED PARTICIPANTS & STUDY GROUPS (42 Online) -------------------------------------------+ |
|  | [x] Group A (Lab 1) - 4/4 Online | [x] Group B (Lab 1) - 4/4 Online | [x] Group C (Lab 2) - 3/4 Online |
|  +-----------------------------------------------------------------------------------------------+ |
+----------------------------------------------------------------------------------------------------+

2. Multi-Criterion Grading Rubric Matrix

+-- ASSIGNMENT GRADING RUBRIC BUILDER -------------------------------------------------------------+
| Task: Distributed Key-Value Store Submission           | Total Marks: 100 Pts                    |
+--------------------------------------------------------------------------------------------------+
| #   | Criterion Description                       | Max Points | Evaluation Notes                |
|-----|---------------------------------------------|------------|---------------------------------|
| 01  | RPC Network Protocol & Heartbeat Handling   | 30 Pts     | Handles network partition drop  |
| 02  | Concurrent Data Serialization & Mutex Locks | 30 Pts     | Race condition prevention       |
| 03  | Unit & Integration Test Coverage            | 20 Pts     | Min 85% branch coverage passed  |
| 04  | Code Quality & Architecture Documentation   | 20 Pts     | Clean modular abstractions      |
+--------------------------------------------------------------------------------------------------+
| Settings: [x] Allow Late Submissions (-5% per day)  | [x] Enable Peer Review (2 Reviewers/Student)|
+--------------------------------------------------------------------------------------------------+

What I Built (Personal Contributions)

• Engineered Full-Stack Quasar SPA: Developed modular components, routes, and responsive UI layouts using Quasar Framework v2 and Vue 3.
• Architected Firestore Document Schemas: Designed 4-tier relational document schemas, nested collections, and optimized queries for Faculties, Departments, Courses, Groups, and Sessions.
• Implemented 8 Modular Pinia Stores: Built domain-isolated state stores with persisted local state caching (pinia-plugin-persistedstate).
• Built Live Interactive Session Engine: Wired real-time Firestore listeners (onSnapshot) to sync coding playground URLs, questions, and material links across active sessions.
• Developed Structured Assignment Rubrics: Engineered the multi-criterion assignment grading system with customizable evaluation weights and peer-review toggle flags.
• Integrated Institutional Analytics: Built performance visualization dashboards utilizing ApexCharts and Chart.js to track student progress and session participation.

Future Roadmap

timeline
    title UNIFLOW Evolution Roadmap
    section Completed
        Quasar & Firestore Core : Full platform architecture and live session engine
        Grading Rubrics & Pinia : Structured assessment engine and 8 domain stores
    section Next Phase
        In-App WebRTC Video : Native peer-to-peer audio/video streaming
        AI Code Feedback : Automated syntax & logic analysis on task submission
        Calendar Sync : Bi-directional iCal & Google Calendar deadline synchronization