Wishlist

• 

  splash page

• 

  sign up

• 

  searching for item

• 

  saved items list

• 

  item details

• 

  list actions

• 

  settings

Inspiration

When browsing the internet or window shopping online, it becomes very hard to remember products that stand out to you when your list is growing. We wanted to make it easier to find these products again, interact with them, and refresh the way you think about making a wish-list.

What it does

Our app makes it as easy as possible to start building your wish-list. Simply paste the link for the product you are looking at, and our app will pull all the information about it into the wish-list. Currently the app works best on Amazon, and you will see information on your product from an image of it, description, price, and be able to visit the product again.

How we built it

We built this app using react-native, and had a boilerplate repository provided by Devon for us to immediately start working with. A back-end server was necessary to scrape the product pages, and works as a simple API receiving the product link, and returning the relevant data back to the app in JSON.

Challenges we ran into

With local development, CORS was an issue that we ran into early on. We fixed this by creating the express back-end server. Another challenge we ran into was consistently getting good information for the products on any e-commerce site, so we ended up working on just Amazon first to get a working parser. Finding the price on any e-commerce site was the most difficult, with every site having different CSS selectors, different id's, and using HTML elements such as SVG tags with paths that look similar to a price when using Reg Ex.

Accomplishments that we're proud of

Anthony: Being able to contribute in a meaningful way while also learning Native. Mike: Building a working proxy back-end as well as working on a universal parser for the scraper. Devon:

What we learned

We learned that development standards are very inconsistent when it comes to building an e-commerce site, as well as the different options you have to get a more consistent data scraping experience. Using a product page's SEO was one of the most consistent and easiest ways to parse information. With good implementations there is also schema data that can be embedded to make all necessary product info extremely easy to find and scrape.

What's next for Wishlist

Modifying our scraping tool and parsing algorithm to be used to find relevant product data on any storefront.

Built With

• express.js
• javascript
• node.js
• react-native