My favorite hobby

I love to DJ and produce. Pretty quickly, I discovered I wanted a site to share my mixes with friends and family. The easy way to do this would be on Soundcloud, but I wanted something personalized that incorporated my own background. So, I made 2phone.engineering.

The name comes from my favorite audio equipment/design firm teenage.engineering, and the UI is inspired by one of their samplers production machines, the EP-133 KO:

The tech

I made a clone of the EP-133 by holding it in my hand and using pure Tailwind CSS and HTML to create the component. I even added a tacticle click sound to the buttons, and the status indicators / effects light up when you play sound, just like the real thing.

This was an awesome design experiment and let me hone in on frontend work. And yes, it's mobile friendly. The audio is streamed from my CMS (Sanity), where I can convinently upload files. I colocated this inside my portfolio's codebase portfolio in order to keep everything centralized and used Next.js middleware to make it appear standalone.

Finally, I abstracted the audio player so that I could have multiple entrypoints because I wanted to add a static, more traditional tracklist below the interactive player UI in order to ensure usability. I stored this state and relavent helper functions in their own React Context in order to synchronize both players.