← Back to ProjectsCASE STUDY · WEB PROGRAMMING GROUP PROJECT
WEB DEVELOPMENT · MAP INTERACTION · FRONTEND LOGIC

UCSI Road Damage Reporting System

A campus-focused web application that allows users to report road hazards with photos and map locations while staff can review and manage submitted reports.

PHPJavaScriptMySQL / MariaDBLeaflet.jsOpenStreetMap
Project TypeUniversity Group Project
Team Size4 Students
My ContributionFrontend Logic Developer
ContextUCSI Campus Reporting
Report #021
Report #020
Report #019
THE PROBLEM

Road issues need a clearer reporting workflow.

The project focused on making it easier for campus users to submit road-damage reports with enough context for staff to review them. A useful report needed more than a text description — it needed location information, photographic evidence and a clear status flow.

THE SOLUTION

Report the issue, show the location and track what happens next.

Hazard SubmissionStructured road-issue submission workflow.
Photo EvidenceMultiple images can be previewed before submission.
Map LocationLeaflet.js and OpenStreetMap provide geographic context.
User DashboardUsers can review their submitted reports and status.
Client-Side ValidationImmediate feedback helps prevent incomplete submissions.
Staff ReviewSubmitted reports can be reviewed and managed by staff.
MY CONTRIBUTION

Focused on the user-facing interaction logic.

User Dashboard

Developed interactive user-side dashboard behavior for accessing reports and reporting functions.

Hazard Submission Forms

Worked on the submission experience and frontend behavior around road-damage reporting.

JavaScript Validation & Modals

Implemented client-side validation and dynamic modal interactions.

Multi-Photo Preview

Implemented preview behavior so users could review selected images before submitting evidence.

TECHNICAL APPROACH

A traditional web stack with interactive mapping.

PHP

Supported server-side application functionality.

JavaScript

Handled interaction, validation, modal behavior and image previews.

MySQL / MariaDB

Stored user, report and application data.

Leaflet.js + OpenStreetMap

Provided the mapping layer used for road-hazard locations.

TEAM PROJECT CONTEXT

Clear contribution boundaries matter.

This was a four-member university group project. The portfolio describes my specific contribution to the frontend interaction logic rather than presenting the entire system as individual work.
WHAT THIS PROJECT DEMONSTRATES

Frontend logic tied to a real user workflow.

Interactive Web Development

Using JavaScript to manage behavior and validation beyond static pages.

Map-Based Interfaces

Working with Leaflet.js and OpenStreetMap to give reports geographic context.

Team Collaboration

Developing a defined contribution within a shared multi-developer project.

User-Focused Thinking

Improving submission quality with feedback, previews and clear reporting flows.

Back to Home Contact Me