Merge pull request #175 from CS3219-AY2425S1/add-diagram

Add diagram for Final Report

Author: ZD292

docs/frontend-service/component-hierachy-diagram.mmd

@@ -0,0 +1,52 @@
+flowchart TD
+    subgraph Layout ["Layout Components"]
+        style Layout fill:#e6e6ff,stroke:#333
+        RL[RootLayout]
+        ML[MainLayout]
+        CL[CollaborationLayout]
+    end
+
+    subgraph Feature ["Feature Components"]
+        style Feature fill:#ccffcc,stroke:#333
+        MC[MainComponent]
+        CE[CodeEditor]
+        PS[ProblemSelection]
+        AF[AuthForms]
+        MM[MatchMaking]
+    end
+
+    subgraph Shared ["Shared UI Components"]
+        style Shared fill:#ffccff,stroke:#333
+        subgraph Base ["Base UI"]
+            BTN[Button]
+            CARD[Card]
+            DLG[Dialog]
+            TOAST[Toast]
+        end
+        subgraph Complex ["Complex UI"]
+            NAV[Navbar]
+            PROB[ProblemCard]
+            DIA[Dialogs]
+        end
+    end
+
+    %% Layout connections
+    RL --> ML
+    RL --> CL
+    ML --> MC
+    CL --> CE
+
+    %% Feature usage of shared components
+    MC --> PROB
+    MC --> DIA
+    CE --> BTN
+    PS --> CARD
+    AF --> DLG
+    MM --> TOAST
+
+    %% Complex components using base components
+    NAV --> BTN
+    PROB --> CARD
+    DIA --> DLG
+
+    classDef default fill:white,stroke:#333,stroke-width:1px

docs/frontend-service/directory-hierachy-diagram.mmd

@@ -0,0 +1,75 @@
+graph TD
+    subgraph "Frontend Root"
+        ROOT[peerprep-fe]
+    end
+
+    subgraph "Source Code"
+        SRC[src/]
+    end
+
+    subgraph "Pages & Routes"
+        APP[app/]
+        MAIN[main/]
+        COLLAB[collaboration/]
+        ADMIN[admin/]
+    end
+
+    subgraph "Shared Components"
+        COMP[components/]
+        UI[ui/]
+        NAV[navbar/]
+        PROB[problems/]
+        DIA[dialogs/]
+    end
+
+    subgraph "Application Logic"
+        STATE[state/]
+        HOOKS[hooks/]
+        LIB[lib/]
+        TYPES[types/]
+    end
+
+    %% Root level connections
+    ROOT --> SRC
+    ROOT --> CONFIG[Configuration Files]
+
+    %% Source directory connections
+    SRC --> APP
+    SRC --> COMP
+    SRC --> STATE
+    SRC --> HOOKS
+    SRC --> LIB
+    SRC --> TYPES
+
+    %% Page routes
+    APP --> MAIN
+    APP --> COLLAB
+    APP --> ADMIN
+
+    %% Component organization
+    COMP --> UI
+    COMP --> NAV
+    COMP --> PROB
+    COMP --> DIA
+
+    %% State management
+    STATE --> AUTH[useAuthStore]
+    STATE --> COLLABSTORE[useCollaborationStore]
+    STATE --> QSTORE[useQuestionStore]
+
+    %% Configuration files
+    CONFIG --> CF1[components.json]
+    CONFIG --> CF2[package.json]
+    CONFIG --> CF3[tailwind.config.ts]
+
+    classDef root fill:#2374ab,stroke:#fff,stroke-width:2px,color:#fff
+    classDef main fill:#48a9a6,stroke:#fff,stroke-width:2px,color:#fff
+    classDef components fill:#d4042d,stroke:#fff,stroke-width:2px,color:#fff
+    classDef logic fill:#7b2cbf,stroke:#fff,stroke-width:2px,color:#fff
+    classDef config fill:#f7b32b,stroke:#fff,stroke-width:2px,color:#fff
+
+    class ROOT root
+    class SRC,APP,MAIN,COLLAB,ADMIN main
+    class COMP,UI,NAV,PROB,DIA components
+    class STATE,HOOKS,LIB,TYPES,AUTH,COLLABSTORE,QSTORE logic
+    class CONFIG,CF1,CF2,CF3 config

docs/frontend-service/frontend-model-view-controller.mmd

