Inspiration

AffordaHome was inspired by the growing housing crisis and the challenges that people face when searching for safe, affordable shelters in moments of urgency. From natural disasters to economic hardships, we noticed how many individuals and families struggle to quickly find reliable housing options. We wanted to create a platform that would make the process easier, faster, and more compassionate. Our goal was to remove the friction that often exists in emergency housing searches and offer a solution that puts users first, delivering safety and dignity with every search.


What it Does

AffordaHome is an intuitive web platform designed to help users quickly locate nearby affordable shelters. By using a combination of real-time data and an interactive map interface, users can filter options based on availability, location, and other key factors such as number of beds and special accommodations. The platform provides clear, easy-to-understand information and ensures that users can find the right shelter within minutes—whether they are on desktop or mobile devices. AffordaHome is designed to meet people where they are, in moments of crisis, with the information they need the most.


How We Built It

AffordaHome was built using HTML5, CSS3 for the frontend, with a strong emphasis on responsiveness and accessibility. The project followed user-centered design principles, and we focused heavily on building a clean, minimalist user interface that reduces complexity during stressful situations.


Challenges We Ran Into

The project presented several challenges, including:

  1. Data Accuracy: Ensuring that the shelter data is always up-to-date and reliable required multiple data sources and constant updates.

  2. Mobile Optimization: Many users in emergencies will be on mobile devices, so optimizing for smaller screens and slower internet connections was a critical challenge. We spent significant time testing across different platforms to ensure smooth performance.

  3. Balancing Aesthetics with Functionality: It was difficult to maintain a sleek and appealing design while ensuring that the platform remained simple enough for users under stress. Striking this balance required several iterations and user feedback loops.


Accomplishments That We’re Proud Of

  • Creating a User-Centered Experience: We’re proud of designing a platform that is intuitive and accessible to all users, regardless of their technical skills. Our design simplifies a complex problem in a compassionate way.

  • Focus on Accessibility: We built AffordaHome to meet web accessibility standards, ensuring that it can be used by people with disabilities, including those using screen readers.


What We Learned

Throughout the development of AffordaHome, we gained invaluable insights:

  • Empathy in Design Matters: We learned the importance of understanding the emotional state of users and designing for those who may be in distress. Simplicity and clarity can be more impactful than flashy design when dealing with sensitive situations.

  • The Power of Real-Time Data: Integrating and managing real-time data sources for shelter information taught us a great deal about API management and ensuring data reliability.

  • Mobile First Approach: We learned the critical importance of building for mobile devices first, especially when considering the high likelihood that users will be on their phones in times of emergency.


What’s Next for AffordaHome

AffordaHome is just the beginning of a broader vision to transform how people find affordable housing. Future plans include:

  • Expanding Shelter Data: We aim to expand the platform to cover more shelters across various regions, improving both the volume and quality of data.

  • Partnerships with Nonprofits and Governments: We plan to collaborate with local governments, nonprofit organizations, and emergency response teams to further enhance the platform’s reach and effectiveness.

  • Predictive Tools: In the long term, we hope to implement predictive analytics that can help users anticipate housing shortages and crises, offering a proactive approach to shelter management.

  • User Personalization: We plan to introduce personalized experiences that recommend shelters based on user preferences, needs, and history.

AffordaHome is committed to providing more than just a temporary solution—we’re creating a future where finding affordable housing is fast, reliable, and accessible to everyone, no matter the circumstances.

Share this project:

Updates

posted an update

