UniFlow – Real-Time University Class & Learning Platform

Technical Appendix

UniFlow is a modular single-page application built on Quasar and Vue 3, with Firebase Authentication and Cloud Firestore as a serverless backend. Route transitions pass through a boot-plugin guard that checks authentication and role, views dispatch to domain-specific Pinia stores, and the stores talk to Firebase through a service layer.

Architecture

flowchart TD
    subgraph Client ["Client (Vue 3 + Quasar)"]
        Guard["boot/auth.js Route Guard"]
        Router["Vue Router (44 routes, 9 modules)"]
        Views["77 Vue Components"]
        Guard --> Router --> Views
    end

    subgraph State ["State (Pinia)"]
        Stores["10 Domain Stores"]
        Persist["Persisted State Plugin"]
        Views --> Stores --> Persist
    end

    subgraph Firebase ["Firebase"]
        Auth["Authentication"]
        Svc["Service Layer (queries, atomic counters)"]
        DB[("Cloud Firestore (12 entities)")]
        Stores --> Svc --> DB
        Stores --> Auth
    end

Request flow: Route (modules/*/routes.js) → Guard (boot/auth.js) → Page/Component → Pinia Store → Firebase Service → Firestore.

Module Map

Route Protection

1. Each protected route declares meta.requiresAuth and a meta.roles array in its module’s routes.js.
2. The boot/auth.js plugin runs before each navigation and compares the route metadata with the current role in the Pinia user store.
3. Unauthenticated users are sent to /auth/login; users without the right role are sent to /unauthorized, before the view mounts.

Session Numbering

Session creation runs a Firestore transaction in firebaseService.js that reads and increments a single metadata/counters document, so two sessions created at the same time never receive the same number. The cost is one extra read and write per session creation.

By the Numbers

State Layer Convention

Each store is split into index.js (state and getters) and action.js (mutations and Firestore calls). Components never call the Firestore SDK directly, which keeps loading and error handling in one place per domain.