@@ -0,0 +1,63 @@
+flowchart TD
+ subgraph subGraph0["State Stores"]
+        AS["AuthStore"]
+        CS["CollaborationStore"]
+        QS["QuestionStore"]
+  end
+ subgraph subGraph1["Data Models"]
+        UM["User Model"]
+        PM["Problem Model"]
+        CM["Collaboration Model"]
+  end
+ subgraph subGraph2["Model Layer"]
+        subGraph0
+        subGraph1
+  end
+ subgraph subGraph3["Layout Views"]
+        RL["RootLayout"]
+        ML["MainLayout"]
+        CL["CollabLayout"]
+  end
+ subgraph subGraph4["Feature Views"]
+        CE["CodeEditor"]
+        PS["ProblemSelection"]
+        AF["AuthForms"]
+  end
+ subgraph subGraph5["Shared Views"]
+        BU["Base UI Components"]
+        CU["Complex UI Components"]
+  end
+ subgraph subGraph6["View Layer"]
+        subGraph3
+        subGraph4
+        subGraph5
+  end
+ subgraph subGraph7["State Controllers"]
+        AC["Auth Controller"]
+        CC["Collab Controller"]
+        QC["Question Controller"]
+  end
+ subgraph subGraph8["Event Controllers"]
+        EC["Event Handlers"]
+        WC["WebSocket Controller"]
+        YC["YJS Controller"]
+  end
+ subgraph subGraph9["Controller Layer"]
+        subGraph7
+        subGraph8
+  end
+    AS --> AC
+    CS --> CC
+    QS --> QC
+    AC --> AF
+    CC --> CE
+    QC --> PS
+    EC --> BU & CU
+    WC --> CE
+    YC --> CE
+    UM --> AS
+    PM --> QS
+    CM --> CS
+
+
+

docs/frontend-service/frontend-observer-patten.mmd

@@ -0,0 +1,57 @@
+graph TD
+    subgraph Model[Model Layer]
+        style Model fill:#f9f,stroke:#333,stroke-width:2px
+        subgraph Stores[State Management]
+            AS[Auth Store]
+            CS[Collab Store]
+            QS[Question Store]
+        end
+        subgraph External[External Data]
+            WS[WebSocket]
+            YJS[YJS Doc]
+            API[REST API]
+        end
+    end
+
+    subgraph View[View Layer]
+        style View fill:#bbf,stroke:#333,stroke-width:2px
+        subgraph Pages[Page Components]
+            CP[Collaboration Page]
+            MP[Main Page]
+            NB[Navbar]
+        end
+        subgraph Core[Core Components]
+            CE[Code Editor]
+            PS[Problem Selection]
+            LS[Language Selector]
+            AS[Audio Sharing]
+        end
+    end
+
+    subgraph Controller[Controller Layer]
+        style Controller fill:#bfb,stroke:#333,stroke-width:2px
+        subgraph Handlers[Event Handlers]
+            EH[Editor Mount]
+            CH[Client Connect]
+            MH[Mouse Events]
+        end
+        subgraph Logic[Business Logic]
+            RT[Real-time Sync]
+            SS[Session State]
+            AM[Auth Management]
+        end
+    end
+
+    %% Data Flow
+    AS --> AM --> NB
+    CS --> SS --> CE
+    QS --> PS
+    WS & YJS --> RT --> CE
+    API --> PS
+
+    %% Event Flow
+    EH --> CE
+    CH --> CE
+    MH --> CP
+
+    classDef default fill:#fff,stroke:#333,stroke-width:1px

docs/frontend-service/state-management-store-diagram.mmd

@@ -0,0 +1,46 @@
+graph TD
+    %% State Stores
+    subgraph StateStores["State Management Stores"]
+        AuthStore[AuthStore]
+        CollabStore[CollaborationStore]
+        QuestionStore[QuestionStore]
+    end
+
+    %% Components with State Usage
+    subgraph Components["Key Components"]
+        Navbar[Navbar]
+        MainComponent[MainComponent]
+        CollabEditor[CollaborationEditor]
+        RejoinSession[RejoinSession]
+    end
+
+    %% External Services
+    subgraph External["External Services"]
+        API[API Service]
+        WebSocket[WebSocket Service]
+        YJS[YJS Collaboration]
+    end
+
+    %% State Flow
+    AuthStore --> |User Auth State|Navbar
+    AuthStore --> |User Info|CollabEditor
+    
+    CollabStore --> |Match ID|RejoinSession
+    CollabStore --> |Collaboration State|CollabEditor
+    
+    QuestionStore --> |Problem Data|MainComponent
+    QuestionStore --> |Selected Problem|CollabEditor
+
+    %% External Communications
+    Navbar --> |Login/Logout|API
+    CollabEditor --> |Real-time Updates|WebSocket
+    CollabEditor --> |Document Sync|YJS
+    MainComponent --> |Fetch Problems|API
+
+    %% Component Interactions
+    MainComponent --> |Problem Selection|CollabEditor
+    RejoinSession --> |Session Recovery|CollabEditor
+
+    style StateStores fill:#f9f,stroke:#333,stroke-width:2px
+    style Components fill:#bbf,stroke:#333,stroke-width:2px
+    style External fill:#dfd,stroke:#333,stroke-width:2px

