TransitNest

Relocating professionals have countless responsibilities, one of which is finding housing. In order to assist in this process, we developed TransitNest, a rental property search service.

Comment

Check out the live website in the link below!

Inspiration

We were inspired by our struggle to find cheap housing near work/school.

What it does

Uses an aggregate dataset to find housing near public transporation.

How we built it

Frontend

We used React to develop the site itself. In order to change the site elements, we used Tailwind CSS. We integrated the Google Maps API to display a map on the user's screen. We used the Google Maps API to plot a path between the latitude and longitude of the house and the zip code the user selected. To allow users to take a screenshot of the map and send it to our chat assistant, we used html2canvas.

Backend

For the backend, we utilized the FastAPI Python Framework to host endpoints that allow our frontend to query data. We used the Zillow Public Research Data to find rental prices at DC area addresses. Additionally, we utilized the Google Maps Platform API to produce an interactive Google Map and gather direction data from the filtered locations to the end ZIP code.

Challenges we ran into

Elements on the screen were not being updated while a fetch request was being processed, so we had to implement a loading screen.

The property listings wouldn't fit on the page, and the application didn't completely fit on the screen. We resolved this by reimplementing the CSS classes after a thorough review of the Tailwind documentation.

We were originally going to use the OpenStreetMap API, but the necessary frequency of requests wasn't supported. As a result, we opted for the Google Maps API. A free trial provided us with $300 in credits, which we haven't made a dent in yet.

When it came time to deploy, we encountered an issue with our environment variables while trying to use GitHub Pages, so we decided to deploy using an Amazon EC2 instance.

Accomplishments that we're proud of

For many of us, it was our first time using React. Learning about how the framework is structured and how to properly utilize it made the experience a lot more fun and a lot less tedious.

We built a full-scale app integration by splitting the workload evenly across all group members. We were extremely surprised to see that this integration came together without many errors.

We had an instance where we had to merge two divergent branches in Git, and we managed to have a merge with no conflicts, which left us all very happy.

What we learned

How to implement a full-stack web application using React for the frontend and FastAPI for the backend, along with third-party APIs like Google Maps to enable certain functionalities.

What's next for TransitNest

Use live data provided through potential partners. Adding more security to the backend to have a more robust user experience and to minimize the risk of API abuse.

Share this project:

Updates