Back to Projects
Case Study

Hog Heaven
Website & CRM

A fully custom, high-performance web application and Content Management System (CRM) tailored specifically for a dynamic restaurant and catering brand.

Client
Hog Heaven Open Flame BBQ
Hog Heaven Showcase

Project Overview & Objective

Hog Heaven is a fully custom, high-performance web application and Content Management System (CRM) tailored specifically for a dynamic restaurant and catering brand. The objective was to replace a traditional, rigid online presence with an engaging, conversion-optimized aesthetic combined with a highly secure, entirely bespoke administrative dashboard for managing logistics.

Deep-Dive: Key Features

A. The Storefront (User Experience)

  • SEO-Optimized Server Components: Essential pages—such as the full Menu, Event directories, Catering details, and About sections—are rendered natively on the server utilizing Next.js App Router. This ensures instantaneous load times and perfect SEO indexing to dominate local search results.
  • Fluid & Dynamic UI Interactivity: Leveraging Framer Motion for smooth scroll animations and Embla Carousel for dynamic menu and gallery showcases, giving users an impactful, immersive browsing experience.
  • Robust Form Handling & Lead Generation: Complex inquiry forms (e.g., specific event dates, catering requests, custom package selections) are built with React Hook Form and validated strictly via Zod schemas to guarantee data accuracy before being processed by Server Actions.
  • Accessible Component Architecture: Premium, accessible UI interactions (Toasts, Modals, Accordions, Dropdowns) are implemented seamlessly utilizing headless components from Radix UI, maintaining a polished, distraction-free environment.

B. The Custom CRM (Admin Dashboard)

Foregoing out-of-the-box inflexible CMS tools, a completely custom CRM was built at the /dashboard route. This is securely protected by Next.js Middleware which intercepts requests and verifies JWT authentication tokens.

  • Menu & Category Management: Full CRUD (Create, Read, Update, Delete) capabilities for the core restaurant offerings. Admins can effortlessly define dynamic categories, tag items, tweak pricing descriptions, and organize their digital menu in real time.
  • Catering & Incoming Messages Management: A dedicated management view allowing admins to track incoming catering event requests submitted by customers on the storefront. They can seamlessly view client details, monitor status, and act on high-value leads.
  • Event Scheduling & Content Tracking: A sophisticated module enabling administrators to schedule, edit, and feature dynamic events or live music nights directly on the public-facing storefront.
  • Insights & Analytics: The unified administrator dashboard integrates Recharts to securely process and visualize booking volumes, event popularity, and crucial business metrics directly queried from the underlying MongoDB database.

C. Security & Integrations

  • Edge Middleware Protection: Next.js middleware is actively deployed on /dashboard/* and /api/* routes. It securely decrypts and verifies the user's role via a strict JWT secret before rendering the page, aggressively blocking and redirecting unauthorized access to the /login portal.
  • File Upload Security: Direct integration with UploadThing ensures highly optimized media delivery for menu items and event cover images. Secure endpoint rules limit uploads strictly to authenticated administrator sessions, preventing malicious file injections.
  • Automated Email Flows: Fully configured SMTP endpoint pipelines automatically dispatch instant administrative email alerts for new catering requests, ensuring prompt follow-ups and frictionless communication with prospective clients.
  • Reliable Database Architecture: Strictly enforced server schemas built using Mongoose ensure deeply structured, scalable relationships between categories, menu items, events, and bookings on a high-speed MongoDB instance.

Technologies Used

Next.js App RouterTypeScriptTailwind CSSFramer MotionEmbla CarouselReact Hook FormZodRadix UIMongoDB & MongooseRechartsUploadThingJWT AuthenticationSMTP

Deployment & Environment

Vercel & Node.js Edge

Database Layer

MongoDB (NoSQL) & Mongoose

Auth & Security

JWT Token & Next.js Middleware

Visit Live Site

Project Gallery

A visual journey through the platform's interfaces and features. Click any image to enlarge.

Project interface thumbnail 1
Project interface thumbnail 2
Project interface thumbnail 3
Project interface thumbnail 4
Project interface thumbnail 5
Project interface thumbnail 6
Project interface thumbnail 7
Project interface thumbnail 8