SERENITY
Project Overview
SERENITY is an integrated information system designed to manage the training program database for the Food and Nutrition sector at SEAMEO RECFON.
The original system faced multiple issues, including outdated UI, non-responsive layout, redundant and inconsistent menu structure, slow loading performance, and several functional errors.
This project focused on comprehensive system improvement — from database structure and information architecture to full frontend-backend rebuilding.
Problem Identification
Outdated and non-responsive interface
Redundant and poorly structured navigation
Slow loading performance
Database inefficiencies
Multiple functional errors
Solution Approach
System Analysis
Created a structured analysis report identifying UI, performance, database, and usability issues based on stakeholder feedback.
Database Normalization
Redesigned and normalized the MySQL database structure to improve data integrity, reduce redundancy, and optimize relational consistency.
Information Architecture & Storyboarding
Developed a storyboard and improved menu structure to eliminate redundancy and align navigation with actual content functionality.
Full System Rebuild
Rebuilt SERENITY using a modern full-stack architecture:
Backend: Laravel + Breeze (authentication & core system logic)
Frontend: Inertia.js + React + Tailwind CSS
Database: MySQL
The new system features improved responsiveness, faster loading time, and stable feature functionality.
Core Improvements
Fully responsive UI across all devices
Streamlined and structured navigation
Optimized database relationships
Improved performance & loading speed
All features stabilized and functioning correctly
Database Structure
Implemented normalized relational tables for managing training data, participants, and program records.
Applied normalization principles to eliminate redundancy and ensure data consistency.
Technical Highlights
Laravel (MVC architecture)
Laravel Breeze (authentication scaffolding)
Inertia.js (SPA-like experience without separate API layer)
React (component-based frontend architecture)
Tailwind CSS (modern responsive styling)
MySQL (normalized relational database design)
My Role
Collaboratively rebuilt the system (team of 2), contributing to system analysis, database normalization, UI restructuring, and full-stack implementation.
Impact
The new SERENITY platform is faster, more maintainable, responsive across all devices, and aligned with user needs — transforming a legacy system into a modern web application.
