Built a full-featured platform supporting login/registration flows for three distinct user roles, secure JWT-based authentication, image uploads, and protected route access. Focused on clean UX, responsive layout, and modular component design.
The Challenge
We set out to build a complete property management system where three types of users, property owners, renters/customers, and administrators, could securely interact within their own contexts. Each role needed distinct views, functionality, and permissions: owners could manage listings, customers could search and inquire, and admins could oversee system-wide activity. The challenge was not only designing intuitive, role-specific experiences but also enforcing strict security, maintaining route protection, and coordinating frontend/backend workflows. The backend had to support scalable user and property data while maintaining clean, testable APIs.
The Solution
We adopted a role-based access control (RBAC) model using JWT for stateless authentication across a RESTful API built with Spring Boot. On the frontend, we used Next.js for its routing and server-side capabilities, and React with TypeScript for building modular, reusable components. TailwindCSS ensured rapid styling and responsiveness across device types. Every page was conditionally protected based on user role, with redirects in place for unauthorized access attempts. Image upload functionality was implemented using custom form components and multipart POST requests to the backend, allowing users to associate images with property listings. Postgres was used to model relational data for users, roles, and properties, and deployment was done on AWS EC2 with environment variables and reverse proxy setup for backend/frontend communication.
My Contribution
I led the frontend development and managed the entire integration lifecycle. I implemented the login and registration flows for all three roles and built protected layout components that dynamically rendered based on user authentication state. I designed and implemented a modular form system used across create/edit listing workflows and profile management. I also built the image upload flow with client-side validation and error handling, as well as the dynamic dashboard routing logic. On the backend, I coordinated schema design and helped refactor API routes for better separation of concerns. I handled AWS EC2 deployment setup, including firewall rules, NGINX reverse proxy, and HTTPS configuration.
Key Outcomes
- 🚀 Successfully delivered an MVP within 2.5 months with distinct role-based interfaces
- 🔐 Implemented secure JWT authentication with full route protection and session validation
- 🧩 Achieved clean separation of concerns between frontend layout and role-specific logic
- 🖼️ Enabled seamless property image upload and management with custom form handling
- 📊 Built a scalable backend using Spring Boot and PostgreSQL with clean service-layer architecture
Lessons Learned
This project taught me how to manage full-stack complexity while maintaining a clear separation between responsibilities. I gained hands-on experience enforcing role-based access and protecting routes in a production-ready app. I also learned how to coordinate frontend and backend APIs in a team setting while keeping CI/CD and deployment constraints in mind. Finally, I saw the value of building modular, accessible forms and reusable layout structures when scaling multi-role systems.