Getting Started with Create React App

Welcome to Leftover Marketplace. This is our project for WaffleHacks 2022.

Links

Presentation and Demo Video

Website Link

Figma

How to Run

Type in npm install, and install any necessaries dependencies such as React and react-router-dom. Then type 'npm start' in the terminal.

Inspiration

In America, around 30-40% of all food is said to be wasted. 43% of this waste comes from homes, and 40% comes from restaurants. Even before COVID, millions of people in America suffered from food insecurity. Now, combined with increased difficulties in finding employment, students in particular face immense financial hardships. Our project focuses on helping students who require additional assistance in obtaining cheap meals.

What it does

“A community-sourced online grocery store that rewards users for reducing food waste in their day-to-day lives”

Our project, Leftovers Marketplace, allows vendors to list food for others to see. These vendors can be anyone who has leftover meals, and even excess groceries and pantry foods. The vendors can also be restaurants, bakeries, cafes, and other establishments that want to list their food for external consumption. For safety purposes, these vendors must be verified using legal documentation, and there is also a report function.

Students in need, or the ‘buyers’, can contact sellers to organize payment and pick up of food. Sellers can list items along with a description of ingredients and allergens for others to more easily sift through foods that suit their needs.

We also had plans to create a marketplace where people can list Music/Art for sale, and also meet and connect with one another. Vendors who donate their leftovers/excess food can receive points, which will count towards a discount for the music/art listed in the Marketplace (up to a certain dollar value).

How we built it

We created a cozy-themed design using Figma, which was used in the creation of our Front-End, and that was made using React (along with HTML, CSS, and JavaScript). The bank-end was created using MongoDB. Finally, the website was deployed onto Vercel, which we managed to get it linked up to our domain name: http://www.leftoversmarketplace.tech/

Challenges we ran into

The major challenge that we encountered was connecting the front-end with the back-end, which was MongoDB. Although we could get both of them working together individually, we could not make them work together after deploying on Vercel and Netlify. Another challenge was the fact that most of us were beginners and this was some of our member’s first hackathons, so although we had great ideas, we could not implement some of the features that we wanted to.

Accomplishments that we're proud of

However, despite it being some of our team member's first hackathon experience, we thought we worked together very well and managed to create a project we were proud of. Even though we did not include many features in our design, we still were able to learn about them. A member figured out how to use Google Autocomplete (using Google Maps JavaScript API) to autocomplete the address; however, because we did not have time to implement a map search function, we decided not to include it and focus on more important features. We also learned about Socket.io for bi-directional communication, and Twilio text messaging capabilities.

What we learned

We learned how to transfer Figma design styles to a React Front-end. We also paid attention to clean code and file structure, which saved a lot of time because we had multiple pages, a different CSS file for each page, and multiple components, and a different CSS file for each component. This helped in terms of accessibility, and also having multiple members working on the project at the same time. We also learned more about React and MongoDB.

What's next for Leftovers Marketplace

There are many features that we had for our project that we were not able to implement. Mainly connecting the front-end with a functional back-end is the biggest one. We would also like to implement Google Maps API for location searching and SocketIO for the chat functionality, and Twilio for text messaging. In addition, we wanted to create a marketplace where users can sell art/music, and then vendors who donate leftovers can receive points that will work towards a discount.