CSLogbook - Academic Workflow & Student Progress Tracking System

A full-stack web application designed for computer science students to manage academic workflows, internship tracking, special projects, and thesis milestones.

1. Overview#

CSLogbook (https://cslogbook.me) is a full-stack web application developed as a centralized academic workflow and milestone tracking platform for the Department of Computer Science and Information Technology at KMUTNB, covering 3 major academic tracks: Internship, Special Project, and Thesis.

2. Stories & Visual Tour#

Dashboard & Activity Overview#

CSLogbook Dashboard Centralized dashboard displaying real-time academic progress, pending request notifications, and next action items.

Daily Logbook System#

CSLogbook Daily Log Daily internship logbook entries with report attachments and faculty advisor review workflows.

Clock-in & Work Hours Tracking#

Automated clock-in/out time tracking, cumulative internship hour calculation, and leave management.

Thesis & Defense Milestone Tracking#

CSLogbook Thesis Progress Milestone tracking table with automated unlock condition verification and defense exam records.

Mentor & Enterprise Evaluation#

CSLogbook Mentor Management Workplace mentor management with token-based evaluation links for external company supervisors.

Company & Workplace Directory#

CSLogbook Company Directory Verified workplace directory and registration system for departmental internships.

3. Architecture & Workflows#

💡 Interactive Visual Viewers (Archify):

🖥️ Open Interactive Full-stack Architecture (Full Screen) — Interactive component focus, pan/zoom, and Light/Dark mode.

🔄 Open Interactive Academic Workflow Trace Viewer — Step-by-step state machine with animated trace motion.

System Architecture (Infographic)#

1
flowchart TB
2
    subgraph Client["Client Tier (Next.js 16 App Router)"]
3
        UI_AUTH["Auth Layer\nKMUTNB SSO + Scoped JWT"]
4
        UI_STU["Student Portal\n(Forms KP.02/03/05 / Logbook)"]
5
        UI_ADV["Advisor Portal\n(Review & Granular Approvals)"]
6
        UI_ADM["Admin Portal\n(Manage / Override / Excel Engine)"]
7
        UI_SUP["External Supervisor\n(Token-based Evaluation)"]
8
    end
9

10
    subgraph Proxy["Reverse Proxy & Gateway"]
11
        NGINX["Nginx (Port 80/443 SSL)\n- / -> Next.js :3000\n- /api/ -> Express :5000\n- /uploads/ -> Static PDFs"]
12
    end
13

14
    subgraph API["Backend Tier (Express REST API)"]
15
        MID["Middleware (Auth, RBAC, RateLimit)"]
16
        SRV["Service Layer (Workflow Engine, DocBuilder)"]
17
        NOTIF["Real-time & Telemetry (Socket.io + Winston)"]
18
    end
19

20
    subgraph Storage["Data Tier (MySQL 8.0 & Storage)"]
21
        DB[(MySQL 8.0 Database\n48 Models / 103+ Migrations)]
22
        UPLOADS["File Storage\n(Signed PDFs & Documents)"]
23
    end
24

25
    Client --> NGINX
26
    NGINX --> UI_AUTH
27
    NGINX --> MID
28
    MID --> SRV
29
    SRV --> DB
30
    SRV --> UPLOADS
31
    SRV --> NOTIF

State Machine Approval Pipeline#

1
sequenceDiagram
2
    autonumber
3
    actor S as Student
4
    actor A as Faculty Advisor
5
    actor ADM as Department Officer / Admin
6
    participant SYS as CSLogbook API & DB
7

8
    Note over S, SYS: 1. Request Submission & Guard Validation
9
    S->>SYS: Submit Request (KP.05 / KP.02 / Defense)
10
    SYS-->>SYS: Validate Unlock Conditions (Credits / Meetings >= 4)
11
    SYS->>SYS: Set status to "Pending"
12

13
    alt Special Project & Thesis Flow
14
        SYS->>A: Notify Faculty Advisor
15
        A->>SYS: Review & Approve (Advisor Approved)
16
        SYS->>ADM: Forward to Department Officer
17
    else Internship Flow
18
        SYS->>ADM: Forward directly to Department Officer
19
    end
20

21
    Note over ADM, SYS: 2. Final Approval & Automated Document Generation
22
    ADM->>SYS: Final Approval (Officer Approved)
23
    SYS->>SYS: Auto-generate Official PDF (Request / Dispatch Letter)
24
    SYS-->>S: Unlock PDF download & advance workflow step

4. Key Engineering Highlights#

Multi-Role RBAC & Public Tokens: 4 user roles (Student, Advisor, Admin, Supervisor) with cryptographic token evaluation links requiring no account signup for external mentors.
State Machine & Dynamic Engine: Deterministic state transitions governed by workflowStates.ts and canTransition() with strict prerequisite unlock rules.
Staff Backoffice & Matrix: Centralized administrative control, rubric scoring matrix for defense exams, and dynamic Excel/PDF generation.
DevOps & Infrastructure: Docker Compose containerization behind Nginx Reverse Proxy with structured Winston logging and automated GitHub Actions deployment.

5. My Role & What I Built#

As the Full-stack Developer, I engineered the platform end-to-end:

Frontend: Built responsive UIs with Next.js 16 (App Router), React 19, and TypeScript, including step workflow components.
Backend & API: Designed RESTful APIs on Express, RBAC authorization, state machine engine, and dynamic Excel builder (ExcelExportBuilder).
Database: Modeled relational schemas across 48 MySQL tables with 103+ Sequelize migrations.
DevOps: Managed Docker Compose, Nginx SSL termination, Winston logging, and GitHub Actions CI/CD deployment.

6. Result & Current State#

UAT Validated: Successfully passed User Acceptance Testing across 34 comprehensive test cases.
Production Live: Running stably in production on a Linux VPS at https://cslogbook.me.

7. Demo & Code#

Live System: https://cslogbook.me
GitHub Repository: Manchinn/CSLogbook