Case Study
PMII UNPAM Platform
A centralized organizational platform built using Next.js App Router, PostgreSQL, Prisma ORM, JWT Authentication, and Supabase Storage.
Architecture Style
Modular Monolith
Frontend, API routes, and data access are centralized inside a single Next.js application for easier deployment and maintenance.
Authentication
JWT-Based Security
Administrative actions are protected using signed JWT tokens with middleware verification on secured routes.
Storage System
Supabase Object Storage
Media assets are stored separately from the database to improve scalability and simplify image management.
Architecture
System Architecture Overview
The platform adopts a modular monolithic architecture using Next.js App Router. Frontend rendering, backend API routes, authentication services, and database access are organized into separated logical layers while remaining inside a unified codebase.
Layer Separation
The system separates presentation logic, API handling, authentication, and persistence layers to improve maintainability and reduce coupling between components.
Server Components Strategy
Public-facing pages primarily use Server Components for SEO optimization and faster initial rendering, while interactive dashboard components utilize Client Components where necessary.
Engineering Decisions
Technical Considerations
Several technical decisions were made to balance development speed, scalability, maintainability, and deployment simplicity.
Why Next.js App Router?
App Router provides nested layouts, server rendering capabilities, and cleaner route organization suitable for content-heavy organizational platforms.
Why Prisma ORM?
Prisma enables type-safe database operations, cleaner query abstraction, and simplified schema migrations for CRUD-focused systems.
Why JWT Authentication?
JWT authentication simplifies stateless session management and integrates efficiently with API-based dashboard operations.
Why Supabase Storage?
Separating media assets from the relational database reduces storage overhead and improves scalability for documentation galleries.
System Analysis
Use Case Diagram
The use case diagram models interactions between public users and administrators. Public users consume organizational content, while administrators manage articles, documentation, and media uploads.
Access Control Strategy
Public users can freely access informational content without authentication, while administrative operations are protected through JWT verification middleware and secured API routes.
Database Design
Entity Relationship Diagram
The relational schema is designed to support article publishing, documentation management, media galleries, and administrator authentication using normalized entity relationships.
Database Considerations
- • Unique slug fields are used to generate SEO-friendly dynamic routes.
- • Documentation images are separated into dedicated relational tables to support scalable gallery management.
- • Cascading delete constraints prevent orphaned media records.
Data Integrity
Prisma ORM enforces schema consistency through typed database access and migration tracking, reducing risks associated with manual queries and inconsistent data structures.
Security
Authentication & Authorization
Administrative endpoints are secured using JWT authentication and password hashing to prevent unauthorized access.
JWT Authentication
Protected routes require signed JWT tokens validated on every administrative request before accessing dashboard resources.
Password Security
User passwords are hashed using bcrypt before persistence to prevent plain-text credential exposure.
Technical Flow
System Workflow Diagrams
The following diagrams illustrate the internal authentication process and article publishing workflow implemented inside the system.
Authentication Flow
This sequence diagram demonstrates how administrator credentials are validated, authenticated, and transformed into JWT-based sessions.
Security Validation Process
The API validates incoming credentials, compares hashed passwords using bcrypt, and generates signed JWT tokens for authenticated sessions.
Content Publishing Workflow
This activity diagram illustrates the article publishing process from form submission to database persistence.
Validation & Persistence
Before article creation, the API validates authentication tokens, checks payload completeness, generates unique slugs, and stores validated content into PostgreSQL.
Project Metrics
Technical Overview
5+
API Routes
JWT
Auth Strategy
Prisma
ORM Layer
SSR
Rendering Strategy
Future Improvements
Challenges & Scalability
Role-Based Access Control
Future iterations can implement RBAC to support multiple administrator roles with granular permission management.
Media Optimization
Image optimization pipelines and CDN-level caching strategies can improve loading performance for documentation galleries.
Audit Logging
Administrative activity logs can be added to improve monitoring and traceability for content management actions.
Authentication Hardening
Refresh token rotation and session expiration strategies can further improve authentication security for production environments.