Some recent projects
Captioner
Task
To build an elegant and intuitive way to create captions for local mp4 videos, YouTube videos, or Vimeo videos, and be able to export these captions to SRT files.
Solution
Captioner loops through segments of videos until you have captioned it. The interface makes it intuitive to switch between captions, alter their start and end time, and create new ones. The timeline offers an interactive visualization of the entire project, providing a visual indication as to the word per minute ratio of each caption, warning authors when this ratio is too high.
Technology
I use my design system, Sancho-UI, to achieve an accessible and interactive design. React and Typescript are used on the front-end code, while I make use of Firebase for its authorization and database features.
Watershed
Task
To create a course delivery platform that embodies the best of Visual Thinking Strategies, which emphasizes learning through collaboration and observation.
Solution
Our course delivery system operates as a collaborative canvas in which the user is encouraged to actively engage with course materials and their peers. As you engage with video, documents and images, you are asked questions and encouraged to create annotations. We use timeline visualizations that mark course progress and highlight interactions with your collaborators. The result is a highly dynamic, interactive course taking experience that visually reflects your contributions to the course.
Technology
Watershed uses React on the front-end and consumes an Express delivered GraphQL API on the backend. We utilize websockets to provide real-time chat functionality, Postgres and Redis for databases, and we use styled-components to develop our own design system.
Julienne
Task
To build an elegant way to maintain a shared recipe collection with family and friends.
Solution
Each user of Julienne can maintain their own recipe collection, but they can also follow other users. You can then view the recipe collection of each user, or you can search the entire collection of recipes for all of the users you are following. The user interface is responsive, and works well on both mobile and desktop devices.
Technology
Julienne uses my design system, Sancho-UI to create a responsive and accessible design. Firebase is used to manage authorization and data persistence. React and Typescript are used to build all of the front-end code.
Eugenics archive
Task
The Living Archives on Eugenics project wanted to create a database of eugenics related information pertaining to its history in Canada and around the world and its continued significance today.
Solution
Our extensible and interactive database encourages users to explore the topic of eugenics in their own way. Content in the database can partake in different modules, like a Timeline, MindMap or Globe, which reveals different connections between database entries. It’s easy to switch between these modules to explore different contexts. We also developed a more traditional database interface to allow team members to input and edit content and include content in different modules.
Technology
The Eugenics Archive uses an Express hosted backend backed with a MongoDB database. The front end is a javascript application built entirely with smaller modules, with an emphasis on using native dom interfaces. We built many libraries in the process, including image-zoom, tour, transit, network, and youtube.
Roast Buddy
Task
To introduce people to roasting their own coffee and help them perfect recipes.
Solution
Roast Buddy provides two primary functions: a recorder used to document various roast experiments, and a database which contains past recordings. Users can enter tasting notes, reviews, and favourite successful roasts. A user can reference past recordings and their variations to help improve future roasts. An account isn't necessary, but if a user does decide to create an account their content will be synced across devices.
Technology
Roast Buddy is built using react-native and redux, and it works on both iOS and android devices. It's designed using my react-native design system to help emulate iOS appearances. The server architecture is a simple express based node.js REST api.
Open source
Sancho-UI
Task
To create an accessible, responsive and beautiful design system to quickly prototype React-based applications.
Solution
Sancho aims to treat the mobile experience as a first-class citizen, and therefore offers a set of components that work equally well on all devices. Accessibility is also a priority. All components are fully keyboard accessible and follow wai-aria guidelines. The visual appearance of Sancho is based upon my individual preferences, and incorporates my favourite aspects of Material UI, Bootstrap, and Evergreen.
Technology
Sancho is built using Typescript, React, and Emotion. Emotion (a popular CSS-in-JS library) provides predictable composition, allowing users to easily customize components. We also make heavy use of react-spring for building fluid, performant animations.
React Gesture Responder
A responder system for your react application which allows you to build complex gesture based interfaces.
Toasted Notes
Beautiful, simple, & configurable toast notifications with an imperative API.
React Grid DND
Drag and drop, grid edition. Supports multiple drop zones and touch devices.
Gesture Gallery
An image gallery that supports touch gestures and lazy loading.
React Image Enlarger
Medium.com style image zooming with gesture dismissals.
React Gesture Stack
iOS style stack navigation built for the web.
Recent blog posts
