Inspiration
The inspiration behind this project stems from personal experiences with house searching, particularly during the second year of college. It became evident that real estate websites had certain shortcomings when it came to presenting comprehensive data on schools. Most of these platforms only provided information about the school associated with a selected house, lacking the ability to offer meaningful comparisons. This limitation prompted the need for a solution that could offer a more nuanced perspective on educational equity, beyond just school data, and also encompass aspects of the environment. The goal was to create an easy-to-understand index that could effectively convey these critical factors to potential homebuyers.
What it does
User-Friendly Interface: Our application features a clean and intuitive interface that allows users to input their prospective address for buying or renting. It performs initial validation to ensure the address is valid and exists.
Backend Data Processing: Once the user submits an address, our app sends this information to the backend. There, a combination of machine learning algorithms and APIs is employed to collect and process relevant data.
Data Transformation: The collected data is then transformed into an easy-to-understand score, complete with subcategories that provide a comprehensive view of various factors.
Interactive Visualization: The processed data is sent back to the frontend, where it is used to generate visually engaging results. Users are presented with an interactive page that displays the information using a graphing library.
Top-Scoring House Listings: Alongside the graphical representation of the user's address data, our app also provides a list of top-scoring houses located in proximity to the entered address. Each listing includes essential information and images to aid users in making informed decisions about their potential new home.
How We Built It
Defining Goals and Features: We began by meeting and evaluating our project's goals and the essential features required.
Flow Diagram Design: To outline the application's functionality and data flow, we created a comprehensive flow diagram.
Technology Stack Selection: After careful consideration, we selected a technology stack that struck a balance between our team's familiarity, efficiency for our project's needs, and opportunities for learning.
Python Backend: We decided to build our backend using Python, leveraging the Natural Language Toolkit (NLTK) for calling APIs to fetch data and implementing machine learning for data processing.
TypeScript for Frontend: Opting for TypeScript over JavaScript, we aimed for a more professional approach and sought to deepen our expertise in this technology. We also integrated the Tailwind CSS framework for enhanced animations and coding style ease.
React Frontend Setup: We set up the project in React for the frontend and immediately implemented a router to maintain organized pages in a Single Page Application (SPA) format.
Backend API Integration: Our team worked meticulously to fine-tune the backend API calls, crafting formulas for calculating the final overall score and the scores related to environmental and educational equity.
Animation Goals: To enhance the user interface and experience, we set a goal to incorporate numerous animations throughout the application.
Advanced Tailwind Techniques: We applied advanced techniques within the Tailwind CSS framework to achieve these animations and smoothen the user interface.
Frontend-Backend Connection: The frontend and backend were seamlessly connected using GET requests and CreateBrowser.
Challenges We Ran Into
API Call Limits: Dealing with API call limits posed a challenge, as it limited the amount of data that could be fetched and processed.
Glitched Address Entry Form: Encountering issues where the address entry form was glitched or obscured by other divs presented a user interface challenge that required resolution.
Module Functionality Import: Integrating functionality from one sub-module into another part of the application proved to be a complex task, requiring careful planning and implementation.
ChartJS Setup for Animations: Configuring ChartJS to work seamlessly with animations and interactive features presented a technical challenge that needed attention.
Learning Tailwind Commands: Mastering the various Tailwind CSS commands required for the project was a learning curve that the team had to overcome.
Designing the Mock Logo: The process of creating the mock logo involved design challenges, requiring creativity and attention to detail.
Accomplishments That We're Proud Of
Data Integration: Successfully finding and integrating sufficient data sources to support the entire project idea, ensuring comprehensive and reliable information.
Smooth Animations: Achieving a high level of user experience by implementing smooth and intuitive animations on the frontend, enhancing the overall design.
Address Verification: Implementing an automatic address verification process before running the application, ensuring data accuracy and reliability.
Machine Learning Integration: Utilizing machine learning to compute weightage and scoring within different categories, providing users with meaningful and comprehensive insights.
API Utilization: Making extensive use of numerous APIs, primarily Google APIs, for data retrieval and leveraging Apify scraping APIs to access essential information.
Comprehensive Rating Systems: Displaying a wide variety and a significant amount of factors related to homes through two straightforward and informative rating systems, simplifying the decision-making process for users.
What we learned
Participating in this hackathon was an invaluable experience that allowed us to explore innovative solutions for improving the home-buying and renting process. Throughout the event, we gained a multitude of insights and skills:
Effective Data Sourcing: We learned the importance of sourcing and integrating diverse data sets to create a comprehensive and informative platform. This skill will be invaluable in future data-driven projects.
User-Centric Design: Designing a user-friendly interface and integrating smooth animations highlighted the significance of prioritizing the user experience. This lesson will guide our approach in future projects to ensure user satisfaction.
API Integration: Leveraging various APIs, including Google APIs and Apify scraping APIs, taught us how to efficiently access and process external data sources, expanding our toolkit for future API integrations.
Machine Learning Application: The utilization of machine learning for scoring and weighting categories provided us with hands-on experience in deploying ML models for practical purposes, which we can apply to various domains.
Advanced UI Development: Developing an advanced UI that can display property images and enable value comparisons broadened our understanding of frontend development, which will be advantageous in future web app projects.
Visual Data Representation: Enhancing data visualization by incorporating visuals and graphs demonstrated the effectiveness of presenting complex information in an accessible and engaging manner.
What's next for Score My Home
Expanded Categories: Implementing additional categories to provide even more comprehensive scores for different aspects of properties, giving users a richer understanding of their prospective homes.
Google Autocomplete Integration: Enhancing the address input experience by incorporating the Google Autocomplete API into the search bar, ensuring precise and efficient address entry.
Advanced UI Development: Creating a more advanced user interface that can display multiple images of properties, allowing users to compare property values and value per unit of rating.
Authentication Integration: Introducing authentication using Firebase to offer users the ability to save searches and facilitate their home-searching process with personalized features.
Enhanced Visuals and Graphs: Expanding the use of visuals and graphs to depict subcategories in addition to the existing sections of the Pie Chart, providing users with more visual insights.
Distance Measurement Interface: Implementing an interface to calculate and display the distance from the selected house to the best alternative house using the Google Navigation API, aiding users in assessing location convenience.
Built With
- chart.js
- flask
- google-air-quality-api
- google-cloud
- google-maps-platform
- google-places
- google-solar-api
- natural-language-toolkit
- pandas
- python
- react
- react-router
- tailwind
- typescript
Log in or sign up for Devpost to join the conversation.