The best way to discover and find your favourite brands — Collection of Canada's streetwear and designer boutiques.
A case study that highlights my technical capabilities.
“Where can I find this brand?“, “Going to Toronto, any shopping recommendations?”. These questions filled Facebook groups of thousands of streetwear enthusiasts, myself included. Since there’s no Yelp for just streetwear, and a simple Google search doesn’t suffice, I set out to solve my own problem!
First with a spreadsheet and manual data collection, then a Wordpress site and now my next mission was to use my new programming skills to help automate it all. This is a project that continues to evolve as I learn more.
Sustainability
Stores often carry hundreds of designers, it was too tedious and time-consuming to manage these lists manually.
Accuracy
Always-changing inventory and alternate brand spellings made it difficult to collect up-to-date and correct information.
Customization
Wordpress templates limited performance, control over data, and level of creativity for the site's identity.
Shop Unknown allows users to quickly search and filter through Canada's best stores. Over 100 unique hand-picked designers found at stockists across all major cities. Each store has its own detailed page including more information, carried designers and useful links to further explore their offerings.
On the technology side, two python scripts automate the entire data collection and cleaning process. After the initial setup, the scripts only need to be run periodically. This ensures that store designer lists are accurate.
My main goal was to improve the process of recording a store's information, particularly their designer lists. Believe it or not, I used to record the designer lists by hand... That was until I was introduced to Python, and subsequently its incredible capability to help with site scraping.
This new process is heavily simplified and removes a lot of the tedious tasks.
New flow overview
- Each store in the Contentful CMS that should be scraped has a URL and a Selector that I've defined.
- The Python scripts make API calls to retrieve and iterate through the data, scraping the sites' designer list based off it.
- These lists are then compared to a set of confirmed designers which also come from the CMS (see Fuzzy logic below).
- Once formatted and filtered, this is sent back to the CMS.
- The site itself requests and displays this same data!
Fuzzy logic
Interestingly, this data process actually gets "smarter" each time it's completed (don't worry, it's not AI). This is because of a feedback loop I've implemented.
To address different spellings and typos, I took advantage of a Python module based on Levenshtein distance, a mathematical metric to compare similarities in word sequences.
As the program loops through a raw list of scraped designers, I'm able to confirm any non-perfect matches that are deemed relatively close. Once confirmed, the alternate spelling is actually added to the designer record in the CMS, meaning from then on it will automatically correct the spelling.
Wireframes and low-fidelity mockups helped provide the base for my Figma prototype.
Establishing a design system and reusable components, as well as using a grid was a game changer for me. Not only does it speed up the process, but it also makes it easier to test style changes, iterate, and ensure consistency.
With the help of tutorials, guides, articles and many many Google searches, I was able to create a fully responsive React JS site with many complex functionalities such as URL routing and data filtering.
I'm even able to manage the codebase from my terminal, pushing changes to GitHub which are then reflected on the Netlify build.
React's component-based architecture meant I could reuse my code effectively. In combination with Netlify it also provided performance benefits for this content-heavy site.
Faceted search — Users can find exactly what they're looking for with multiple filters that can even be combined.
Faceted search — Users can find exactly what they're looking for with multiple filters that can even be combined.
More details — Individual store pages with direct links to their site and socials, as well as popular designers they carry.
More details — Individual store pages with direct links to their site and socials, as well as popular designers they carry.
Tag lists — Collection pages with tags such as designers or cities, which route the user to a pre-filtered store page with their selection.
Tag lists — Collection pages with tags such as designers or cities, which route the user to a pre-filtered store page with their selection.
