Syntax Podcast: The Missing Browser

Hosted by two developers Scott Tolinski and Wes Bos, Syntax is one of the most enjoyable tech podcasts available.

While their official website of Syntax.fm offers a nice listening experience, it can be tricky to search by keyword or filter by category.

Using their /api/ route in their Next.js app, I created a wrapper around Syntax Podcast content data.

---

Features

• Grouped by release year (i.e. 2017 to 2023 and counting)
• Tagged by episode category (e.g. Potluck, Hasty Treat, etc)
• Searchable by title (powered by Fuse.js)

Built with

• Next.js w/ TypeScript
• SCSS Module (initially coded with Styled Components, but ditched it soon after)
• localStorage to avoid unnecessary data fetching

TODO

• Build dark/light mode themes
• Extend to Sick Pick browser
• Refine visual design and layout
• Add a preloading screen
• Improve performance

---

Running the app

Start the development server with:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 in your browser.

Notes

• Subscribe to Syntax podcast.
• All content belong to Scott and Wes. No copyright infringement intended! I just wanted convenience.
• No API is provided here. Go check out https://syntax.fm/api/shows and https://syntax.fm/api/sickpicks routes for original APIs.