React Relief

Front Page
Example Email Upon Match

Inspiration

The hotel of one of our teammates while he was on vacation was destroyed by a tsunami. We realized not everyone could find accomodation like our teammate, so decided to mitigate this app.

What it does

Connects people willing to provide refuge with those seeking refuge based on location and other requirements.

How we built it

React Relief was built using a combination of modern web technologies and third-party integrations:

Frontend Development: We used React.js for building the user interface, leveraging its component-based architecture to create a modular and maintainable codebase. CSS3 was employed to style the platform and ensure a responsive design across different screen sizes, allowing users to access the platform from various devices.
Backend Development: The backend was powered by Node.js, where we used Axios to handle HTTP requests. We integrated React Router for navigation and routing within the application, providing a seamless single-page application experience.
Data Management with Airtable: We utilized Airtable as our database to store information about seekers and providers. Airtable's forms were used for collecting user data, while the Airtable API allowed us to query and filter the data based on location, capacity, and other criteria.
Automation with Zapier: Zapier was integrated to automate workflows, such as sending emails to potential hosts when a new seeker entry matched the criteria. This helped reduce the need for manual intervention and ensured timely communication.
Matching Algorithm: We built custom logic to match seekers with hosts based on criteria such as location and capacity, ensuring that the matching process was efficient and accurate.

By combining these technologies, we were able to build a platform that facilitates quick and reliable connections between individuals in need and those offering assistance.

Challenges we ran into

During the development of React Relief, we encountered several challenges:

Data Matching Logic: Ensuring that seekers and hosts were matched accurately based on location, capacity, and other criteria was more complex than anticipated. We had to refine our filtering algorithms and Airtable integration to make the matching process seamless.
Airtable Integration Limitations: While Airtable provided a flexible database solution, we faced limitations in terms of querying capabilities and rate limits. We had to implement workarounds and optimize our data retrieval processes to improve performance.
User Experience Design: Creating an intuitive user interface that could accommodate both seekers and hosts proved challenging, as the platform needed to be simple enough for users in crisis to navigate, yet detailed enough to collect all necessary information.

Accomplishments that we're proud of

We're proud of the progress we've made with React Relief:

Seamless Refugee-Host Matching: We successfully implemented a matching system that connects those in need with available hosts based on location and capacity, helping to bring aid to those affected by natural disasters.
Responsive Design: Our platform features a user-friendly, responsive design that allows users to easily access the site on various devices, making it accessible during emergencies.
Integration of Multiple Technologies: By integrating Node.js, React, Airtable, and Zapier, we built a full-stack solution that automates key processes and streamlines the user experience.

What we learned

Throughout this project, we gained valuable insights:

Effective Use of Airtable: We learned to work within the limitations of Airtable by optimizing our data structures and using Zapier to automate processes. This taught us the importance of adapting our approach based on tool capabilities.
User-Centered Design in Crisis Situations: We gained a deeper understanding of designing user interfaces for individuals under stress. Ensuring clarity and ease of use in our design was crucial for making the platform accessible.
Team Collaboration: Building React Relief highlighted the value of collaboration, especially when navigating complex problems. We developed better communication strategies and project management practices.

What's next for React Relief

The journey for React Relief doesn't end here. We're planning to:

Expand Matching Criteria: Include more variables such as accessibility needs, pets, and duration of stay to make the matching process even more personalized.
Enhanced Mobile Experience: Develop a dedicated mobile app to improve accessibility for users during crises, especially those who may only have a smartphone available.
Partnerships with NGOs and Local Governments: Collaborate with disaster response organizations to expand our reach and ensure React Relief becomes a go-to resource during emergencies.
Advanced Notifications and Alerts: Implement real-time notifications for hosts and seekers, including alerts when new shelter options become available in their area.