SESA Student Housing Hackathon

Inspiration

Student housing is a major challenge for university students—finding affordable, safe accommodations and compatible roommates can be stressful and time-consuming. The SESA hackathon provided an opportunity to tackle this real-world problem by building a comprehensive solution that addresses multiple pain points in one unified platform.

Approach

The project started as four separate prototypes, each addressing a different aspect of student housing:

• Listings – Redesigned uOttawa Housing Billboard with property listings and landlord verification
• Survey – Roommate compatibility survey with compatibility buffer matching
• Housing – Housing connection app for roommate matching
• Landlord – Student housing landlord profile management

I unified all four screens into a single React/TypeScript application with a shared navigation system. The app uses React Router for navigation between screens, ensuring a seamless user experience. Each screen maintains its own functionality while benefiting from a consistent design system and shared components.

Technical Details

The unified app is built with:

• TypeScript for type safety and better developer experience
• React with functional components and hooks
• Vite for fast development and optimized builds
• React Router for client-side routing between the four main screens
• CSS for styling with a consistent design system

The architecture allows each screen to be developed independently while sharing common navigation, layout, and utility components. The single entry point simplifies deployment and user experience compared to running four separate applications.

Security Implementation

We implemented several security features to protect users and ensure data integrity:

Identity Verification System

For landlord verification, we built a multi-factor identity verification system using face-api.js and Tesseract.js:

• Document Verification – Validates that uploaded ID documents contain exactly one detectable face, ensuring the document appears to be a legitimate ID photo
• Selfie Verification with Code – Uses OCR (Tesseract.js) to extract a 4-digit verification code displayed on paper in the selfie, then compares the selfie face to the ID photo using facial recognition
• Face Matching – Employs face-api.js with a configurable threshold to verify that the person in the selfie matches the person on the ID document

Authentication & Authorization

• Context-based Authentication – Implemented a React Context API authentication system that separates user types (students vs. landlords) and manages session state securely
• Input Validation – Prevents duplicate registrations by validating unique email addresses and student IDs before account creation
• Credential Validation – Secure credential checking with proper error handling that doesn't reveal whether an email exists in the system
• Secure ID Generation – Uses crypto.randomUUID() for generating secure, unique identifiers

Type Safety & Code Quality

• TypeScript – Full type safety throughout the application prevents common security vulnerabilities like type confusion and ensures data integrity
• Structured Error Handling – Comprehensive error handling in verification flows prevents information leakage and provides clear user feedback

These security measures ensure that only verified landlords can list properties, protecting students from fraudulent listings while maintaining a smooth user experience.

Takeaways

This hackathon project taught me valuable lessons in rapid prototyping, component architecture, and integrating multiple features into a cohesive application. Working with TypeScript improved code quality and caught errors early, while React Router made navigation intuitive. Implementing the identity verification system gave me hands-on experience with computer vision APIs, OCR, and multi-factor authentication flows. The challenge of unifying four separate prototypes into one app reinforced the importance of planning for scalability and reusability from the start, while the security features highlighted the critical importance of protecting user data in real-world applications.