\
Creating a radio app was a project that I had in mind for quite a while. I have always felt a special connection to music. It has always inspired me and boosted my productivity.

\
A while ago I also did a [discussion](https://dev.to/madza/music-or-no-music-while-coding-which-type-of-person-are-you-5ei2) asking do other developers prefer music while coding. I was surprised by the amount positive responses, so I wanted to execute the idea even more.

\
I started to build [DevTunes FM](https://radio.madza.dev). Initially, it was meant as a pet project for personal use, but the more time I spent on it, the more it started to take shape of something the developer community could benefit from as well, so I decided to share it with the public.

\
 ![Mockup](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-000-e-40-as-6-daeu-2-z-0-t.jpg)

### The project is live at: [radio.madza.dev](https://radio.madza.dev)

Since I went through multiple phases of planning and executing I thought it could be valuable to create an article about the process and show you the features.

## Planning

From the beginning my main focus was simplicity. I've never been a fan of complex layouts and multi-level settings. I wanted to create a radio, that is straightforward for listening to music and easy to understand on the first visit.

I also focused on usability. This meant the radio should be adjustable to different moods and various musical genre preferences. It also should be used anywhere - while coding, exercising, or on the commute, for example.

Finally, the radio should have a nice design. The UI/UX should feel smooth and look great on different devices. The user should be allowed to customize the look and behavior of the radio.

 ![Planning](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-000-e-50-as-6856-odz-8-d.jpg)

## Features

Once I had defined the main characteristics, it was time to identify the specific features.

I came up with the following list:

* Change stations
* Change backgrounds
* Play/pause
* Repeat track
* Volume controls
* Recently played list
* Save last settings
* Responsive design
* Loading screen

## Wireframes

To put the features in the UI, I created wireframes for the components.

I started with the dropdown for switching the stations. Once the dropdown is opened, the list of available stations is shown and the currently active station is highlighted.

 ![Wireframe1](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-100-e-60-as-6-d-2-mnf-9-na.jpg)

To control the play state of the radio, there is a component with alternating play and pause icons as well as the title of the currently playing track.

 ![Wireframe2](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-200-e-70-as-6-hvfye-0-sg.jpg)

In order to open different panels of the settings, control the volume and repeat the current track, I created navigation consisting of several icons.

 ![Wireframe3](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-200-e-80-as-6-avfugmau.jpg)

The previous tracks panel displays the last tracks that have been played on the radio. Users can click on any track on the list to start playing it. The settings panel lets the user control the behavior of the radio. Both panels can be closed by clicking outside of them.

 ![Wireframe4](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-300-e-90-as-6-fq-4-w-3-e-8-g.jpg)
I used [Figma](https://figma.com) to make these wireframes. You can also check out [Diagrams.net](https://diagrams.net), which is another amazing tool.

## Design

Next, I had to create a design for the radio. In this phase, I focused on how to position the components and how to make the project look and feel great.

To achieve that I created 10 different themes.

The source for wallpapers is [Wallhaven](https://wallhaven.cc). Icons are taken from [FlatIcon](https://flaticon.com).

### Theme 1

 ![Theme1](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-300-ea-0-as-6-biy-1-b-757.jpg)

> Background from: [source](https://wallhaven.cc/w/0w6j7q)

### Theme 2

 ![Theme2](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-400-eb-0-as-6-gvdleq-58.jpg)

> Background from: [source](https://wallhaven.cc/w/eo19kw)

### Theme 3

 ![Theme3](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-400-ec-0-as-6-f-5-gm-21-l-0.jpg)

> Background from: [source](https://wallhaven.cc/w/j8m3py)

### Theme 4

 ![Theme4](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-500-ed-0-as-60-nli-2-yhk.jpg)

> Background from: [source](https://wallhaven.cc/w/6kv1ow)

### Theme 5

 ![Theme5](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-500-ee-0-as-65-lh-88-mpa.jpg)

> Background from: [source](https://wallhaven.cc/w/r2jygm)

### Theme 6

 ![Theme6](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-800-ef-0-as-6-fykf-720-b.jpg)

> Background from: [source](https://wallhaven.cc/w/xl56rv)

### Theme 7

 ![Theme7](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-800-eg-0-as-6-f-8-ak-2-lm-8.jpg)

> Background from: [source](https://wallhaven.cc/w/rd3jv7)

### Theme 8

 ![Theme8](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-900-eh-0-as-68-h-9-q-9-ftn.jpg)

> Background from: [source](https://wallhaven.cc/w/eyx3pl)

### Theme 9

 ![Theme9](https://cdn.hackernoon.com/images/ckz-4-kx-5-w-900-ei-0-as-66-ailekub.jpg)

> Background from: [source](https://wallhaven.cc/w/k9k3r1)

### Theme 10

 ![Theme9](https://cdn.hackernoon.com/images/ckz-4-kx-5-wa-00-ej-0-as-6727-sha-63.jpg)

> Background from: [source](https://wallhaven.cc/w/mpdz88)

## Stations

[DevTunes FM](https://radio.madza.dev) was designed to be electronic music radio. Electronic music includes tons of genres and subgenres, so creating the right stations was a challenge.

I spent a lot of time browsing the available playlists on [SoundCloud](https://soundcloud.com) and played through all the individual tracks to decide if the content matches what I would want to include on the radio.

I ended up creating 28 stations. Down below is the full list and their curators:

* Ambient (curated by [Stan Kraus](https://soundcloud.com/stan-kraus))
* Lo-Fi (curated by [Epigenesis](https://soundcloud.com/epigenes1s))
* Chillstep (curated by [ZodiacLegends](https://soundcloud.com/zodiaclegends))
* Easy Listening (curated by [ferzrrn](https://soundcloud.com/ferzrrn))
* Future Garage (curated by [ferzrrn](https://soundcloud.com/ferzrrn))
* Future Bass (curated by [PITYPARTY](https://soundcloud.com/user-227164845))
* Chillhop (curated by [Charles Spinosa](https://soundcloud.com/charles-spinosa))
* Trap (curated by [chonah](https://soundcloud.com/chonah))
* Chill Trap (curated by [TH3 3ND](https://soundcloud.com/t_he_end))
* Melodic Trap (curated by [PITYPARTY](https://soundcloud.com/user-227164845))
* Dubstep (curated by [ferzrrn](https://soundcloud.com/ferzrrn))
* Melodic Dubstep (curated by [Alec Falzone](https://soundcloud.com/alecfalzone))
* Liquid Dubstep (curated by [OfficialJMT](https://soundcloud.com/officialjmt))
* Drum and Bass (curated by [Ben Edgar](https://soundcloud.com/ben-edgar-3))
* Melodic Drum and Bass (curated by [rinos1337](https://soundcloud.com/rinos1337))
* Liquid Drum and Bass (curated by [Tom Lockwood](https://soundcloud.com/tom-lockwood-74750156))
* House (curated by [H.Mastrogiannis](https://soundcloud.com/user-243181610))
* Techno (curated by [Sazi Maqeda](https://soundcloud.com/sazi-maqeda))
* French House (curated by [Nathan Lamb](https://soundcloud.com/nathan-lamb-1))
* Future House (curated by [Ian Kaiser](https://soundcloud.com/ian-kaiser))
* Progressive House (curated by [Nola Kid!](https://soundcloud.com/nola-kid))
* Progressive Trance (curated by [jpache](https://soundcloud.com/jpache))
* Uplifting Trance (curated by [BetaWave!](https://soundcloud.com/betawavemusic))
* Vocal Trance (curated by [Niels Ketelaars](https://soundcloud.com/niels-ketelaars-883054286))
* Dreamhwave (curated by [C H E F G E O F F](https://soundcloud.com/geoff_the_chef))
* Vaporwave (curated by [Eliud Makaveli Zavala](https://soundcloud.com/eliud-makaveli-zavala))
* Synthwave (curated by [ferzrrn](https://soundcloud.com/ferzrrn))
* Wave (curated by [Raffie Loiero](https://soundcloud.com/raffie-loiero))

Each time the user visits the radio the tracks on each station are randomly shuffled, so the sequence of tracks is always unique.

## Stack

The radio is written in [NextJS](https://nextjs.org). It has awesome features such as API routes, data fetching, built-in support for CSS modules, static file serving, environment variables, hot reloading, and so much more stuff, that I made use of while creating the app.

\
The audio source is [SoundCloud API](https://developers.soundcloud.com/docs/api/explorer/open-api). It allows developers to get the data about the users, tracks, playlists, likes, reposts, comments, comments, favorites, followers, and other useful data.

I used [Vercel](https://vercel.com) for deployment. Deploying the app is as simple as hosting the source on [GitHub](https://github.com) and then importing it in Vercel. It will do all the heavy lifting - build processes and configuration for you behind the scenes. All you need to do is set up environmental variables.

## Mobile Responsiveness

One of the priorities of the radio was for it to be fully responsive for different screen widths. This way the radio could have been efficiently used on multiple device

s.

To achieve that, I set up a media rule at 700px, where the UI switches from top and bottom navigation to the fullscreen interface.

 ![Responsiveness](https://cdn.hackernoon.com/images/ckz-4-kx-5-wa-00-ek-0-as-68-u-506-tik.jpg)

## Conclusion

A couple of years ago creating my own radio app was a dream. Now I am happy to see coding as a powerful tool that can be used to help other developers on their path.

Hopefully, [DevTunes FM](https://radio.madza.dev) will make your developer flow more productive. Feel free to try it out and see if you like it. Feedback is always welcomed.

In the future, I will focus on improving the current code base, test it and keep exploring new music to add them to the radio.

Feel free to submit feature requests, music recommendations, or other related stuff to [hi@madza.dev](hi@madza.dev).

## Let's connect!

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

\
Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/), and [GitHub](https://github.com/madzadev)!

Visit my [Portfolio](https://madza.dev/code) for more projects.

\
*Also published [here](https://dev.to/madza/my-online-radio-reached-100k-plays-in-2-months-heres-how-i-created-it-4di4)*

Flow

Garage

Progressive

Twitter

2022 - HackerNoon Contributor of the Year - Css

2022 - HackerNoon Contributor of the Year - Html

2022 - HackerNoon Contributor of the Year - Job Hunting

2022 - HackerNoon Contributor of the Year - Music

2022 - HackerNoon Contributor of the Year - Product

Hire Me

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Music

Nominated for 2022 - HackerNoon Contributor of the Year - Html

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Product

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

How I Built an Online Radio with Soundcloud and NextJS

How I Built an Online Radio with Soundcloud and NextJS

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@madzadev

RELATED STORIES