Audio Streaming App

Turbo 360

In this project, we set up an app where users can upload mp3 files that can be streamed as audio by anyone who visits the user's page. This app will be somewhat more robust as we build a front-end for the public pages with standard jQuery and then add an admin dashboard for uploading tracks, managing profile details. We will also handle standard web app functionality such as registering new users, logging in/out, uploading files, and sending email notifications. Turbo 360 will support the backend therefore you should have an account or register to complete this tutorial. Also, we will use a theme which you can download HERE.

To see a working demo of this app, click HERE.


Setting Up (25:32)

In this video, we scaffold the project code base then integrate a theme for rendering audio stations. Along the way, we configure the build scripts/tasks to optimize the CSS files as well as the Javascript modules. Then we deploy the project base to the staging server to make sure everything works on a live hosting environment.

Registering Users (23:18)

In this section, we configure the theme home page to include a registration form then connect the inputs to our custom Javascript module for handling user registration. Then we connect the app to our Turbo backend via the Turbo SDK and register a sample user. Finally, we scaffold an empty admin page for the user to navigate to after registration.

Uploading Audio Files (41:46)

In this section, we connect the user's data to the admin page so that we can visually confirm that the user is logged in (or not). We then connect logout functionality and finally, we upload audio mp3 files to our Turbo backend in order to confirm that storage is successful.

Uploading Images (21:34)

In this video, we set up an image upload function for setting profile icons, then we render the image dynamically. We also do a little basic refactoring to clean up the code and separate image uploading logic from the audio uploading logic.

Browsing Stations (24:08)

In this video, we set up the basic UI for the homepage where users will be able to browse current stations. We query the Turbo backend for current stations then render their key info (name, number of tracks) on the main page.

Rendering Station Tracks (16:56)

In this video, we enable users to select a station from the main UI and then view the tracks on a sidebar which slides out from the right side. This is the final step before actually playing the audio tracks.

Connecting Audio Playback (19:43)

In this video, we finally stream audio tracks from individual stations. We use the APlayer Javscript library to load playlists and play back MP3 files when user select a station. We then deploy to the Turbo 360 staging environment to make sure everything works well on a live server.

Membership Options