HomeSlice | Devpost

HomeSplice Home Page
Google Maps API used to tell users what location is the closest to them
Listings page - search bar design
Listings page - postings
Create Listing page - form
Create Listing page - form continued
My listing page - view the posts you have made
Details page - every posting has a page with more information and corresponding buttons depending on being logged in or creating the listing

Inspiration

As college students, one of the biggest concerns is finding convenient, quality housing for a specific period of time. Transitioning into a completely new environment can already be daunting, but the addition of having to move away from family and jump headfirst into being an adult can cause stress levels to skyrocket. To make matters worse, rising real estate prices are creating this barrier for students to find good housing and landlords to find good tenants.

On-campus housing can be expensive or unavailable for some, and sometimes it is difficult to find shorter leasing terms or sublets. In unexpected situations like COVID, students are faced with unpredictable circumstances—switching between in-person and online classes with short notices. This led many students to need temporary housing, which is hard to come by.

With HomeSlice, we offer the best quality, on-campus housing, helping students find their home away from home.

What it does

HomeSlice is a cross-platform web application where users can log in and out, browse listings for off-campus housing, create listings, and view their own listings.

On our home page, we offer an interactive map powered by Google Cloud Platform to return the closest housing option based on the user’s current location. As college students, our main criteria when choosing a place to live is the distance to campus. This rental map helps visualize what’s nearby, so students have a better idea of the community.

On our Listings page, we have compiled a collection of local student housing. These postings contain key information about the housing, including but not limited to address, lease term, number of bedrooms, number of bathrooms, and offered amenities.

We also have an individual listing page for the posts made by users. Here they can view only what they have posted. One goal for HomeSlice was to allow users to interact and give feedback on the places they have stayed so others can learn from their experiences. We added a review section to each listing page.

How we built it

We used HTML, CSS, Bootstrap, JavaScript, Google Maps API, and an MVC architecture to create the frontend. For the data, we used ‘CockRoachBD’ to store our SQL database. Our database stores information about the host, the property, dates the property is available, images, and the total price of renting the property for the specified time frame.

We used auth0 for user login and sign-up and implemented it within our express.js framework. Express.js, ejs, and MVC architecture were used to help with routing and developing this CRUD application. Having controllers, models, views, and routers kept everything organized.

With Google Cloud Platform’s Distance Matrix API, we created an interactive map containing all local student housing options near UNC Chapel Hill and UNC Charlotte. The API allowed for shortest distance calculations by rendering through the given geolocations of housing options and comparing the distance and driving time to UNC Chapel Hill Campus.

Challenges we ran into

We can definitely say we ran into several challenges during this hackathon, but we are happy with what we were still able to accomplish. One of the main challenges was getting the listing form data to properly be sent to, and stored in, our database. None of our teammates had much experience with databases or using CockroachDB, but through documentation, tutorials, and mentors, we were able to get it working!

Another challenge we faced was internet connection. Our team member who was working on the back end lost internet connection for several hours. With the use of CockroachDB, she was not able to work on it locally with a connection. She was able to obtain a slow connection through her mobile hotspot and was able to get the form completed.

Accomplishments that we're proud of

Working together with different skills and perspectives, we were able to build most of our ideas in a short amount of time. Our team was made of primarily frontend people and most of us did not have a lot of backend knowledge coming into this hackathon. We are most proud that we took this challenge as an opportunity for greatness and gained backend experience. We had a problem we wanted to solve and didn’t let lack of knowledge stop us.

Going into creating HomeSlice we had a lot of ideas for how we could create a one-stop solution to our own problems experienced as a student. We are proud of our teamwork and how we navigated different tasks like creating our Listings page, utilizing CockRoachDB, and integrating Google Cloud Platform services. On the backend, we were able to add user registration functionality, authentication, and creating listings. The database was built using models, successfully rendered test data, and added data to the database via built forms that we were able to connect to the front end!

What we learned

With HomeSlice, we learned that having a good team with varying passions and strengths always leads to creating a successful project. During the brainstorming phase of this hackathon, we had so many ideas as to how we could introduce innovative features to further HomeSlice. Despite being primarily front-end developers, we took the initiative to learn back-end technologies to solve the difficulties young adults face in the real estate industry.

This experience also provided us with an appreciation for product development and the nuances that are essential to creating a platform that requires many parts to connect harmoniously. Overall, building HomeSlice has taught us to dream big and achieve more.

What's next for HomeSlice

The team would love to continue to work on developing additional features for the platform to enhance our user’s experience with the real estate industry. Some possible future additions include:

Add filtering to our search bar
Adding update and delete functionality to listings and interactive user comments
Create a way for users to have conversations through our platform
Expand the map to show all listings

Built With

Submitted to

Pearl Hacks 2022
- Winner Google Cloud: "Best Use of Google Cloud API"
- Winner Bandwidth: "Best Communication and Community Hack"

Created by

This was my first time working primarily with backend. I created the skeleton files to use with express.js using the MVC architecture structure. I made sure all the routes and requests worked for each page. I also created some functions to find data. This was also my first time using auth0 for authentication. I worked with Ashley to pull data from the database she created into our rendered pages. Lastly, I worked on some of the frontend with our primary frontend lead, Carrie.

Zaina Shawar
I worked primarily on the backend, building and connecting to our database, which was challenging as someone usually works on front-end and had never used CockroachDB before. I also helped with some of the front-end, the Devpost submission, and created our README.md file in our repo.

Ashley Harmon
I am a current MSIT student, designer, developer, and lover of challenges!
I developed the UI/UX and frontend of our web application, including the home page, the listings page, and the host form. It was also my first time working with Express.js. I used Google Cloud Platform's Distance Matrix API to design and develop an interactive map to configure the closest, most convenient housing options for students.

Carrie Lu