Shop Unknown

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.

Shop Unknown Mockup
Role
Data structure and collection, branding, site development.
Technologies
Python, HTML, CSS, React JS, Contentful, Figma.
Purpose
Personal passion project.
Combining Python web scraping practices, API integrations and React JS to power a fully-featured complex search site.
Challenge

“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.

Solution

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.

process
Technical solution

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.

Process strcture and flow Single source of truth.

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.

Python Fuzzy Search Different spellings and typos. Not a problem anymore!
Design system and mockups

Wireframes and low-fidelity mockups helped provide the base for my Figma prototype.

Basic Wireframes Sample initial wireframes.

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.

Design System Custom style system with components for consistent mockup building.

Develop and deploy

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.

features
takeaways
Shop Unknown is the most complex project I've completed. It's much more than just a front-end site and the data process that powers everything behind the scenes was a great challenge where I could really test and apply my programming skills. It's amazing to see how far the idea has come in terms of technical features.
Function over form
At times it was easy to get carried away building out the front-end and making it look nice. This had negative implications which influenced and constrained feature set and the way I'd build certain functionality. Later, I realized I should be prioritizing the actual experience, making sure a user could successfully and achieve their desired results.
Don't reinvent the wheel
Most general features in modern sites have already been built and are usually open-sourced or have a well-documented approach, take advantage of them. Rather than trying to develop everything from complete scratch, I was able to integrate existing, elegant solutions, alongside my own custom code.
Define design systems early
Taking the time to set up and pre-define colours, typography, UI elements and spacing grids can be very rewarding in the long-run. As the project grows, it is still scalable in the sense that you can be more confident that you are being consistent with your design throughout.
See more projects
Bolt Bootcamps
Property Analyzer