Gencool HVAC Mechanical
Transitioning a legacy WordPress site to a modern Next.js + Tailwind platform with a custom CMS, product management dashboard, and role-based access control.
Overview
Gencool HVAC Mechanical is a business corporation specializing in HVAC systems. The original WordPress site served them well, but as the business grew, they needed a more robust platform with product management capabilities, an admin dashboard, and role-based access control. The project involves rebuilding the entire site from scratch using Next.js and Tailwind CSS, with a custom CMS that allows staff to manage their product catalog, service pages, and company content without touching code. The dashboard supports multiple user roles — admins can manage everything, while editors can only update specific content areas.
Tech Stack
Key Features
- Full Next.js + Tailwind CSS rebuild from legacy WordPress
- Custom CMS for product catalog management
- Admin dashboard with CRUD operations for products and services
- Role-based access control (admin and staff)
- Server-side rendering for SEO and performance
- Responsive design across all devices
Gallery
Process
Challenges
Legacy WordPress limitations
The WordPress site couldn't support custom product management or role-based workflows. Plugins were bloated and the admin experience was confusing for non-technical staff.
Custom CMS architecture
Building a CMS from scratch with role-based access control required careful planning of database schema, API routes, and permission middleware.
SEO continuity during migration
The existing site had established search rankings. The migration needed to preserve all URLs, meta data, and structured data to avoid losing SEO equity.
Solutions
Next.js full-stack rebuild
Rebuilt the entire frontend with Next.js App Router and Tailwind CSS, leveraging server components for SEO and client components for dashboard interactivity.
Custom CMS with Prisma + PostgreSQL
Designed a relational database schema with Prisma ORM, built REST API routes for CRUD operations, and implemented a clean admin dashboard for content management.
Role-based access with NextAuth
Implemented NextAuth for authentication with three roles — admin (full access), editor (content only), and viewer (read-only). Middleware enforces permissions on every API route.
Development
Next.js full-stack rebuild
Rebuilt the entire frontend with Next.js App Router and Tailwind CSS, leveraging server components for SEO and client components for dashboard interactivity.
Custom CMS with Prisma + PostgreSQL
Designed a relational database schema with Prisma ORM, built REST API routes for CRUD operations, and implemented a clean admin dashboard for content management.
Role-based access with NextAuth
Implemented NextAuth for authentication with three roles — admin (full access), editor (content only), and viewer (read-only). Middleware enforces permissions on every API route.