[{"data":1,"prerenderedAt":110},["ShallowReactive",2],{"$pULVsu4Oha":3},{"id":4,"title":5,"architecture":6,"body":16,"challenge":23,"code":26,"cover":30,"demo":33,"description":35,"extension":36,"featured":37,"lessons":38,"meta":53,"navigation":37,"path":54,"problem":55,"screenshots":63,"seo":78,"solution":79,"stem":88,"tags":89,"technicalAnalysis":93,"type":108,"__hash__":109},"projects\u002Fprojects\u002Ffix-my-city.md","FixMyCity",{"title":7,"description":8,"tags":9},"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.",[10,11,12,13,14,15],"Vue","REST API","JWT Auth","MySQL","S3","Docker",{"type":17,"value":18,"toc":19},"minimark",[],{"title":20,"searchDepth":21,"depth":21,"links":22},"",2,[],{"title":24,"description":25},"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.",{"filename":27,"language":28,"content":29},"NotificationService.java","java","public void notificationAfterUpdate(\n    Issue issue,\n    Status issueStatus\n) {\n    StringBuilder message = new StringBuilder();\n\n    message.append(\"The status of the post with title: \\\"\")\n        .append(issue.getTitle())\n        .append(\"\\\" was changed to \");\n\n    switch (issueStatus) {\n        case OPEN -> message.append(\"open.\");\n        case IN_PROGRESS -> message.append(\"in progress.\");\n        case COMPLETED -> message.append(\"completed.\");\n        default -> message.append(\"unknown status.\");\n    }\n\n    NotificationRequest request = new NotificationRequest();\n    request.setMessage(message.toString());\n    request.setRead(false);\n\n    saveNotification(request, issue.getUser(), issue);\n}\n",{"src":31,"alt":32},"\u002Fimages\u002Fprojects\u002Ffixmycity\u002Ffeed.png","FixMyCity issue reporting dashboard",{"source":34},"https:\u002F\u002Fgithub.com\u002Fdamienhensen\u002Ffix-my-city","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.","md",true,{"title":39,"items":40},"What This Project Demonstrates",[41,44,47,50],{"title":42,"description":43},"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.",{"title":45,"description":46},"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.",{"title":48,"description":49},"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.",{"title":51,"description":52},"Production-Oriented Workflow","The project goes beyond local development by including Docker, environment configuration, CI\u002FCD, automated testing, test deployment, and production deployment.",{},"\u002Fprojects\u002Ffix-my-city",{"title":56,"text":57,"points":58},"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.",[59,60,61,62],"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.",[64,67,69,72,75],{"src":65,"alt":66},"\u002Fimages\u002Fprojects\u002Ffixmycity\u002Fhome.png","FixMyCity landing page",{"src":31,"alt":68},"Issue feed with filtering and status tracking",{"src":70,"alt":71},"\u002Fimages\u002Fprojects\u002Ffixmycity\u002Fmap.png","Interactive map showing issue locations",{"src":73,"alt":74},"\u002Fimages\u002Fprojects\u002Ffixmycity\u002Fprofile.png","User profile and submitted reports",{"src":76,"alt":77},"\u002Fimages\u002Fprojects\u002Ffixmycity\u002Fadmin.png","Administrative issue management dashboard",{"title":5,"description":35},{"title":80,"text":81,"points":82},"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.",[83,84,85,86,87],"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.","projects\u002Ffix-my-city",[10,90,13,15,91,92,14],"Spring Boot","JWT","Cypress",{"title":94,"decisions":95},"Technical Analysis",[96,99,102,105],{"title":97,"description":98},"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.",{"title":100,"description":101},"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.",{"title":103,"description":104},"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.",{"title":106,"description":107},"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.","School Assignment","usTWNLc5JtDpZRveCwz9VnEcbR-lJ9CvRT2y4GjaWSo",1780768957007]