ZotHome

Figma visualization
Frontend visualization

Inspiration

Near the start of every term, UCI's current housing crisis weighs on students' minds, an undesirable stressor on top of studies, work, and the summer to school year transition. Many students joke about sleeping out on the streets of Ring Road, but unfortunately, that is not far from reality for many students unable to find housing. With dorms unavailable to upperclassmen, inflation driving up leases, and ACC waitlists hundreds of students long, the safety and security of living quarters for students become increasingly difficult to maintain.

Introducing ZotHome, a reliable, intuitive consolidation of ACC listings into a single mobile app. With the housing stability of students in mind, we aimed to find a solution to one of the largest hindrances to finding a home near UCI: their "first come, first serve" policy.

What it does

ZotHome's user interface is simple, but powerful. Upon loading up the app, users will be met with a simple scroll display of available listings. Each card, representing a single listing, will contain the community name, bed/bath, price, and floor plan. Users will be able to set their preferences, by pressing on the Filter button, and selecting a price range, number of beds and bath, and any number of ACC communities, and receive a smaller subset of listings. Users can also navigate to the map view from the Maps button, where they will be able to view the general locations of each community relative to UCI.

How we built it

Backend

Our main source of data came from the American Campus Communities website. As this information is not publicly available, we decided to web scrape all 6 communities' websites to extract a single, hidden call to its API. From there, we made an initial request to that API and parsed the information into an autonomous, serverless database hosted by CockroachDB. We decided to utilize a database to avoid relying solely on API calls to improve runtime and aid in the main feature of our app: availability updates.

Finally, to connect our database to our frontend side, we created a backend API with Vercel to allow for requests to the API and retrieval from our database. To improve seamlessness between the back and front ends, we utilized URL parsing to retrieve parameters from our frontend in order to create the SQL queries for our data.

Frontend

Information requested from our database is subsequently displayed on the user interface. The mobile app was created with React Native and the Expo framework. Every time a user adjusts their filter preference, they can tap the apply button which makes a request to our Vercel API and a smaller subset of listings is retrieved from our CockroachDB database. We used Axios to make URL requests for matching JSON objects. The Redux library was used to manage the app’s global state and enabled us to maintain consistency by having a centralized storage for all of the components implemented in the layout. We implemented the Mapbox API to display all six American Campus Communities alongside react-native’s MapView component to drop markers on the locations.

We prioritized intuitiveness and stuck to minimalism, so that the UI would be fairly understandable no matter the type of user. We decided to use Flatline for rendering the card components on the homepage to limit the amount displayed and improve performance.

Challenges we ran into

Our biggest challenges were, surprisingly, technological issues that were outside the scope of our capabilities to solve. Multiple times we came across trouble with the psycopg2 driver, PostgreSQL's most popular database adapter for Python. As this was used for not only our CockroachDB database but our Vercel API as well, we were deeply entrenched in our implementation before we found out it may not have been the best software to use. Switching to Javascript at 1am, eight hours before the deadline, was no doubt despairing. This also led us to lose some essential functionalities like inserting into our database, leaving us with a static database populated with data from our very first API request.

We also took on a challenge developing a mobile application with React Native. While it seemed close enough to developing a web app with React, that was actually misleading when we realized web scraping was not perfectly compatible, understandably. Our initial goal was to scrape the entire data, but due to cursor restrictions we could only access very superficial information.

Accomplishments that we're proud of

Our resilience and ability to overcome obstacles; kept a positive attitude and were willing to modify our functionalities as we made progress

What we learned

Using state management hooks to improve our react-native app’s performance (useState and useEffect)
Styling our components using stylesheets, flexbox, and flatline
Connecting to a serverless database and creating SQL queries
Creating a backend API to connect frontend and backend