OP-1 Kenobi

Credit

Shunya Koide for incredible CSS artistry -- thanks for your Codepen and enabling this project!

Overview

This project makes use of Shunya Koide's OP-1 Codepen written in pure HTML and SCSS. With a long ways to go before achieving this level of CSS wizardry I aimed to bring this to life in React by pushing the HTML elements out to components.

Skills I Practiced

• Separation of concerns
• Decluttering components and imports
• Using hooks like useEffect() to listen to keyboard events
• Traversing an array of objects to dynamically pull data into a component with functional methods e.g.(.filter(), .map())

Next steps

• Pull SVG elements from the Teenage Engineering OP-1 tutorial and replace SCSS with interactive, animated SVG components
• Create more options for sound libraries
• Endow selector buttons with kit changing functionality
• Enable users to record short sessions, store in state, and allow for mp3 export
• Allow users to map keys to external .mp3 urls