Inspiration
Abode is a project that hits very close to home. Our team is composed of members who unfortunately were met with the tough roadblock of having everyday necessities no longer be obtainable. By nothing short of grace, we were able to pull ourselves up, but this just isn't the case for everyone. We strive to help homeless people access the resources they need with an ease that just can’t be found anywhere else. Instead of having to shift through multiple different sites and resources, everything is at your fingertips with Abode.
What it does
Abode searches through many different websites for places that provide free resources to those without a home, and displays this information to users. It helps users accurately find places for food, water, shelter, clothes, wifi, washroom and much more by offering the ability to search , and filter through the many resources and recommendations available.
How we built it
We built this app by using a combination of CSS, HTML, and Figma. For the landing page, we used HTML and CSS while our actual app prototype was built on Figma. We designated certain pages to different individuals and through constant Discord check-ins, we were able to maintain consistently and keep our workflow smooth.
Challenges we ran into
We ran into a number of challenges while creating our app, yet when we are able to step away for a moment, relax our minds and reface the problem at hand. Consequently, all of our troubles seem to fade away as we were able to look at the problem with a different light and new mindset.
When we were coding, one of the many challenges we encountered was implementing the typewriter effect to our home page. We spent hours testing this animation and our efforts seemed to be in vain; however, with teamwork and further debugging, we were able to perfect the typewriter effort to produce our desired outcome. Another major challenge emerged while we were building the landing page. We had accidentally misspelled a CSS file’s name, which resulted in the CSS stylings not appearing on our page. Although this may sound little, it caused some panic and mayhem as we could not figure out why the stylings were not working for the HTML page. Who knew such a simple mistake could end in such disastrous outcomes! Oopsies! Luckily, a simple break allowed us to refresh our minds and easily spot our mistakes.
Accomplishments that we're proud of
We are proud to have completed a fully aesthetically pleasing app with many functioning parts within time constraints, especially since this is our first hackathon. This was the team’s first hackathon; it was also the team's first time using Figma to implement complicated stylings into our web page. Nonetheless, we all pushed our skills to the limits with CSS animations and new techniques. Debugging through mass efforts and organized teamwork was a task that we could handle, and we remain surprised we did so effectively. We put our all into making this an easy user experience and an effective app with easy-to-understand features, which can help those who need it the most. All in all, we are all delighted with how our app turned out and are so excited for more hackathons in the future.
What we learned
This project included a lot of firsts for our team, not only was this our first hackathon together, but also the first time using figma and HTML/CSS to do things that we would have never imagined we would be able to do a week ago. This project taught us to be careful when naming files to avoid future troubles, but it also taught us the patience and Figma skills that will be transferable to other fun projects.
What's next for Abode
We intend to expand Abode to not only include homeless resources in Canada but in many countries across the world like the United States, Brazil, Italy and many more; thus, regardless of their location, homeless individuals can have access to life basic necessities with a few taps of their fingertips!
Log in or sign up for Devpost to join the conversation.