Hourglass Barbers Case Study

Overview

Hourglass Barbers is a custom full-stack website for a premium barbershop brand with a metropolitan black, white, and gold visual identity. The project pairs a polished public marketing site with an authenticated admin dashboard, giving the business control over its team, content, customer engagement, and analytics without relying on a third-party CMS.

The goal was to create a site that felt editorial and high-end on the front end while remaining practical and maintainable behind the scenes.

The Challenge

The business needed more than a static brochure site. The public experience needed to communicate atmosphere, craft, services, social proof, and booking calls to action, while the internal team needed a way to keep content fresh.

Key requirements included:

• A visually refined landing page with animated, premium brand presentation
• Dynamic barber profiles with images, bios, ordering, and booking links
• Google review integration with caching
• Instagram feed integration
• Newsletter signup and email sending
• Role-based admin access
• Analytics for page views and booking clicks
• Persistent storage for database records and uploaded images
• Production deployment on Coolify

The Solution

I built Hourglass as a full-stack Next.js application using the App Router, Server Actions, Prisma, SQLite, and NextAuth. The public site is database-backed, allowing core content such as barber profiles, business details, hours, and social links to be managed from the dashboard.

The admin area includes CRUD tools for barbers, review cache management, newsletter subscriber management, analytics views, user management, and site settings. Authentication uses credentials-based login with JWT sessions and role-based permissions for SUPER_ADMIN, ADMIN, and VIEWER users.

For production, the app is configured for standalone Next.js deployment on Coolify, with persistent storage mounted under /data for the SQLite database and uploaded media.

Features

Public Website

• Cinematic hero section with animated typography
• Brand philosophy and service sections
• Dynamic barber cards with booking calls to action
• Cached Google reviews carousel
• Instagram feed section
• Newsletter signup flow
• Location, hours, contact, and social links
• Final conversion-focused booking CTA

Admin Dashboard

• Secure login with role-based access control
• Barber management with image uploads, active states, and ordering
• Google review cache inspection and refresh tools
• Newsletter subscriber management, CSV export, and email composition
• Analytics for traffic and booking engagement
• User management for admins and viewers
• Site settings for business info, hours, social links, API keys, and SEO

Technical Stack

• Framework: Next.js 16 App Router
• Language: TypeScript
• UI: Tailwind CSS v4, Framer Motion
• Auth: NextAuth.js v5 with credentials, JWT sessions, and RBAC
• Database: Prisma v7 with SQLite via better-sqlite3
• Media: Local filesystem uploads in development, Coolify persistent volume in production
• Email: Resend and SMTP support
• Deployment: Coolify with Nixpacks and standalone Next.js output

Notable Implementation Details

The app uses a database-backed homepage, so the landing page is rendered dynamically at request time rather than prerendered during build. This lets the production deployment read live business content from the persisted SQLite database.

Uploaded barber images are stored on the filesystem and served from a persistent production volume. The deployment setup links the persistent upload directory into the standalone Next.js app so images survive rebuilds and redeploys.

Google reviews are cached to avoid unnecessary API usage, and analytics events are stored in the app database for admin reporting.

Outcome

Hourglass Barbers became a complete digital platform for the business: a premium customer-facing website, a practical content management system, and an operational dashboard in one application.

The result is a brand-forward site that can evolve with the business without requiring code changes for everyday updates.