PubRocket.fm - A year long frontend journey

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.

Project Image Description

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.

Project Image Description

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.

Project Image Description

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.

PubRocket.fm - Pitch Deck
This deck showcases my ability to craft comprehensive presentations that effectively convey complex solutions. The PubRocket.fm deck demonstrates how to cut podcast marketing costs by over 90% using AI-driven automation. It outlines the platform’s value, technical stack, key features, and roadmap for future enhancements. The presentation is designed
PubRocket.fm - Select Wireframes and Prototypes
Project brief In this section of my portfolio, you’ll find a curated collection of wireframes and prototypes from my work on PubRocket.fm, where my role as the interaction design and product lead allowed me to craft a platform that redefines podcast marketing. Guest onboarding When a guest receives an