ZotHomes

Finding housing after your first year can be tough. Our site makes it easy--browse all options in one place, filter by price, distance, or type, and find roommates instantly with our Roommate Finder!

Comment

Inspiration

While discussing struggles we had as college students, a common theme was our lack of understanding about housing. Navigating housing is quite confusing since the information isn’t easily accessible or centralized. We wanted to change this and make the process easier for students.

What it does

Our project is a centralized platform that simplifies the housing search process for UCI students. It compiles housing options, resources, and roommate connections all in one place. A standout feature of our website is the Roommate Finder, which allows users to sign in using their UCI email, fill out an interest form, and get matched with other students based on compatibility.

How we built it

At the beginning of this hackathon, we started by creating a mockup design using Figma. Once we were happy with the layout, we moved onto creating the look and structure on VSCode using HTML and CSS. This process was long as we ran into many roadblocks, namely formatting issues and having to download dependencies on VS code that we didn’t already have. Simultaneously, we researched various housing options and put this information all in one place. We didn’t expect this to be too difficult, however processing the data such that it was “consistent” was an extensive experience. Finally, we moved onto the backend. One key feature of our website that we believed was unique is the roommate finder. Essentially when users sign in using their UCI email address, they are prompted to fill out a form asking about their interests. Once users fill out this form, their information is stored in a database and a card is created and posted on the ‘Find Roommate' tab.

Challenges we ran into

We encountered multiple challenges throughout development:

  • Formatting and layout issues in HTML/CSS
  • Installing and configuring the necessary dependencies in VS Code
  • Ensuring data consistency when aggregating housing information from different sources
  • Figuring out how to store and retrieve user data correctly so profiles would persist after sign-in
  • We were also one of the only groups with a three person group, thus each person a greater workload and it was harder to implement as many features

Accomplishments that we're proud of

We’re especially proud that we were able to:

  • Successfully create a working roommate-matching system that remembers user information through Firebase
  • Integrate the frontend and backend seamlessly
  • Create a website with a sleek and professional design
  • Learn and implement TypeScript, FastAPI, and TailwindCSS

What we learned

  1. Dialog z-index issues – Always check if modals/dialogs have proper stacking context
  2. Auth timing – Firebase Auth loads asynchronously, so you need to wait for it
  3. Single source of truth – Don’t manage the same state in multiple components
  4. TypeScript imports – Always import types when using them
  5. Real-time listeners – Ensure proper cleanup with return () => unsubscribe()
  6. Firestore rules – Must allow authenticated users to read profiles
  7. Debug logging – Console logs help identify where code fails
  8. Test data – Need at least two users to test roommate matching

What's next for ZotHomes

Some features we hope to implement in the future:

  • Improve the Chatbox by allowing it to access the database with users’ information so responses can be more personalized
  • Create a functioning message system (currently it does not work)

Built With

Share this project:

Updates