Zafran Sakowi
All Projects
AcademicAcademic Project · Full-Stack Dev · 2024

StudyFlow ERP & Academic Analytics Engine

An enterprise academic ERP and performance tracking portal designed to automate grading workflows, advisor intervention channels, and multi-tenant student tracking. Features dynamic Vite + Vue 3 client-side analytics dashboards and a native custom Object-Oriented PHP REST API engine protected by JWT authentication middleware.

View on GitHub
Vite + Vue 3Client-side analytics engine
Native PHPObject-Oriented API service
Multi-RoleCustom dashboard matrices

Tech Stack

Vue.js 3ViteTypeScriptPiniaPHPMySQLNginxDockerTailwind CSSSwagger

Stakeholders

Academic Advisors

Monitor student tracking systems, manage academic intervention alerts, and evaluate peer performance matrices

Lecturers / Instructors

Manage course assessment components, submit grading records, and review re-marking requests

Students

Track grades, review performance against peer averages, and submit academic re-marking requests

Zafran (Lead Architect)

Designed the multi-role state engine, built the OOP PHP service engine, secure JWT interceptors, and Docker orchestration layers

The Problem

Traditional educational facilities rely on outdated, manual grading spreadsheets and disjointed, error-prone academic record keeping. This fragmentation slows down advisor intervention loops, makes real-time student performance comparison extremely difficult, and leaves student grade-remarking workflows opaque and unmonitored.

The Solution

Engineered StudyFlow, a multi-tenant academic ERP designed with a decoupled client-server model. It implements dynamic Vue 3 dashboards tailored for administrators, lecturers, academic advisors, and students. The backend utilizes a Native OOP PHP REST API with Custom JWT authentication middleware, orchestrating grading pipelines, peer matrices, and re-marking loops inside a containerized Docker-Compose stack.

Architecture

StudyFlow uses a strictly decoupled, service-oriented structure. The frontend is a Vue 3 Single Page Application (SPA) powered by Vite, utilizing Pinia for client-side state hydration and Vue Router role guards for navigation restrictions. The backend is a stateless Native PHP REST API engine that integrates decoupled business controllers with custom JWT authentication middleware. Communication is secured and routed via a containerized Nginx reverse proxy.

  1. 01

    Vue 3 Client SPA (Vite + TypeScript)

    Dynamic analytics dashboards utilizing Pinia for auth and grade state caches. Computes and renders interactive charts (Peer Matrices, Performance Trackers) on the client, minimizing database overhead.

  2. 02

    Native PHP Service Engine

    An Object-Oriented REST API utilizing unified controller routing (public/index.php). Business components (Marks, Enrollments, Remarks) are split into standalone controllers.

  3. 03

    JWT Authentication Interceptor

    Decoupled middleware (jwtMiddleware.php) validating incoming Cryptographically Signed JSON Web Tokens sent as HTTP Bearer Credentials, mapping identity metadata to active threads.

  4. 04

    Relational Storage (MySQL)

    Structured relational schemas indexing course assessment matrices, student enrollments, remark request auditing logs, and system triggers.

  5. 05

    Containerized Orchestration (Docker Compose)

    Binds Vue frontend, PHP runtime, Nginx proxy, and MySQL databases inside a standardized microservice context with self-signed TLS certificates.

Dev Setup

Prerequisites

  • Docker & Docker Compose
  • Git
  • Web Browser
bash — setup
$git clone https://github.com/ZafranSY/study-flow.git && cd study-flow
$cat <<EOF > studyflowbackend/.env DB_HOST=studyflow-db DB_NAME=studyflow_db DB_USER=root DB_PASSWORD=secured_root_database_password JWT_SECRET=enterprise_level_cryptographic_signing_key_vector EOF

# Initializes relational access parameters and token signing vector

$docker-compose up --build -d

# Spins up frontend, OOP PHP service, Nginx reverse proxy, and seeds the MySQL database

$docker-compose logs -f studyflow-backend

# Monitors the background API service health and setup status

$cat studyflowbackend/apidoc/apidochowto.txt

# Review instructions to load the apidocumentation.yaml Swagger contract locally

Challenges

  1. 01

    Secure Data Layer Isolations inside a Multi-Role System

    Because different users (Students, Lecturers, Advisors, and Admins) use the same database, it is critical to prevent privilege escalation (e.g. students accessing exam keys or modifying others' grades). Mitigation: Implemented a strict row-level authorization filter strategy inside individual controllers. The system ignores client-supplied student IDs and instead extracts the verified, immutable user ID directly from the JWT payload for all data access.

  2. 02

    Real-time Multi-Dimensional Analytical Calculations without Query Degradation

    Dynamic dashboards (PeerComparisonChart.vue, CompareAllStudents.vue) require heavy relational calculations to display comparative averages. Executing these continuously on hot tables slows down DB engines. Mitigation: Offloaded mathematical data aggregations to the client browser by fetching transactional indexing-supported foreign join arrays and caching them in Pinia stores, enabling smooth chart renders without database lockups.

What I Learned

  • 01

    Offloading heavy statistical aggregations to Vue/Pinia client stores keeps our relational databases fast and responsive even under peak academic assessment windows.

  • 02

    Constructing stateless custom PHP JWT verification middleware provides a lightweight, highly customizable alternative to bloated corporate API frameworks.

  • 03

    Docker Compose simplifies the staging of multi-tenant microservices, ensuring identical environments between local developer machines and cloud hosts.

  • 04

    Self-documenting API contracts with Swagger dramatically reduces communication friction between frontend developers and backend engineers.

Back to Projects