Podcast API Demo (Cloudflare Pages)

A simplified podcast search engine web app, using Cloudflare Pages (Javascript) and Listen API.

In the functions code, we use our official podcast api package to talk to Listen API.

You can find code snippets in different languages on the API Docs page, including Node.js, Python, Ruby, Java, PHP, Golang, Kotlin...

Note: You can easily implement similar apps using Django + React, or no code tools like Bubble and Retool.

Overview

Your frontend code (e.g., Web, iOS, Android...) shouldn't talk to Listen API directly. For Web, your users can inspect request headers in their web browsers to find your API key, if you use Ajax to hit Listen API endpoints directly. For iOS / Android, you can't easily reset your API key, if you put API keys in the source code of your app. Once the app is in the hands of your users, you can't easily change the code or force users to upgrade.

Typically, you'll hit Listen API endpoints from your backend (e.g., Django, Rails, Nodejs, Cloudflare Workers, Cloudflare Pages w/ functions...). So you can protect your API key and reset it if needed. Your frontend code will talk to your backend via GraphQL, RESTful APIs or the likes.

In this demo, we provide a reference implementation for a backend (Cloudflare Pages functions) that talks to Listen API, and a ReactJs implementation for a web frontend that talks to the Cloudflare Pages "backend" (functions).

Running the project

On your local dev

LISTEN_API_KEY=YOUR_SECRET_KEY yarn install && yarn dev

Where to get LISTEN_API_KEY?

If LISTEN_API_KEY is not set, then we'll use the API mock server that returns fake data.

Deploy to Cloudflare Pages

Please follow instructions on Cloudflare Pages Docs to deploy to production.

Demo UI Screenshots

On desktop

On mobile