docs/matching-service/matching-service-architecture.mmd

@@ -0,0 +1,32 @@
+stateDiagram-v2
+    [*] --> ReceiveMatchRequest: User initiates match
+    
+    state "Topic Queue Phase" as TopicPhase {
+        ReceiveMatchRequest --> CheckTopicMatch: Check topic queue
+        CheckTopicMatch --> TopicMatched: Match found
+        CheckTopicMatch --> WaitInTopicQueue: No match
+        WaitInTopicQueue --> TimeoutTopic: Wait 15s
+    }
+
+    state "Difficulty Queue Phase" as DiffPhase {
+        TimeoutTopic --> CheckDifficultyMatch: Transfer to difficulty queue
+        CheckDifficultyMatch --> DifficultyMatched: Match found
+        CheckDifficultyMatch --> WaitInDifficultyQueue: No match
+        WaitInDifficultyQueue --> TimeoutDifficulty: Wait 45s
+    }
+
+    TopicMatched --> NotifyUsers: Generate matchId
+    DifficultyMatched --> NotifyUsers
+    TimeoutDifficulty --> NoMatchNotification
+
+    state "User Actions" as UserActions {
+        state "Can Cancel Anytime" as CancelState
+        CancelState --> RemoveFromQueues
+    }
+
+    NotifyUsers --> RedirectToCollaboration
+    NoMatchNotification --> ReturnToMatchRoom
+    RemoveFromQueues --> ReturnToMatchRoom
+
+    RedirectToCollaboration --> [*]
+    ReturnToMatchRoom --> [*]

docs/project-management/gantt-chart.mmd

@@ -0,0 +1,45 @@
+gantt
+    dateFormat  YYYY-MM-DD
+    title CS3219 Project Timeline
+    axisFormat %Y-%m-%d
+    
+    section Sprint 1
+    Set up database                :done, s1t1, 2024-09-17, 2024-09-23
+    Display question list          :done, s1t2, 2024-09-17, 2024-09-23
+    Display question desc.         :done, s1t3, 2024-09-17, 2024-09-23
+    Login/Logout routes            :done, s1t4, 2024-09-17, 2024-09-23
+    Homepage after login           :done, s1t5, 2024-09-17, 2024-09-23
+    Link question frontend         :done, s1t6, 2024-09-17, 2024-09-23
+    K8s cloud setup                :done, s1t7, 2024-09-17, 2024-09-23
+
+    section Sprint 2
+    User service                :done, s1t7, 2024-09-24, 2024-09-30
+    Question filtering           :done, s3t1, 2024-09-24, 2024-09-30
+    Question sorting            :done, s3t2, 2024-09-24, 2024-09-30
+    
+    section Sprint 3
+    Hot reloading              :done, s3t3, 2024-10-01, 2024-10-07
+    Update user service        :done, s3t4, 2024-10-01, 2024-10-07
+    Login UI                   :done, s3t5, 2024-10-01, 2024-10-07
+
+    section Sprint 4
+    Admin question UI          :done, s4t1, 2024-10-08, 2024-10-14
+    Setup RabbitMQ            :done, s4t2, 2024-10-08, 2024-10-14
+    Continuous deployment            :done, s4t3, 2024-10-08, 2024-10-14
+
+    section Sprint 5
+    Matching service          :done, s5t2, 2024-10-15, 2024-10-21
+    Loading page             :done, s5t3, 2024-10-15, 2024-10-21
+    Frontend-RabbitMQ        :done, s5t4, 2024-10-15, 2024-10-21
+
+    section Sprint 6
+    API Gateway CRUD         :done, s6t1, 2024-10-22, 2024-10-28
+    Collaboration page         :done, s6t1, 2024-10-22, 2024-10-28
+    
+    section Sprint 7
+    Audio service            :done, s7t1, 2024-10-29, 2024-11-04
+    Code execution         :done, s7t2, 2024-10-29, 2024-11-04
+    User profile          :done, s7t3, 2024-10-29, 2024-11-04
+    OAuth                 :done, s7t4, 2024-10-29, 2024-11-04
+    Collaboration service        :done, s7t5, 2024-10-29, 2024-11-04
+    Cloud deployment     :done, s7t6, 2024-10-29, 2024-11-04