Skip to content

Commit 92d42e5

Browse files
ZD292ZD292
authored
Merge pull request #175 from CS3219-AY2425S1/add-diagram
Add diagram for Final Report
2 parents 787caf2 + 6837b8c commit 92d42e5

11 files changed

+577
-0
lines changed

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
flowchart TD
2+
subgraph Layout ["Layout Components"]
3+
style Layout fill:#e6e6ff,stroke:#333
4+
RL[RootLayout]
5+
ML[MainLayout]
6+
CL[CollaborationLayout]
7+
end
8+
9+
subgraph Feature ["Feature Components"]
10+
style Feature fill:#ccffcc,stroke:#333
11+
MC[MainComponent]
12+
CE[CodeEditor]
13+
PS[ProblemSelection]
14+
AF[AuthForms]
15+
MM[MatchMaking]
16+
end
17+
18+
subgraph Shared ["Shared UI Components"]
19+
style Shared fill:#ffccff,stroke:#333
20+
subgraph Base ["Base UI"]
21+
BTN[Button]
22+
CARD[Card]
23+
DLG[Dialog]
24+
TOAST[Toast]
25+
end
26+
subgraph Complex ["Complex UI"]
27+
NAV[Navbar]
28+
PROB[ProblemCard]
29+
DIA[Dialogs]
30+
end
31+
end
32+
33+
%% Layout connections
34+
RL --> ML
35+
RL --> CL
36+
ML --> MC
37+
CL --> CE
38+
39+
%% Feature usage of shared components
40+
MC --> PROB
41+
MC --> DIA
42+
CE --> BTN
43+
PS --> CARD
44+
AF --> DLG
45+
MM --> TOAST
46+
47+
%% Complex components using base components
48+
NAV --> BTN
49+
PROB --> CARD
50+
DIA --> DLG
51+
52+
classDef default fill:white,stroke:#333,stroke-width:1px

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
graph TD
2+
subgraph "Frontend Root"
3+
ROOT[peerprep-fe]
4+
end
5+
6+
subgraph "Source Code"
7+
SRC[src/]
8+
end
9+
10+
subgraph "Pages & Routes"
11+
APP[app/]
12+
MAIN[main/]
13+
COLLAB[collaboration/]
14+
ADMIN[admin/]
15+
end
16+
17+
subgraph "Shared Components"
18+
COMP[components/]
19+
UI[ui/]
20+
NAV[navbar/]
21+
PROB[problems/]
22+
DIA[dialogs/]
23+
end
24+
25+
subgraph "Application Logic"
26+
STATE[state/]
27+
HOOKS[hooks/]
28+
LIB[lib/]
29+
TYPES[types/]
30+
end
31+
32+
%% Root level connections
33+
ROOT --> SRC
34+
ROOT --> CONFIG[Configuration Files]
35+
36+
%% Source directory connections
37+
SRC --> APP
38+
SRC --> COMP
39+
SRC --> STATE
40+
SRC --> HOOKS
41+
SRC --> LIB
42+
SRC --> TYPES
43+
44+
%% Page routes
45+
APP --> MAIN
46+
APP --> COLLAB
47+
APP --> ADMIN
48+
49+
%% Component organization
50+
COMP --> UI
51+
COMP --> NAV
52+
COMP --> PROB
53+
COMP --> DIA
54+
55+
%% State management
56+
STATE --> AUTH[useAuthStore]
57+
STATE --> COLLABSTORE[useCollaborationStore]
58+
STATE --> QSTORE[useQuestionStore]
59+
60+
%% Configuration files
61+
CONFIG --> CF1[components.json]
62+
CONFIG --> CF2[package.json]
63+
CONFIG --> CF3[tailwind.config.ts]
64+
65+
classDef root fill:#2374ab,stroke:#fff,stroke-width:2px,color:#fff
66+
classDef main fill:#48a9a6,stroke:#fff,stroke-width:2px,color:#fff
67+
classDef components fill:#d4042d,stroke:#fff,stroke-width:2px,color:#fff
68+
classDef logic fill:#7b2cbf,stroke:#fff,stroke-width:2px,color:#fff
69+
classDef config fill:#f7b32b,stroke:#fff,stroke-width:2px,color:#fff
70+
71+
class ROOT root
72+
class SRC,APP,MAIN,COLLAB,ADMIN main
73+
class COMP,UI,NAV,PROB,DIA components
74+
class STATE,HOOKS,LIB,TYPES,AUTH,COLLABSTORE,QSTORE logic
75+
class CONFIG,CF1,CF2,CF3 config

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
flowchart TD
2+
subgraph subGraph0["State Stores"]
3+
AS["AuthStore"]
4+
CS["CollaborationStore"]
5+
QS["QuestionStore"]
6+
end
7+
subgraph subGraph1["Data Models"]
8+
UM["User Model"]
9+
PM["Problem Model"]
10+
CM["Collaboration Model"]
11+
end
12+
subgraph subGraph2["Model Layer"]
13+
subGraph0
14+
subGraph1
15+
end
16+
subgraph subGraph3["Layout Views"]
17+
RL["RootLayout"]
18+
ML["MainLayout"]
19+
CL["CollabLayout"]
20+
end
21+
subgraph subGraph4["Feature Views"]
22+
CE["CodeEditor"]
23+
PS["ProblemSelection"]
24+
AF["AuthForms"]
25+
end
26+
subgraph subGraph5["Shared Views"]
27+
BU["Base UI Components"]
28+
CU["Complex UI Components"]
29+
end
30+
subgraph subGraph6["View Layer"]
31+
subGraph3
32+
subGraph4
33+
subGraph5
34+
end
35+
subgraph subGraph7["State Controllers"]
36+
AC["Auth Controller"]
37+
CC["Collab Controller"]
38+
QC["Question Controller"]
39+
end
40+
subgraph subGraph8["Event Controllers"]
41+
EC["Event Handlers"]
42+
WC["WebSocket Controller"]
43+
YC["YJS Controller"]
44+
end
45+
subgraph subGraph9["Controller Layer"]
46+
subGraph7
47+
subGraph8
48+
end
49+
AS --> AC
50+
CS --> CC
51+
QS --> QC
52+
AC --> AF
53+
CC --> CE
54+
QC --> PS
55+
EC --> BU & CU
56+
WC --> CE
57+
YC --> CE
58+
UM --> AS
59+
PM --> QS
60+
CM --> CS
61+
62+
63+

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
graph TD
2+
subgraph Model[Model Layer]
3+
style Model fill:#f9f,stroke:#333,stroke-width:2px
4+
subgraph Stores[State Management]
5+
AS[Auth Store]
6+
CS[Collab Store]
7+
QS[Question Store]
8+
end
9+
subgraph External[External Data]
10+
WS[WebSocket]
11+
YJS[YJS Doc]
12+
API[REST API]
13+
end
14+
end
15+
16+
subgraph View[View Layer]
17+
style View fill:#bbf,stroke:#333,stroke-width:2px
18+
subgraph Pages[Page Components]
19+
CP[Collaboration Page]
20+
MP[Main Page]
21+
NB[Navbar]
22+
end
23+
subgraph Core[Core Components]
24+
CE[Code Editor]
25+
PS[Problem Selection]
26+
LS[Language Selector]
27+
AS[Audio Sharing]
28+
end
29+
end
30+
31+
subgraph Controller[Controller Layer]
32+
style Controller fill:#bfb,stroke:#333,stroke-width:2px
33+
subgraph Handlers[Event Handlers]
34+
EH[Editor Mount]
35+
CH[Client Connect]
36+
MH[Mouse Events]
37+
end
38+
subgraph Logic[Business Logic]
39+
RT[Real-time Sync]
40+
SS[Session State]
41+
AM[Auth Management]
42+
end
43+
end
44+
45+
%% Data Flow
46+
AS --> AM --> NB
47+
CS --> SS --> CE
48+
QS --> PS
49+
WS & YJS --> RT --> CE
50+
API --> PS
51+
52+
%% Event Flow
53+
EH --> CE
54+
CH --> CE
55+
MH --> CP
56+
57+
classDef default fill:#fff,stroke:#333,stroke-width:1px

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
graph TD
2+
%% State Stores
3+
subgraph StateStores["State Management Stores"]
4+
AuthStore[AuthStore]
5+
CollabStore[CollaborationStore]
6+
QuestionStore[QuestionStore]
7+
end
8+
9+
%% Components with State Usage
10+
subgraph Components["Key Components"]
11+
Navbar[Navbar]
12+
MainComponent[MainComponent]
13+
CollabEditor[CollaborationEditor]
14+
RejoinSession[RejoinSession]
15+
end
16+
17+
%% External Services
18+
subgraph External["External Services"]
19+
API[API Service]
20+
WebSocket[WebSocket Service]
21+
YJS[YJS Collaboration]
22+
end
23+
24+
%% State Flow
25+
AuthStore --> |User Auth State|Navbar
26+
AuthStore --> |User Info|CollabEditor
27+
28+
CollabStore --> |Match ID|RejoinSession
29+
CollabStore --> |Collaboration State|CollabEditor
30+
31+
QuestionStore --> |Problem Data|MainComponent
32+
QuestionStore --> |Selected Problem|CollabEditor
33+
34+
%% External Communications
35+
Navbar --> |Login/Logout|API
36+
CollabEditor --> |Real-time Updates|WebSocket
37+
CollabEditor --> |Document Sync|YJS
38+
MainComponent --> |Fetch Problems|API
39+
40+
%% Component Interactions
41+
MainComponent --> |Problem Selection|CollabEditor
42+
RejoinSession --> |Session Recovery|CollabEditor
43+
44+
style StateStores fill:#f9f,stroke:#333,stroke-width:2px
45+
style Components fill:#bbf,stroke:#333,stroke-width:2px
46+
style External fill:#dfd,stroke:#333,stroke-width:2px

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
stateDiagram-v2
2+
[*] --> ReceiveMatchRequest: User initiates match
3+
4+
state "Topic Queue Phase" as TopicPhase {
5+
ReceiveMatchRequest --> CheckTopicMatch: Check topic queue
6+
CheckTopicMatch --> TopicMatched: Match found
7+
CheckTopicMatch --> WaitInTopicQueue: No match
8+
WaitInTopicQueue --> TimeoutTopic: Wait 15s
9+
}
10+
11+
state "Difficulty Queue Phase" as DiffPhase {
12+
TimeoutTopic --> CheckDifficultyMatch: Transfer to difficulty queue
13+
CheckDifficultyMatch --> DifficultyMatched: Match found
14+
CheckDifficultyMatch --> WaitInDifficultyQueue: No match
15+
WaitInDifficultyQueue --> TimeoutDifficulty: Wait 45s
16+
}
17+
18+
TopicMatched --> NotifyUsers: Generate matchId
19+
DifficultyMatched --> NotifyUsers
20+
TimeoutDifficulty --> NoMatchNotification
21+
22+
state "User Actions" as UserActions {
23+
state "Can Cancel Anytime" as CancelState
24+
CancelState --> RemoveFromQueues
25+
}
26+
27+
NotifyUsers --> RedirectToCollaboration
28+
NoMatchNotification --> ReturnToMatchRoom
29+
RemoveFromQueues --> ReturnToMatchRoom
30+
31+
RedirectToCollaboration --> [*]
32+
ReturnToMatchRoom --> [*]

