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