Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

Build a Podcast Player with JavaScript, CSS and Node.js

via Zero To Mastery Path

Go to class Write review

Overview

Build a full-stack podcast player with JavaScript, CSS, Node.js, APIs, and a dynamic UI. Stream, search, and explore shows in a sleek, responsive web app - the perfect project for your dev portfolio!
  • How to build a full-stack web app with Node.js and Express
  • Integrate real podcast APIs for dynamic content
  • Handle user authentication and input securely
  • Use JavaScript to update the UI in real-time
  • Create custom audio playback features with a responsive UI
  • Manage environment variables and static assets on the server
  • Work with service workers and app manifests for PWA basics
  • Structure and deploy a portfolio-ready project

Syllabus

  •   Introduction
    • Introduction
    • Exercise: Meet Your Classmates and Instructor
    • Course Resources
    • Developer Setup
  •   Podcast Player
    • Podcast Index API
    • Node Install - Github Repo
    • Install NPM - Run Express
    • Server.js API Call (Part 1)
    • Server.js API Call (Part 2)
    • Font, Background, Nav UI
    • Containers UI
    • Search Container UI
    • Loader UI
    • Cards Container UI
    • Player UI
    • Queue UI
    • Mobile Navigation UI
    • Mobile Player UI
    • Mobile Search UI
    • Blisk
    • Note on Blisk
    • Search Container JS (Part 1)
    • Search Container JS (Part 2)
    • Search Results JS
    • Podcast Cards JS
    • Episodes API JS
    • Episode Cards JS
    • Lazy Load Images JS (Part 1)
    • Lazy Load Images JS (Part 2)
    • Player JS (Part 1)
    • Player JS (Part 2)
    • Player JS (Part 3)
    • Mobile Container UI
    • Queue JS (Part 1)
    • Queue JS (Part 2)
    • PWA Manifest
    • PWA Service Worker
    • Render Deployment
    • Note on Cron-Jobs
  •   Where To Go From Here?
    • Let's Keep Learning Together!
    • Review This Project!
  •   Optional Appendix - Developer Setup
    • Introduction
    • Mac / Linux Device Setup
    • Windows Device Setup
    • VSCode Setup & Template
    • VSCode Extensions
    • DevTools
    • GitHub

Taught by

Jacinto Wong

Reviews

Start your review of Build a Podcast Player with JavaScript, CSS and Node.js

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.