VIBE WIRE
Back to Episodes
Episode
3
May 31, 2024
15:30

Vibe Wire: Episodes Page (Let's Build!)

Today I'm building the episodes page for our website in public. Follow along as I build the Vibe Wire brand from scratch!

Play EpisodeDownload

Vibe Wire: Episodes Page (Let's Build!)

Hey everybody! My name is Dave, welcome back to Vibe Wire. This is a behind-the-scenes episode where I'm going to be going through an update to the website.

Building on Yesterday's Work

Yesterday we created the landing page using a couple of different AI coding tools that I've been trying out recently. We ended up going with the landing page from V0, and now we have:

  • A basic landing page
  • A player that doesn't quite work yet but looks pretty cool
  • Some episodes section that doesn't work yet
  • An episodes tab that currently 404s

Today's Goal: Implementing the Episodes Page

What I want to do today is implement this episodes page. The way I want to do it is to be able to really quickly add content about the latest episode without having to build a whole new web page every time.

Why MDX?

I'm probably going to be keeping notes in a markdown context, and eventually I'd like to generate those show notes automatically. Markdown really makes a lot of sense in that case.

We're building this website in Next.js, and Next.js actually has a really nice integration with markdown formatting which interacts really nicely with JSX - everything else you see on this page is JSX.

What is MDX?

  • If you're familiar with React programming, you've seen JSX (basically an abstraction over HTML)
  • MDX is an abstraction over JSX that lets you write markdown
  • It's pretty cool because it combines the simplicity of markdown with the power of React components

Our sponsor today is Hyperfeed - you can find it at hyperfeed.ai. Sign up today and you'll get 20 free credits. Hyperfeed is a marketing platform that gives you an AI-powered co-worker that can help with content creation 24/7.

The Development Process

I'm using Cursor with Claude 4 for this build. Here's my approach:

My prompt to Claude:

"I want to implement an episodes page that follows the same style as our homepage. The episodes should be generated from markdown files stored in a folder. Each episode page should be rendered from a corresponding MDX file. Add two MDX example files to start."

I specified two because Claude has the tendency to do a lot more work than it needs to - we might end up with 5 or 10 example files if we don't specify!

Technical Implementation

Dependencies Added

The AI suggested these dependencies, which match the Next.js documentation:

  • next/mdx
  • @mdx-js/loader
  • gray-matter (for parsing front matter)
  • @tailwindcss/typography (for better markdown styling)

Front Matter Structure

Here's what our episode front matter looks like:

---
title: "Episode Title"
description: "Episode description"
date: "2024-05-31"
duration: "15:30"
episode: "3"
slug: "episode-slug"
episodeUrl: "https://www.youtube.com/watch?v=..."
---

This metadata allows us to:

  • Pull out information we don't want in the main content
  • Style elements differently (like YouTube links as buttons)
  • Eventually automate this process using video metadata

Cursor Rules Setup

One thing I realized during development - I should set up cursor rules to always use pnpm:

Dependency rules: Always use pnpm for installing and managing dependencies

This ensures consistent package management across the project.

The Build Process

Setting Up the Episodes List

First, we created:

  • A content/episodes/ folder for storing MDX files
  • An episodes interface matching our front matter structure
  • Episode parsing logic using gray-matter

Individual Episode Pages

The trickiest part was implementing the dynamic episode pages. We ran into an issue where:

  • Error: "pram should be awaited before using its property"
  • Solution: Properly await the params in our slug page

Adding Episode Links

The final touch was connecting the "Play Episode" button to actual episode URLs by:

  • Adding episodeUrl to the front matter
  • Updating the episode interface
  • Implementing the button functionality

The Result

Now we have a fully functional episodes system where:

  1. Adding new episodes is simple - just drop a new MDX file in the content folder
  2. Consistent styling - matches our homepage design
  3. Rich content support - full markdown with React components
  4. Automatic routing - slug-based URLs work automatically
  5. Functional buttons - play episode links work

What's Next?

This is looking really good and should be easy to use. Every time I'm ready to put out a new episode, all I need to do is add the markdown contents with:

  • Show notes
  • Overview
  • Maybe a transcript
  • Links to all the different tools we look at every day

I can probably end up using AI to generate this whole file for me eventually, and when I do that, I'll share that process with you all as well.

Key Takeaways

  1. MDX is powerful - combines markdown simplicity with React flexibility
  2. Next.js has great markdown support - built-in routing and rendering
  3. AI-assisted development works well - Claude handled most of the heavy lifting
  4. Incremental building - build one feature at a time, test as you go
  5. Automation potential - this system is set up for future automation

Thanks for following along! I'm looking forward to the next video where we'll share the next steps of building this out. Let me know in the comments what you think of this style!