Inspiration
While sites such as Apartments.com provides users with optimized and accessible ways of finding available housing options around them, it doesn't account for available sublease/lease takeover offers or requests. Especially among students and other community members, it is not entirely uncommon to want to find such options, whether it may be for a place to stay in over the summer or when unexpected housing situations arise. Because of this, users will most commonly resort to Facebook groups dedicated to essentially offering an online marketplace for these housing options.
However, the natural design of Facebook and Facebook groups means that users have no way of filtering or sorting through these offerings in the context of their housing needs, and moderators have no way of implementing such features. Because of this, users are subject to endlessly scrolling through a large number of posts until they find a housing option that they like. This can easily become time-consuming and mentally draining very quickly.
What it does
HouseCat is a web-based database application that combines the flexibility of the design of Facebook groups and the convenience of database querying, and provides users accessible ways of easily navigating through available housing offers.
How we built it
Our applications follows the MERN (MongoDB, Express, React, Node) stack, which allows us to easily construct a three-tier architecture using JavaScript and JSON. Ideally, a MongoDB database stores all the information from housing Facebook groups with each post being its own record. Our Express.js framework in our Node.js server will then be able to interactively make requests from our MongoDB database, which can then connect to our React.js framework that renders the data into user-friendly designs. Github pages was used to host the frontend, while Heroku was used to host our backend server.
Challenges we ran into
We encountered a few challenges throughout the process of building our application.
We first attempted to scrape the data from a public facebook group using python libraries Selenium and BeautifulSoup. However, the nature of Facebook does not allow us to scrape data and will block users who use an automated tool. Thus, our solution was to use a publicly available web scraper called Apify and return a csv file of several posts’ information. When creating the website application, we ran into issues of connecting our MongoDB database to the frontend. As this is our first time using React.js and Node.js, we needed more time to figure out how to query the database from the backend and translate it to the front end. Our solution was to create a prototype that shows the potential functions of the website, so we have an idea on what to work on later! We attempted to program our interactive ChatBot by connecting it to OpenAI. We ran into the issue of needing a secure API key and ran out of time to authorize it through GoogleCloud. However, once this is done we will be able to implement an interactive chatbot that will allow users to ask about details for each apartment complex in Davis.
Accomplishments that we're proud of
Going into this project, we had zero experience with any frontend and backend frameworks and implementation, so a lot of the time we had was spent on simply trying to figure out how our whole application actually worked. Despite that, we still came out with a result that was so much better than what we expected, considering our background and technical skills beforehand. Because so much of the work poured into the project was simply spent learning, we had a better understanding of how to actually implement a functional website, and despite us not being able to fully complete it by the end, we still enjoyed and valued the learning experience and the work that we put into it.
What we learned
We learned several skills in the past 24 hours of HackDavis. In addition to the programming skills below, we learned about the necessity of clean data when creating a data powered web applicaiton, and the importance of a clear workflow for the project.
New programming skills learned: JavaScript How to use React.js and Node.js How to create a database using MongoDB How to use MongoDB, MongoDB Atlas and MongoDB Compass and connect it to React
What's next for House Cat
Going forward, we'd love to work on the functionality of our application, as we were ultimately unsuccessful in creating a fully functional application, such as making actual functioning querying buttons and an integrated chatbot. After that, we'd like to spend more time creating more features to make our application more accessible, and maybe even move away from the Facebook groups functionality into becoming our very own social media application where offers can be directly advertised, which can make the extreme potential ambiguity of Facebook posts much less of a headache to deal with which would let us better streamline the querying functions that we implement.
Log in or sign up for Devpost to join the conversation.