This blog post previously appeared as a case study
Overview
I wanted to design and build a radio player as a learning project. The goal was to learn more about React, Design tokens, and the open API at Sveriges Radio.
Challenges
Technical challenges were my limited skills in React and figuring out how the API for live radio channels. The design challenge was to keep the grid consistent with my idea of how it would scale. And, of course - how do I know if a user finds it easy to use?
Solution
I choose to make the simplest radio player possible. When you tap an icon of a channel, the channel starts playing, and when you tap again, it stops playing. I created a re-usable component in code placed in a grid of four items, each instance of the component is configured with a unique channel logo and mp3 stream for audio.
Learnings
I learned to find and install NPM packages that I hadn’t done before. I also learned to create a re-usable component in React, its works the same as in Sketch, where I designed it. Pretty neat! And I also learned how to use the open API at Sveriges Radio to connect the audio streams to the re-usable components.
-
You can try the radio player by clicking here.