> projects

Crate Guide

Vue.js
PWA
desktop
crate.guide  |  GitHub

Crate Guide is a DJ app designed to assist in finding compatible tracks within a users physical record collection. Records can be added manually or imported from your Discogs collection. Audio features from your tracks can then be imported from Spotify through a mostly automated process.

The app was built using Vue.js for the front-end and Express.js on the back-end connecting to a MongoDB database. Authenticated requests are made to the Discogs API using OAuth 1.0, and OAuth 2.0 with the Spotify API.

Crate Guide empty deck interface.
Crate Guide loaded single deck interface.
Crate Guide track select interface.
Crate Guide login interface.
Crate Guide track import interface.

bpm tap

Vue.js
PWA
D3.js
bpm-tap-0.netlify.app  |  GitHub

bpm tap is an extremely simple web app for tapping out the tempo of a song. I needed a solution for comparing the tempo of two tracks that could be installed on a phone quickly. The app is designed to be used as a PWA on a phone, with the tempo being tapped out by tapping the screen. The tempo is displayed in real-time and can be reset by not tapping for 2 seconds.

To save a tempo as a reference for future measurements, the user can lock the most recent bpm by enabling the lock feature with the lock icon button at the top right. My use case for this is to compare the tempo of a track I'm playing to the tempo of the next track I want to mix in.

The app uses D3.js colour interpolation to represent the tempo as a background colour, providing a visual aid for comparing the currently tapped tempo with the last or lock bpm.

Panel layout generator

Vue.js
SPA
panel-layout-generator.com  |  GitHub

Panel layout generator is a simple layout generator for square acoustic panel installations. A friend of mine was installing acoustic panels using a variety of colours. Since his installations were constrained by specific quantities of each colour, and he did not want adjacent panels to be of the same colour, he had to plan the layout carefully. This app is a quick solution I threw together to solve his problem. Panel colours can be added with their quantities and the number of rows and columns adjusted. A random layout is generated upon any changes.

The app was built using Vue.js, with the only other dependencies being Pinia and vue-accessible-color-picker.

Panel layout generator interface.
Panel layout generator interface with numbers.
Panel layout generator interface with 960 panels.
Panel layout generator interface with pastel panels.