In this tutorial, we set up a podcast audio streamer with search functionality. Users can search for podcasts using the iTunes search API and stream directly through the browser.
- Mobile UI
- Audio Player
- iTunes API
This tutorial is an intermediate level project and assumes previous knowledge of foundational concepts such as creating a Node/Express backend as well as setting up React and Redux. We do not cover the basic principles of those areas in this tutorial therefore it is best if you completed the following:
- Node & Express Intro
- React, Redux & Foursquare
- Social Bookmark Site
This should be enough to understand the concepts of the Podcast tutorial and follow along with the pace.
In this video, we set up the Node/Express project and create a route for making podcast search requests to the iTunes API. We finish up by installing the required modules for a React project.
Setting up Theme
In this video we incorporate the mobile theme then render it via the React code base. Afterward, we divide the theme into individual components: Featured, Nav, Footer and Podcasts.
Searching For Podcasts
In this video we connect the search component to our backend in order to run searches for podcasts against the iTunes API.
In this video we search podcasts through our endpoint and render them in the Podcasts component. In order to do that, we connect the Podcasts component to the Redux store and update the UI when new podcasts are received.
In this video, we set up the audio player in order to play the tracks from the podcasts. We use the APlayer library (https://aplayer.js.org) and load a demo track to ensure the streaming works properly.
Fetching Podcast Feeds
In this video, we fetch the playlist audio feeds of a podcast when the user selects a podcast from the menu. We set up a specific route to perform this fetch then render the results in xml.
In this video we parse the data from the podcast feeds into a track list. The audio player library requires a specific format in order for the tracks to play and we have to manipulate the data for that format. This video is largely an exercise in parsing JSON and is good practice for students with little to no experience with parsing.
In this video we set up the audio player with tracks from the podcast feed. We then parse the track info from each entry to render the title and image on the audio player itself.
In this video we enable the user to switch stations and load a new track list. Afterward, we deploy the project to Heroku and test it live.
Click the button below to subscribe to this tutorial.
Premium members can subscribe for free.
Can't make it to our live courses? Join our online membership for video tutorials, code samples and access to our Slack Channel.