Restauranttopia
Podcast & CRM
A full-stack, dynamic web platform built for a popular restaurant industry podcast featuring a custom backend to manage podcast episodes, handle partner inquiries, and automate workflows.
Project Overview
Restauranttopia is a full-stack, dynamic web platform built for a popular restaurant industry podcast. The project required more than just a marketing site; it needed a custom backend to manage podcast episodes, handle partner and sponsorship inquiries, and automate communication workflows.
I developed a sophisticated architecture using Next.js 15 (App Router), integrating a custom MongoDB CRM, automated SMTP email forwarding, and seamless RSS podcast fetching to create a unified, high-performance experience for both the audience and the administrators.
Design System Architecture
The UI is constructed using a modern, utility-first approach. By combining Tailwind CSS with Shadcn UI, I established a consistent and reusable component library located in `src/components/ui`. This approach allowed for rapid development while ensuring deep accessibility and strict adherence to the brand's visual identity.
GSAP was implemented to choreograph complex timeline animations (like hero sections and scroll triggers), giving the site a premium, television-quality feel that standard CSS transitions couldn't deliver.
Key Infrastructure & Features
1. The Custom MongoDB CRM
Instead of relying on an expensive, bloated third-party CRM (like HubSpot or Salesforce), I built a lightweight, tailored CRM directly into the platform using MongoDB.
- • Why this approach?: The clients needed to track very specific data entities—such as SponsorshipRequest, StoryIdea, Partner, and RecordingSchedule.
- • Implementation: We mapped these entities to explicit Mongoose models. When users submit forms on the frontend (e.g., requesting a sponsorship or pitching a story), the Next.js API securely validates the data via reCAPTCHA, cleans it, and writes it directly to MongoDB. This provides the podcast administrators a single, unified dashboard to track their leads without leaving their own platform.
2. Automated SMTP Email Workflows
Rapid response is critical for securing sponsors and gathering story ideas. I implemented direct SMTP integration using Nodemailer instead of relying on slow webhooks or third-party mailing list services.
How it works: Whenever a CRM form is submitted (e.g., `/api/sponsorship-requests`), the server performs two parallel actions:
- • Admin Notification Forwarding: It instantly fires an alert to the admin's inbox containing all the submitted details, ensuring they never miss a hot lead.
- • User Auto-Reply: It automatically generates and sends a beautifully styled HTML confirmation email to the user, reassuring them that their request was received and setting professional expectations.
3. Server-Side Podcast Fetching (Libsyn RSS)
A core requirement was displaying the podcast's latest episodes directly on the site, dynamically pulled from their host, Libsyn. Fetching RSS feeds directly from the browser on the client-side often results in CORS blocks, slow load times, and poor SEO.
- • The Solution: I built a Next.js Server API route (`/api/libsyn-episodes`) that acts as a secure middleman.
- • How it works: The server fetches the XML RSS feed from Libsyn, parses it into clean JSON using `fast-xml-parser`, extracts complex metadata (like iTunes summaries, audio URLs, and dynamic episode images), and serves it to the frontend. This approach ensures lighting-fast page loads, perfect SEO rendering, and complete immunity to browser CORS restrictions.
🚀 The Result
The Restauranttopia platform is a prime example of building a cohesive, self-sufficient ecosystem. By eschewing disconnected third-party tools in favor of a tightly integrated Next.js API, MongoDB CRM, and Nodemailer setup, the client received a lightning-fast marketing site and a powerful internal management tool—all under one roof.
Technologies Used
Frontend Framework & UI
Next.js 15, React 19, Tailwind CSS, Shadcn UI
Backend & Data
MongoDB (via Mongoose), Next.js Route Handlers
Integrations
Libsyn RSS, Nodemailer, UploadThing, reCAPTCHA
Project Gallery
A visual journey through the platform's interfaces and features. Click any image to enlarge.