Shopinder

Inspiration

We shop online now more than ever before, and it is becoming more and more common to find an item we want to buy, only to tell ourselves we will compare other deals or come back to it later. However, oftentimes we forget about it, and end up just not buying the item. If it's an essential item, then this can become a major inconvienience. So, we created a web app to allow us to set email or phone reminders for buying items at a later time.

What it does

A user can enter in a URL that directs to a store page from one of nine supported stores. The app will dynamically generate an item component, with the item's info, price, and currency. Users can interact with the component to set up notifications to buy the item at a later date, via either SMS text messaging or email. Users can keep track of the full list of notifications they have set up through their shopping list, and remove notifications they do not wish to keep.

Technologies used

Front end: HTML, CSS, JavaScript, Svelte
Back end: Flask, MongoDB, Twilio, Python

Challenges we ran into

Determining which framework to use to best accomplish our design goals. At first, we wanted to use React, however it was very buggy, and hard to learn in a short time given the majority of us did not have any JavaScript skills before this hackathon. After some trial and error, we then decided to use Svelte, as it has a much lower learning barrier, and can be used to create reactive components just like React can.

Another challenge we ran into was the web scraping of store sites being very inaccurate for getting the price, image, and name of products. We thought about using API's instead, however many stores do not have a public API that is free to use for everyone. So, we had to make do with the buggy nature of web scraping. This also meant that our app was not very scalable, as every store required its own function to web scrape the appropriate data.

Accomplishments that we're proud of

We managed to develop all the main features that are key to the application, which includes being able to create reminders for specific products from store pages, keeping track of our reminders through a "shopping list", and being able to receive notifications at the specified times via email and phone. For Tanish and Tony, this was also their first time developing an application using a JS framework.

What we learned

Improved front and back end web development skills
Skills programming in JS, specifically using the Svelte framework
The use of databases to keep track of data
How to use Twilio to set phone reminders
The importance of developing code in a way that is scalable (important for next time!)

What's next for Shopinder

The main improvement we can make to the project is to make the project more scalable so we can support more stores. To do so, we may not be able to fully rely on web scraping, and sooner or later will need to utilize the store's API's, even though they may be costly or not as open source. Another area for improvement is speed. Although the app is responsive and highly reactive, sometimes components can take time to load when we modify the text field that corresponds with the URL, as we are making API calls frequently. Being able to optimize that area further will result in speed improvements.