FixMyCity

About the Project Inspiration FixMyCity was inspired by a simple problem: people often notice issues in their city—damaged roads, broken infrastructure, unsafe areas, or other local problems—but there is not always an easy way to report them and make them visible. I wanted to create a platform where users could quickly share these problems through video posts, allowing other people to see what is happening in their area and interact with the reports. The idea was to make reporting a city problem feel as simple as posting on a social media platform. What It Does FixMyCity is a web platform where users can:

Create an account
Verify their account through email
Log in securely
Upload videos showing problems in their city
Add a title and description to each report
Browse reports posted by other users
Like reports
View their profile and their own posts
Delete their own posts The main goal is to create a community-driven feed of real problems happening around the city. How I Built It I separated the project into a backend API and a React frontend. For the backend, I used:
Python
FastAPI
PostgreSQL
SQLAlchemy
Pydantic
Cookie-based authentication
Email verification using SMTP The backend handles user accounts, authentication, database operations, video uploads, likes, profiles, and permissions. For the frontend, I used:
React
Vite
JavaScript
CSS
fetch() for communication with the FastAPI API The frontend includes pages for the feed, signup, login, email verification, posting videos, and user profiles. I also implemented protected functionality so that users can only perform certain actions when authenticated, and users can only delete their own posts. Challenges I Faced One of the biggest challenges was connecting all parts of the application together correctly. Authentication was more complicated than just creating a login form. I had to manage sessions, cookies, email verification codes, protected endpoints, and user permissions. Video uploads were another challenge because files are much larger than normal form data. I had to handle file validation, storage, and make sure videos could later be served back to the frontend correctly. I also had issues while setting up PostgreSQL and connecting the database configuration through environment variables. Another challenge was integrating React with FastAPI. I had to correctly configure CORS, credentials, API requests, and error handling so that the frontend and backend worked as one application. Debugging these problems helped me understand much more about how real full-stack applications work. What I Learned While building FixMyCity, I learned a lot about full-stack development. I improved my understanding of:
REST APIs
FastAPI
PostgreSQL databases
SQLAlchemy relationships and queries
Authentication and authorization
Cookies and sessions
File and video uploads
Email verification systems
React components and state
Connecting a frontend to a backend API
CORS
Environment variables
Debugging full-stack applications The biggest thing I learned is that building a real application is not only about writing individual features. The difficult part is making authentication, databases, files, frontend state, and APIs all work together reliably.