ShopSmart

Log In Page
Employee view
Customer view
Showcasing Filters
Dropdown for Expiry dates
Dropdown for Price Ranges
Employee Edit View

Inspiration

Food Waste is an issue globally that while is being worked to decrease, it's still often looked over. We wanted to find a way that we could help with this issue, and we came up with shop smart as a way to keep track of expiration dates and discounts. This way it would attract customers to buy food (discounts) while also keeping food from being thrown away due to expiration dates.

What it does

The web app first requires the user to log in, through two options as either a customer log in or an employee log in. Depending on which "account" type it logs into, there are two different views. In the customer view, the user can only view the products from the store along with their expiration dates and discounts (original price + discounted price if applicable). They can also sort the cards based on product name, expiration date, price, etc. The other view is the employee view. In this view, the employee can also see the products in the same way as the customer but with an additional "edit info" button and "remove" button to possibly edit/remove products. They also have an area where they can add product info.

How we built it

We first brainstormed our project ideas that best aligned with WakeFern's Sustainability and Social Impact in Grocery goal. Then we researched what coding languages would be best for our vision, and came to the conclusion that React, HTML, CSS, and JS would be our best way to approach building a web app. We used youtube and other online sources to clarify any doubts we had throughout our process of creating our web app, also utilizing AI to help keep us on track.

Challenges we ran into

Since we're all reletavily new to making web apps and react-based applications, we ran into the challenge of having to bring our vision to life. We had to learn the different skills needed (especially with creating using React).

Accomplishments that we're proud of

We're proud of being able to adapt to learning the languages we used quite quickly and efficiently for our web app. While it was definitely difficult to navigate using react and the in general coding to bring our idea to reality, we overcame the obstacle and were able to create this project.

What we learned

We learned in both technical and soft skills sides. Technically, we learned new languages and how to implement them (such as usign react, reviewing js css and html, deploying our projects). Soft skills side, we learned how to work as a team and also how to work under a time constraint. As a team, we learned how to decide on an idea all together to go forth with as well as communicating with each other and dividing tasks. With a time constraint under place, we learned how to use every hour to our best advantage (learning + implementing code).

What's next for ShopSmart

With more time/in the future, we'd first change the web app from being locally stored to being connected to actual databases. Furthermore, we would partnering up with smaller businesses and possibly have sections based on each store. This way we could also have staff from multiple stores inputting their own data, with actual account log ins. Through this we'd be able to reduce food waste in the local community, possibly expanding out further.