Podcast App


The Daily Slate | Podcast App
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. - React - Redux - 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 OR - Social Bookmark Site This should be enough to understand the concepts of the Podcast tutorial and follow along with the pace.

Units


1. Project Setup

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.

2. 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.

3. 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.

4. Displaying Podcasts

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.

5. Audio Player

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.

6. 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.

7. Parsing Tracks

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.

8. Playing Audio

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.

9. Deployment

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.

Purchase

$25.00

Purchase this tutorial for $25 and receive all videos, code samples and access to the forum where people post questions and answers.

Purchase, $25

Membership

Premium

$19.99/month

Join as a premium member for $19.99 each month and receive unlimited access to all tutorials, code samples, and forums on the site.

  • Downloadable Code Samples
  • Downloadable Videos
  • Q & A Forum Access
  • Discounts on Live Courses
Join

Basic

Free

Join as a basic member to gain access to the free tutorials, get notifications when new tutorials and courses are published, and participate in the Q&A forums.



Join