Podcast · Business

Círculo de PoderAn entrepreneurship podcast turned into a written, searchable archive

Site for the Círculo de Poder business podcast: 78 interviews turned into articles, host profiles and channel videos that update on their own.

Technologies

  • Astro 6
  • React 19
  • TypeScript
  • MDX
  • Tailwind CSS v4
  • Directus
  • YouTube Data API v3
  • lite-youtube
  • Zod
  • Node.js
  • Docker
  • Railway
  • Google Analytics 4
Home page of the Círculo de Poder site, a business and entrepreneurship podcast, with its logo over photos from the set
  • 78

    episode articles

  • 3

    host profiles

  • 5

    thematic pillars

  • 3

    content sources

My role

Design and development of the site at Azirgo SAS: content architecture, the Next.js to Astro migration, YouTube and Directus integration, and technical SEO.

The problem

Every Saturday a long interview comes out with someone who built a company in Ecuador, but everything said in it stays locked inside a video. The site had to turn those conversations into text a search engine could read and a visitor could browse by topic, keep the latest from the channel up to date without publishing anything by hand, and give sponsors and guests a direct way to get in touch. It also carried debt: the same page answered with and without www and with and without a trailing slash, and the articles had no structured data.

What I built

  • An archive of 78 episodes at /episodios: every interview has its own article with the video, five numbered sections, a table of contents and three related episodes.
  • Search by text and by date, pagination in pages of 12, and topic pages that are only indexed once they gather three or more articles.
  • A home page that keeps itself current: the latest articles, the most recent long videos and the channel's Shorts appear without anything being published by hand.
  • Five thematic pillars on the home page - building and scaling, leadership and team, brand and sales, financial judgement, mindset -, with three episodes each.
  • Profiles for the three hosts at /host, with their bio, their projects outside the show and, where there is one, the episode in which they were the interviewee.
  • A guest application and a sponsorship bubble that open WhatsApp with the message already written, plus a contact page with the studio map and an FAQ.
  • Sponsor bands that carry each brand's own identity, and a carousel of the brands that have been on the show.

How it's structured

Astro with server output and the Node adapter in standalone mode, packaged with Docker and deployed on Railway. Episode and host pages are prerendered at build time; the home page, the searchable listing, the topic pages and the endpoints are resolved per request.

  • Routes: home, /episodios with search and pagination, 78 pages at /episodios/<slug>, a topic index and topic pages under /episodios/tags, /host with three host profiles, /contacto and a custom 404.
  • Content: two MDX collections validated with Zod - episodes and hosts -, with length caps on title, description and snippet.
  • From the channel to the site: the server asks the YouTube API for the latest 50 videos, looks up their duration and separates long episodes from Shorts; the result is cached.
  • Directus supplies the home page's editable copy and the links to Spotify, Apple Podcasts and YouTube, with a fix that replaces the broken Apple link coming from the CMS.
  • Structured data: WebSite, Organization and PodcastSeries on the home page; BlogPosting with VideoObject on every episode; ProfilePage and Person on the hosts; ContactPage, LocalBusiness and FAQPage on contact; BreadcrumbList on every detail page.
  • sitemap.xml, rss.xml and llms.txt are all generated from the same article collection, and robots.txt names each AI search bot one by one.
  • Security headers - HSTS, nosniff, X-Frame-Options - and a Content-Security-Policy in report-only mode before enforcing it; Google Analytics 4 for measurement.

Visual identity

The name gave the motif: concentric rings behind the logo, over a mosaic of real photos from the set. The palette is dark brown and gold, with Anton for headlines and Montserrat for body text.

  • The hero places the logo over photos of the studio, darkened so they do not steal its contrast, with the release day and time as the only label.
  • A full-width band with the line “El conocimiento es poder” (knowledge is power) over a second mosaic from the set.
  • Rules written into the repository that ban exaggerated letter-spacing, italics and decorative “01 / 02 / 03” numerals, so the site does not look like a template.

Inside the site

  • Círculo de Poder: Episode archive with search and featured topics
    Episode archive with search and featured topics.
  • Círculo de Poder: Written article for an episode, with a table of contents and topic tags
    Written article for an episode, with a table of contents and topic tags.

Technical decisions

  • Each kind of content lives where it is easiest to maintain: articles in MDX inside the repository, versioned and validated at build time; the home page's editable copy and the links to the audio platforms in Directus; and the recent videos in the YouTube API, which the site queries on its own.
  • The YouTube API is called from the server, with an in-memory cache of one hour - one day for Shorts - and a duration filter: only videos longer than 20 minutes count as episodes, the rest are clips.
  • The blog moved to /episodios with one-to-one 301 redirects rather than a 410: every old URL had an exact equivalent, so each one keeps the history it had built up. The same middleware resolves www and the trailing slash in a single hop.
  • In the structured data, the hosts are linked to the show with `actor` from the PodcastSeries rather than `worksFor`: hosting the podcast is not the job of any of the three, and each of them keeps their real work as a fact of its own.
  • Videos inside the articles use lite-youtube, which shows the thumbnail and only mounts the player on click: a direct iframe loads more than 500 KB of player JavaScript even if nobody presses play.

Challenges

  • Migrating from Next.js to Astro with React islands without losing a single URL or the history of the articles that were already indexed.
  • Holding an editorial rule across 78 articles - a title of up to 60 characters with no emojis, a 200-to-320-character description, five sections - with a schema that fails the build if a new post breaks it.
  • Relating episodes when every one of them carries the interview tag: affinity is weighted by how rare each shared topic is, so that, for example, the food and restaurant interviews link to each other.

Result

The site is in production and gets new content every week: publishing an interview means adding one MDX file, and new videos from the channel show up on the home page without touching code. The archive, the host profiles and their structured data are all crawlable by search engines and answer engines.

Need something like this?

Tell me what you're building and I'll come back with scope, stack and a realistic timeline.