<!DOCTYPE html> AffordaHome - Find Shelter Fast /* General styles */</p> <ul> <li>{ margin: 0; padding: 0; box-sizing: border-box; font-family: &#39;Roboto&#39;, sans-serif; }</li> </ul> <p>body { background-color: #F7F7F7; color: #333; }</p> <p>.container { width: 90%; max-width: 1200px; margin: 0 auto; }</p> <p>/* Navigation Bar */ .navbar { background-color: #264653; padding: 1em 0; }</p> <p>.logo { font-size: 1.5rem; color: white; font-weight: 700; }</p> <p>.nav-links { list-style: none; display: flex; justify-content: flex-end; }</p> <p>.nav-links li { margin-left: 1.5em; }</p> <p>.nav-links a { color: white; text-decoration: none; font-weight: 500; font-size: 1.1rem; }</p> <p>.nav-links a:hover { color: #E76F51; }</p> <p>/* Hero Section */ .hero { background: url(&#39;<a href="https://www.elementproperties.com/wp-content/uploads/City-Moves-Closer-to-its-Affordable-Housing-Goal-with-Local-Awards-of-Housing-Tax-Credits.jpg&#x27;">https://www.elementproperties.com/wp-content/uploads/City-Moves-Closer-to-its-Affordable-Housing-Goal-with-Local-Awards-of-Housing-Tax-Credits.jpg&#39;</a>) no-repeat center center/cover; opacity : 100%; color: white; text-align: center; padding: 100px 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; }</p> <p>.hero h1 { font-size: 3.5rem; margin-bottom: 1rem; }</p> <p>.hero p { font-size: 1.5rem; margin-bottom: 2rem; }</p> <p>.cta-btn { padding: 15px 40px; background-color: #E76F51; color: white; border: none; border-radius: 5px; font-size: 1.2rem; cursor: pointer; }</p> <p>.cta-btn:hover { background-color: #D35D41; }</p> <p>/* Search Section */ .search-section { background-color: #FFFFFF; padding: 50px 20px; text-align: center; }</p> <p>.search-section h2 { font-size: 2.5rem; margin-bottom: 1rem; }</p> <p>.search-bar { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; }</p> <p>.search-bar input, .search-bar select { padding: 12px; width: 250px; border-radius: 5px; border: 1px solid #ddd; }</p> <p>.search-btn { padding: 12px 25px; background-color: #2A9D8F; color: white; border: none; border-radius: 5px; cursor: pointer; }</p> <p>.search-btn:hover { background-color: #21867A; }</p> <p>/* Map Section */ .map-section { background-color: #F4F4F9; padding: 50px 20px; text-align: center; }</p> <p>.map-placeholder img { border-radius: 10px; max-width: 100%; }</p> <p>/* Testimonials Section */ .testimonials-section { background-color: white; padding: 50px 20px; text-align: center; }</p> <p>.testimonials { display: flex; justify-content: space-around; }</p> <p>.testimonial { max-width: 400px; background-color: #F4F4F9; padding: 20px; border-radius: 10px; }</p> <p>.testimonial p { font-size: 1.2rem; font-style: italic; }</p> <p>.testimonial h4 { margin-top: 1rem; font-weight: 500; }</p> <p>/* How It Works Section */ .how-it-works { background-color: #2A9D8F; color: white; padding: 50px 20px; text-align: center; }</p> <p>.steps { display: flex; justify-content: space-around; }</p> <p>.step { max-width: 300px; text-align: center; }</p> <p>.step h3 { margin-top: 1rem; font-size: 1.5rem; }</p> <p>.step p { margin-top: 0.5rem; font-size: 1rem; }</p> <p>/* Footer */ .footer { background-color: #264653; color: white; text-align: center; padding: 20px 0; }</p> <p>.footer p { margin-bottom: 10px; }</p> <p>.footer-links {</p> <pre class="language-nolang"><code> &lt;/style&gt; </code></pre> <p></head> <body> &lt;!-- Hero Section --&gt; <header class="hero"> <div class="hero-content"> <h1>AffordaHome – Helping You Find Shelter, Fast</h1> <p>Search shelters based on location, availability, and more.</p> <button class="cta-btn">Find Shelter</button> </div> </header></p> <pre class="language-nolang"><code>&lt;!-- Search &amp; Filter Section --&gt; &lt;section class=&quot;search-section&quot;&gt; &lt;h2&gt;Search for Shelters&lt;/h2&gt; &lt;div class=&quot;search-bar&quot;&gt; &lt;input type=&quot;text&quot; placeholder=&quot;Enter location or zip code&quot;&gt; &lt;select&gt; &lt;option value=&quot;&quot;&gt;Shelter Type&lt;/option&gt; &lt;option value=&quot;family&quot;&gt;Family Shelter&lt;/option&gt; &lt;option value=&quot;single&quot;&gt;Single Shelter&lt;/option&gt; &lt;option value=&quot;emergency&quot;&gt;Emergency Shelter&lt;/option&gt; &lt;/select&gt; &lt;button class=&quot;search-btn&quot;&gt;Search Now&lt;/button&gt; &lt;/div&gt; &lt;/section&gt; &lt;!-- Interactive Map Section --&gt; &lt;section class=&quot;map-section&quot;&gt; &lt;h2&gt;Shelters Near You&lt;/h2&gt; &lt;div class=&quot;map-placeholder&quot;&gt; &lt;!-- Embed Google Map here or use a static image as placeholder --&gt; &lt;img src=&quot;https://via.placeholder.com/800x400&quot; alt=&quot;Map Placeholder&quot;&gt; &lt;/div&gt; &lt;/section&gt; &lt;!-- Testimonials Section --&gt; &lt;section class=&quot;testimonials-section&quot;&gt; &lt;h2&gt;Success Stories&lt;/h2&gt; &lt;div class=&quot;testimonial&quot;&gt; &lt;blockquote&gt; &quot;AffordaHome helped me find shelter for my family in no time!&quot; &lt;footer&gt;— John Doe&lt;/footer&gt; &lt;/blockquote&gt; &lt;/div&gt; &lt;div class=&quot;testimonial&quot;&gt; &lt;blockquote&gt; &quot;A life-changing experience. I&#39;m so thankful for AffordaHome!&quot; &lt;footer&gt;— Jane Smith&lt;/footer&gt; &lt;/blockquote&gt; &lt;/div&gt; &lt;/section&gt; &lt;!-- How It Works Section --&gt; &lt;section class=&quot;how-it-works-section&quot;&gt; &lt;h2&gt;How It Works&lt;/h2&gt; &lt;div class=&quot;steps&quot;&gt; &lt;div class=&quot;step&quot;&gt; &lt;h3&gt;Step 1&lt;/h3&gt; &lt;p&gt;Search for Shelters in your area.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;step&quot;&gt; &lt;h3&gt;Step 2&lt;/h3&gt; &lt;p&gt;Contact or apply to your selected shelter.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;step&quot;&gt; &lt;h3&gt;Step 3&lt;/h3&gt; &lt;p&gt;Get assistance and find a place to stay.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;!-- Social Media Section --&gt; &lt;section class=&quot;social-media-section&quot;&gt; &lt;h2&gt;Follow Us&lt;/h2&gt; &lt;div class=&quot;social-icons&quot;&gt; &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://via.placeholder.com/32&quot; alt=&quot;Facebook&quot;&gt;&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://via.placeholder.com/32&quot; alt=&quot;Twitter&quot;&gt;&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://via.placeholder.com/32&quot; alt=&quot;Instagram&quot;&gt;&lt;/a&gt; &lt;/div&gt; &lt;/section&gt; &lt;!-- FAQ Section --&gt; &lt;section class=&quot;faq-section&quot;&gt; &lt;h2&gt;FAQs&lt;/h2&gt; &lt;div class=&quot;faq-item&quot;&gt; &lt;h3&gt;How do I apply for shelter?&lt;/h3&gt; &lt;p&gt;Simply search for shelters in your area and follow the application instructions provided on the shelter&#39;s page.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;faq-item&quot;&gt; &lt;h3&gt;What types of shelters are available?&lt;/h3&gt; &lt;p&gt;We offer family shelters, emergency shelters, and single-person shelters. Use the filters to find what you need.&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;!-- Footer Section --&gt; &lt;footer class=&quot;footer&quot;&gt; &lt;div class=&quot;footer-content&quot;&gt; &lt;p&gt;© 2024 AffordaHome. All Rights Reserved.&lt;/p&gt; &lt;ul class=&quot;footer-links&quot;&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Terms of Service&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/footer&gt; </code></pre> <p></body> </html></p>

Log in or sign up for Devpost to join the conversation.