A well-supplied front end experience that serves the community
Last Updated: April 7th 2021
Kupboard by Ray Messina
Inspired by communities that started small, local food banks in response to the pandemic, Ray Messina wanted to make something that would support these efforts.
For his final project and graduating with honors in our Front End Bootcamp, he built a website to manage the creation, management, inventory, and requests of micro-food banks which he called Kupboards.
The technologies Ray used to stock his app were React, React Strap, Redux, and utilizing APIs such as Google Maps and Zippopotamus.
One notable point of structure is that instead of modifying text in a component, Ray has all the data being passed through js data files.
The web app allows users to search existing Kupboards based on zip code, which is driven by the Zippopotamus API.
Clicking on a result will display a details page for that specific Kupboard which will show 1) a customizable image, 2) available inventory, 3) donation requests to stock the inventory, 4) announcements specific to the Kupboard, and 5) its location pinpointed on a Google map.
The web app also features a functional account registration and login system, which is always a nice touch to see in finished student projects.
Registered users can create a Kupboard and maintain its ainventory, announcements, other features mentioned above, but also available hours.
The form that allows users to manage their Kupboard is fairly complex and given the nature of how inventory is managed, users are able to add and remove elements in the inventory list, resulting in an arbitrary number of elements in the form.
The complexity of not having a fixed number of elements in the form was one of the most significant challenges for Ray.
The second biggest challenge was enabling the form component, which stored the address location, to communicate with the footer component, which stored the Google Map display.
After completing the Front End Bootcamp, Ray has decided to take the extra courses to meet the Full Stack requirements and is looking forward to hooking in a proper database to manage the data.
Chevas Balloun
Director of Marketing & Brand
Chevas has spent over 15 years inventing brands, designing interfaces, and driving engagement for companies like Microsoft. He is a practiced writer, a productivity app inventor, board game designer, and has a builder-mentality drives entrepreneurship.