‎docs/project-management/gantt-chart.mmd‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
gantt
2+
dateFormat YYYY-MM-DD
3+
title CS3219 Project Timeline
4+
axisFormat %Y-%m-%d
5+
6+
section Sprint 1
7+
Set up database :done, s1t1, 2024-09-17, 2024-09-23
8+
Display question list :done, s1t2, 2024-09-17, 2024-09-23
9+
Display question desc. :done, s1t3, 2024-09-17, 2024-09-23
10+
Login/Logout routes :done, s1t4, 2024-09-17, 2024-09-23
11+
Homepage after login :done, s1t5, 2024-09-17, 2024-09-23
12+
Link question frontend :done, s1t6, 2024-09-17, 2024-09-23
13+
K8s cloud setup :done, s1t7, 2024-09-17, 2024-09-23
14+
15+
section Sprint 2
16+
User service :done, s1t7, 2024-09-24, 2024-09-30
17+
Question filtering :done, s3t1, 2024-09-24, 2024-09-30
18+
Question sorting :done, s3t2, 2024-09-24, 2024-09-30
19+
20+
section Sprint 3
21+
Hot reloading :done, s3t3, 2024-10-01, 2024-10-07
22+
Update user service :done, s3t4, 2024-10-01, 2024-10-07
23+
Login UI :done, s3t5, 2024-10-01, 2024-10-07
24+
25+
section Sprint 4
26+
Admin question UI :done, s4t1, 2024-10-08, 2024-10-14
27+
Setup RabbitMQ :done, s4t2, 2024-10-08, 2024-10-14
28+
Continuous deployment :done, s4t3, 2024-10-08, 2024-10-14
29+
30+
section Sprint 5
31+
Matching service :done, s5t2, 2024-10-15, 2024-10-21
32+
Loading page :done, s5t3, 2024-10-15, 2024-10-21
33+
Frontend-RabbitMQ :done, s5t4, 2024-10-15, 2024-10-21
34+
35+
section Sprint 6
36+
API Gateway CRUD :done, s6t1, 2024-10-22, 2024-10-28
37+
Collaboration page :done, s6t1, 2024-10-22, 2024-10-28
38+
39+
section Sprint 7
40+
Audio service :done, s7t1, 2024-10-29, 2024-11-04
41+
Code execution :done, s7t2, 2024-10-29, 2024-11-04
42+
User profile :done, s7t3, 2024-10-29, 2024-11-04
43+
OAuth :done, s7t4, 2024-10-29, 2024-11-04
44+
Collaboration service :done, s7t5, 2024-10-29, 2024-11-04
45+
Cloud deployment :done, s7t6, 2024-10-29, 2024-11-04

0 commit comments

Comments
 (0)