-
-
Adding items to shopping cart
-
Shopping Cart
-
Searching for items
-
Price History Chart
Inspiration
As hungry college students with limited transportation options, grocery delivery can be a very valuable service. Preparing healthy meals and shopping for groceries can be very time-consuming, so expensive prices can make it hard to justify not just buying a not-so-healthy fast-food meal. In seeking to satisfy our need for healthy and inexpensive groceries in a sustainable manner, we want to get the best price for the most nutrition. This is where StockUp⬆️ comes in. Our Weee Price Tracker helps us compare current prices with past ones to help see if you are being offered the best price right now. Based on past data, it is possible to predict price trends for various products and see how prices have changed over time.
What it does
This app tracks product prices from the online grocery deliver service Weee! which specializes in a wide range of Asian products. We created an API to collect data about previous prices on Weee! given a search term. Then, we plot the data on a chart. With information about past prices, a predication for future prices on those products can be made. Using the API, we collected data on the current products that match a search query and display the name, current price, and image of the product. From historical data, we also generated graphs demonstrating trends of past prices so that the current price can be viewed with this context. A shopping cart feature is available to track how much you would spend if you were to buy those products today and so that you can save interesting products.
How we built it
The frontend was built with React.js and TypeScript. Boilerplate code was generated and built upon using Vite, a JS bundler. Styling was done using react-bootstrap and inline CSS statements. The backend was built with Selenium. we exposed private calls that they made to retrieve information to serve on the website. we used seleniumwire to observe network traffic to get the proper authentication.
Challenges we ran into
Getting the types in TypeScript correct was very annoying. Learning how to use contexts and sharing props between components was very difficult. Attempting to scour through network traffic and parse through it all was a real challenge as well. A lot of the historical data that we used came from benchmarks of common groceries, and were not specific to the products themselves, but they provided a good visualization and baseline to work with, especially since past price data is not available for Weee!, and we can only scrape prices for the present.
Accomplishments that we're proud of
We managed to find and plot price data from Weee! using our own API. We implemented a shopping cart feature that would remain updated even after refreshing the page. The cart results remain even after refreshing the page. We are able to perform an API search on hundreds of products and collected data on prices using the Wayback machine and KeepaAPI to utilize in our graphs. All of us learned something new and are excited to have created an application that people can use to help make more informed decisions about grocery purchases.
What we learned
We learned how to use React.js and TypeScript to create a basic shopping cart and store, how to use contexts and props, how to plot charts using Chart.js, and how to use Selenium and API tokens to collect historical and current data from websites.
What's next for Weee Price Tracker
Styling improvements, better trend prediction, and gathering more data to predict with. We also wanted to use sentiment analysis on news outlets related to farms to better assist prediction. For example, with the onset of avian flu among chickens and negative outlook on news outlets, egg prices could be higher in certain zip codes.
Log in or sign up for Devpost to join the conversation.