RecipeHub
A premium culinary publishing platform where home cooks and food enthusiasts share, discover, and unlock recipes. Features editorial-style design, Stripe-powered recipe unlocking, and a comprehensive admin dashboard for content moderation and payment tracking.
Overview
RecipeHub is a full-stack culinary publishing platform that bridges the gap between casual recipe sharing and premium content monetization. I built this platform to create a space where home cooks can not only share their recipes but also monetize premium content through a sophisticated payment system. The platform supports both free and premium recipe publishing, with a tiered membership system that unlocks additional features. Unlike generic recipe apps, RecipeHub emphasizes editorial design with a magazine-style interface that makes browsing recipes feel like reading a curated food journal. The platform includes comprehensive user dashboards, admin moderation tools, and real-time payment processing.
Most recipe-sharing platforms are either completely free with no monetization options for creators, or they're locked behind paywalls that limit discovery. Home cooks and food bloggers need a platform where they can share recipes freely while also having the option to monetize premium content. Additionally, platform administrators need robust tools to moderate content, manage users, and track transactions—features that are often missing or poorly implemented in existing solutions.
I built RecipeHub as a Next.js 16 full-stack application with a MongoDB backend, implementing a freemium model where users can publish up to 2 free recipes and upgrade to premium membership for unlimited publishing. I integrated Stripe for seamless payment processing, allowing recipe creators to mark individual recipes as premium content that other users can unlock through one-time purchases. The platform uses Better Auth with both email/password and Google OAuth for secure authentication, storing JWT tokens in HTTPOnly cookies to prevent XSS attacks. I created separate dashboard experiences for regular users (managing their recipes, favorites, and purchases) and admins (user management, recipe moderation, content reports, and transaction history).
Interactive App Preview
Hover image to scroll
Architecture & Engineering
The frontend is built with Next.js 16 using the App Router architecture, with route groups separating public pages, authentication flows, and dashboard areas. I implemented server-side pagination and filtering throughout the application for optimal performance. Authentication is handled by Better Auth with dual provider support (credentials + Google OAuth), with sessions managed via HTTPOnly cookies. The backend API (separate Express server) connects to MongoDB for data persistence and handles Stripe webhook events for payment processing. Images are uploaded to imgbb CDN to keep the database lightweight. I used shadcn/ui components with Radix UI primitives for accessible UI elements, Framer Motion for scroll-triggered animations, and Tailwind CSS v4 with custom OKLCH color tokens for a consistent design system. The admin dashboard includes a reports system where users can flag inappropriate content, and admins can resolve these by dismissing or deleting flagged recipes.
Technical Challenges
- Implementing secure authentication with HTTPOnly cookies while maintaining session state across server and client components in Next.js 16's App Router. I solved this by using Better Auth's built-in cookie management and creating custom React Context providers that work with both rendering paradigms.
- Managing the complexity of Stripe Checkout Sessions with proper webhook handling for payment confirmation. The challenge was ensuring that premium membership upgrades and recipe unlocks were atomic operations that couldn't be duplicated or lost. I implemented idempotency keys and proper error boundaries around payment flows.
- Building a flexible recipe form with dynamic ingredient and cooking step repeaters that maintains state properly and validates complex nested data. I created custom hooks for managing array fields and implemented client-side validation before submission to improve UX.
- Designing a reports and moderation system that allows users to flag content (spam, offensive, copyright) while giving admins the tools to review and act on reports efficiently. I built a dedicated admin panel with filtering, bulk actions, and audit trails for all moderation decisions.
What I Learned
- Deep dive into Next.js 16 App Router architecture—specifically how to properly split server and client components, handle server actions, and optimize data fetching patterns. The streaming and suspense boundaries significantly improved perceived performance.
- Better Auth proved to be an excellent choice for modern authentication, especially its HTTPOnly cookie approach which provides better security than localStorage-based JWT storage. The Google OAuth integration was straightforward compared to implementing OAuth flow manually.
- Stripe's Checkout Session API is more robust than I initially thought—the webhook-based confirmation pattern ensures payment state consistency even if users close the browser mid-transaction. Learning to properly handle webhook signatures and idempotency was crucial.
- Building an editorial design system with restraint (minimal accent color usage, generous spacing, intentional typography hierarchy) creates a more premium feel than adding more colors and effects. The OKLCH color space in Tailwind CSS v4 provides better perceptual uniformity for theming.
- Implementing proper pagination and filtering on the server side (rather than client-side) dramatically improved performance when dealing with hundreds of recipes. MongoDB's aggregation pipeline was powerful for complex queries combining filtering, sorting, and pagination.