FixMyCity
A full-stack issue reporting platform for municipalities, built with Vue, Spring Boot, MySQL, JWT authentication, secure image handling, Cypress tests, and Docker-based deployment.
The Problem
Public space problems are easy to notice but not always easy to report or follow up on. Citizens need a simple way to submit reports, while administrators need a clear workflow for reviewing issues and keeping users updated.
- Citizens need a simple way to report local problems.
- Reports need useful context such as images, categories, urgency, and location.
- Users need feedback after submitting a report.
- Administrators need a central place to manage and update reports.
The Solution
FixMyCity is a full-stack platform where users can create issue reports, upload images, view reports on a map, track their own submissions, and receive notifications when administrators update the status of an issue.
- Users can submit public space reports with images and location data.
- Reports can be filtered by tag, urgency, and status.
- Issues can be viewed in both a feed and an interactive map.
- Admins can update issue statuses from a dedicated dashboard.
- Users receive notifications when their reports are updated.
Architecture
Full-Stack Application Flow
The application consists of a Vue frontend, a Spring Boot REST API, and a MySQL database. Users can create reports, upload images, track issue statuses, and receive notifications when administrators update their reports. JWT authentication secures API access while Docker is used for deployment.
public void notificationAfterUpdate(
Issue issue,
Status issueStatus
) {
StringBuilder message = new StringBuilder();
message.append("The status of the post with title: \"")
.append(issue.getTitle())
.append("\" was changed to ");
switch (issueStatus) {
case OPEN -> message.append("open.");
case IN_PROGRESS -> message.append("in progress.");
case COMPLETED -> message.append("completed.");
default -> message.append("unknown status.");
}
NotificationRequest request = new NotificationRequest();
request.setMessage(message.toString());
request.setRead(false);
saveNotification(request, issue.getUser(), issue);
}
Screenshots
Technical Analysis
Frontend And Backend Separation
The application was built as a separate Vue frontend and Spring Boot backend communicating through a REST API. This allowed both applications to be developed, tested, and deployed independently while maintaining a clear separation of responsibilities.
Authentication And Authorization
JWT access tokens and refresh tokens were used to secure the API. Protected endpoints validate authenticated users before allowing access to features such as issue creation, profile management, notifications, and administrative actions.
Issue Management Workflow
The core of the application revolves around issue reports. Users can create reports with location data and images, while administrators review submissions, update statuses, and trigger notifications that keep users informed about progress.
Deployment And Quality Assurance
The project includes Dockerized services, automated deployments, and Cypress end-to-end tests. This helped ensure that important user flows continued to work correctly as new features were added.
Challenges
The main challenge in this project was not one single difficult algorithm, but the amount of connected application features. Authentication affects protected routes, image access, user profiles, issue ownership, admin permissions, and notifications. The project needed enough structure to keep those parts separated while still making them work together as one application.
What This Project Demonstrates
Full-Stack Application Development
The project combines frontend views, backend APIs, database persistence, authentication, image uploads, notifications, map integration, and deployment into one complete application.
Practical Backend Structure
The backend is organized into controllers, DTOs, entities, repositories, services, filters, configuration classes, and seeders. This keeps request handling, business logic, persistence, security, and setup code separated.
Frontend Reuse
Reusable services and composables handle repeated frontend concerns such as sessions, authenticated requests, secure image loading, image uploads, deletion, flash messages, and availability checks.
Production-Oriented Workflow
The project goes beyond local development by including Docker, environment configuration, CI/CD, automated testing, test deployment, and production deployment.
A Bit About Me
Outside of software development, I enjoy gaming, anime, and working on personal projects that help me learn something new.
Whether it's building applications, automating workflows, or experimenting with new technologies, I enjoy creating things and understanding how they work.