PubRocket.fm - A year long frontend journey

Introduction

Let me take you through the journey of crafting the frontend for PubRocket.fm. It's been quite a ride, about 16 months since I dived into TailwindCSS and Jinja2, using these tools to shape the site's interface. Along this path, I've woven in HTMX and Alpine.js, enhancing the site with responsive and dynamic behaviors. I'm excited to share a few UI elements I've developed, showcasing my growth and the challenges I've overcome with these technologies.

How it works

The adventure starts with me designing a simple, four-step onboarding process. My goal was to make getting started as easy as possible. You start by importing or creating your show, then move on to transcribe episodes without a hitch. After that, you dive into leveraging PubRocket's suite of content creation tools. The final step? Boosting your marketing reach, all achieved with just a few clicks.

Dark and light modes

I believe user comfort is paramount, so I designed PubRocket.fm to accommodate a preference for either dark or light mode. This feature allows you to switch modes effortlessly, providing relief for your eyes during long editing sessions or simply to match the ambiance of your workspace.

Show dashboard

For the show dashboard, my focus was on clarity and control, offering you a concise overview of your show's status and recent activities. This centralized hub makes managing your content a breeze.

Episode dashboard

The episode dashboard is where you can delve into the specifics of each episode. I've arranged everything you might need — from guest details to audio tracks and campaign content — to help you organize, manage, and monitor the success of each episode in your podcast series.

Map cast

With cast mapping, I've made it easy to assign roles accurately, making sure every voice is correctly attributed. This feature stands as a key tool for organizing podcasts that involve multiple participants, and it perfectly matches the industry's shift towards more structured and professional productions.