Inspiration
I wanted to create a web application that is practical and could help others during the holidays. With food insecurity rising in Los Angeles, CA, I thought a good way to help is providing a platform where anyone could submit their grocery list and another user can donate to cover the expenses.
What it does
It is a web application that has two separate path depending on what the user wants.
If the user is a recipient, they view items, add to their cart, and confirm their list.
If the user is a donor, they can see what available lists have been submitted, select the one they wish to donate, and then submit their details and payment for their list.
How we built it
- React 18
- Bootstrap
Challenges we ran into
Originally, this was supposed to be a full-stack application with Spring Boot but I did not have the time. I was getting ahead of myself by using React since I'm more familiar with Angular, but I wanted to try it since React is a popular framework.
Routing and getting images from the public folders took a bit of trial and error until I got it right.
I'm unfamiliar with Context and State in React, so these are concepts I will go over on my own in the future.
Accomplishments that we're proud of
- Using React and getting a better understanding of it
- Cart functionality
- Challenging myself to create a project that can give back to the community
What we learned
- React and bootstrap
- Pages and Components
- Routing
What's next for Hearty Helpers
- Make it a full-stack application
- Improve the UI
- Create a login system to save user info
Log in or sign up for Devpost to join the conversation.