Heel Estate

Heel Estate Home Page
Residence Hall Questionnaire
Map & Links to Results
Residence Hall Information Page
Apartment Listing Information Page

Note: Our team was unable to attend the hopin demo fair live. Please view the demo video above in place of our live demo.

Inspiration

Heel Estate is inspired by our own experiences with finding housing in the Chapel Hill area. Comparing apartments, houses, and residence hall options around Chapel Hill takes hours of sifting through rental sites and the UNC Housing pages. Students also often resort to creating Excel sheets to share with one another and note housing prices, bedrooms, bathrooms, etc. This is not only time-consuming, but can be hard to keep track of, leading to a housing search process that is confusing and complicated. We wanted to change that.

What it does

Heel Estate is a housing hub that provides one place where students can compare apartments, houses, and residence halls. It also simplifies the housing process by matching users directly with listings that match their individual preferences. The Heel Estate home page prompts users to complete a short questionnaire regarding their housing search criteria. Questionnaire answers are then used to provide a list of housing options that best fit their interests, with filters designed specifically to suit the needs of college students. The locations of each match appear on an embedded Google Map, which users can manipulate by zooming into their desired locations. Links below the map navigate to images and information about the listing or dorm, and provide a contact link which redirects to the external listing site.

How we built it

We used HTML, CSS, and JavaScript for the web-developing aspect and implemented the Google Maps API within one of our html files, committing and pushing changes consistently using GitHub. We also used Procreate to create the home page buttons and the Heel Estate logo, and used VSCode to write and edit the project in.

Challenges we ran into

We entered with little web development experience, and our challenges primarily involved learning how to create a website in JavaScript, HTML, and CSS without any prior knowledge. Finding a way to utilize a csv reader in JavaScript also proved to be a challenge for us, as we needed to parse through our apartment and residence hall data and filter it according to the user responses to the housing quiz. We ultimately changed our strategy to a more object-oriented approach, creating Building and ResHall classes. Further, we faced difficulty using the questionnaire responses in different JS files, and had to do a lot of troubleshooting regarding the Google Maps API and modifying the data that appeared on our map display.

Accomplishments that we're proud of

Considering none of us had prior web development experience, we’re super proud of our end product and that we were able to learn any amount of CSS, HTML, and JavaScript within 24 hours! We’re particularly proud of getting the Google Maps API to display pinned locations on our site, as well as getting the navigation between pages up and running, and making our house style illustration PNGs into buttons on our home page!

What we learned

We learned what an API is and how to use it, how to code and design a website from nothing in the span of 24 hours, and how to implement our ideas using JavaScript, CSS, and HTML. We also learned that it takes longer than a day to brainstorm, write, and configure a website that will do everything we planned.

What's next for Heel Estate

We hope to continue to expand our database of local listings to provide better matches and more options for our users. Once Heel Estate’s foundations are comfortably laid, we would also like to add additional criteria and filters for factors such as accessibility, parking, furnishings, and pet-friendliness. Additionally, we would like to have Heel Estate implement a way for users to save their favorite listings or dorms to a list where they can see all their matches in one place and share the list with friends or potential roommates. We would also like to transition the domain of our site from a local host to an external-facing, publicly accessible web page, and allow our users to parse through and potentially even add reviews for each of the locations using an API such as the Google My Business API.

Built With

Submitted to

Pearl Hacks 2022

Created by

I worked mostly on the back-end, using JavaScript to define and instantiate classes for the different types of buildings, as well as helping to implement the algorithm that uses questionnaire answers to parse through available listings.

Madeleine Genova
I worked mostly on the front-end aspects and helped my teammates a little with back-end. Prior to this hackathon, I didn't have experience with HTML, CSS, or JavaScript so this was a bit intimidating at first, but I'm really proud of our end result!

Bailey DeSouza
I worked with implementing the Google Maps API in HTML and JavaScript, front end design in CSS and HTML, and working on data manipulation. This was very difficult and intimidating because I had never worked with HTML, CSS, JavaScript, or manual WebDev in general.

Jessica Bring
CS Student @ UNC Chapel Hill | Education IT Intern @ SAS
I worked on front-end using HTML and CSS, and also worked on the back-end elements of my front-end components using JavaScript. This was all very new to me as I didn't have experience in any of the languages we used, or with web dev in general.

Madelyn Andrews