Project Overview
What I built
Connected a Next.js administration frontend to Spring Boot APIs and translated transportation workflows into the interface.Instead of public operations screens, the case study documents the deployment pipeline and asynchronous vehicle-control architecture.
Technologies
React
Next.js
TypeScript
Spring Boot
PostgreSQL
Tailwind CSS
Mantine
Git
DEVELOPMENT ENVIRONMENT
Deployment and asynchronous control flow
A portfolio-level view of how code becomes a deployed container while vehicle commands and processing results travel on separate message paths.Deployment pipeline
An automated path from commit through quality checks to the image registry
DeveloperGit push
JenkinsBuild · deploy
SonarQubeStatic analysis
HarborImage registry
Image pull · deploy internal services
Asynchronous command handling
Turn browser requests into vehicle commands and collect result state separately
ClientAdmin browser
Internal network · service development servers
bims-controlNext.js 15 admin web
bims-control-apiSpring Boot · command state
KafkaCommand queue · collection
mqtt-interfaceKafka ↔ MQTT
MQTT BrokerTLS message broker
OBEVehicle terminal · external
Result and status return · asynchronous response path
State and collection
Keep command state, cache, and collected messages in distinct processing paths
RedisCache · publish
PostgreSQLShared command state
processing-interfaceKafka collection · storage
Scope
Key Contributions
- 01Built Next.js admin screens for viewing and managing bus, route, and operations data and integrated them with Spring Boot APIs.
- 02Implemented a monitoring screen for bus locations and operation events on a map, along with dashboards for operations, incidents, and violations.
- 03Transformed API request and response data into screen models and reflected transportation workflows in table, map, and detail views.
- 04Implemented operations screens for access trends, login history, and administrator permissions.
- 05Applied shared UI built with Mantine and Tailwind CSS and participated in Git-based code reviews and issue resolution.
Constraints & Decisions
Challenges
- 01Bus, route, and operational events were spread across different views and APIs, so they had to be connected into a workflow administrators could follow.
- 02Map, table, and detail views required different API data shapes, so screen models had to preserve consistent view and edit state.
Verified Evidence
Results
01Added bus, route, and operations workflows, map monitoring, operations dashboards, and access history screens to the admin system under development.
02Kept sensitive operations screens private and documented the deployment pipeline and asynchronous vehicle-control flow as a diagram.
