Inspiration
In response to the recent snowstorm that devastated tens of millions of Texas residents, Texas grocery stores were emptied, and residents were left with no other choice but to turn to each other for food, water, and other essential supplies. Helping Hand is a platform that allows others to lend a helping hand to those in need in times of crisis, allowing users to connect with other members of the community who may be requesting or offering supplies.
What it does
The app loads a map based on a user's current location. The user can then add a marker (red to receive, green to give) to their location on the map to create listings to give and/or receive supplies. As more users post their listings, the map will fill up with offerings and requests, and users can connect with others by clicking on a marker to learn more information about a listing (such as items requested/offered, availability, contact information, and any additional notes).
How we built it
HelpingHand was built with MongoDB, React, ExpressJS, and Leaflet.
Challenges we ran into
1) Address geocoding: Leaflet does not provide geocoding or controls, so we generated markers based on the user's current location at the time of the listing. 2) CSS Framework: We had difficulty implementing the Form components from the Bulma React components.
Accomplishments that we're proud of
Successfully connecting a back-end database to a front-end client Integrating a unfamiliar Javascript library with a React app Branding
What we learned
How to design wireframes and use UX tools like Adobe XD React, MongoDB (NoSQL databases), Leaflet
What's next for Helping Hands
In the future, we hope to be able to expand our scope of the audience by partnering with local food banks and organizations, where they can also post listings to give or receive.
Log in or sign up for Devpost to join the conversation.