Canada Computers Unofficial API

Inspiration

me and a friend were talking about webscraping for a typing bot he made (totally wasn't used for the typeracer competition) and I thought of the idea of making an unofficial API for a website that doesn't have an official API. I looked around a bit and found that electronics store Canada Computers falls under this category.

What it does

This API takes data scraped from the Canada Computers website. This data is initially requested after a search and collects information such as price, a direct link to the retail page, and the availability of the product both in store and online. There is additional functionality added to filter a price range

How it was Built

The project was initially planned to support both the API in the backend, with a frontend built with ReactJS. This is mainly so that I could get some experience under my belt, but turned out to be quite challenging.

Challenges faced

As mentioned above, the frontend built with React was really tough, so I ended up finishing a barebones css-less webpage with a table of the queried values and just left it. I pivoted from the several hours wasted learning about React hooks to working on more functionality to the API itself. This was when I thought of the idea to iterate from simply an availability metric, which was kind of janky and sort of encompassed both online and instore availability, to two separate metrics for instore and online availability. This made the data pulled for these requests much more reliable.

Accomplishments that we're proud of

Actually learning some React. I learnt how to make proper tables to store data and somewhat how to call data from a remote API and then store it in said tables. Additionally, this was also my first time ever webscraping and using flask for anything, so I'm pretty content that I managed to actually put something together in the end.

What we learned

I learned about the steep learning curve React, and JS can be (i found it pretty tough). Actually being successful on my first try webscraping and creating an API with it using flask taught me a lot about reading documentation (also yelling at documentation) and

What's next for Canada Computers Unofficial API

The original thought was to actually finish a version of the frontend React website so that it can be displayed in a format that looks nicer than just the default browser query. I also (ambitiously) thought that I could propose that PCPartPicker use my API to gather data from Canada Computers for certain metrics such as prices and direct links to retail sites.

Built With

• flask
• flask-restful
• javascript
• python
• react