Enterprise Construction Platform & CMS

📌 Project Overview

Enterprise Construction Platform & CMS is a robust, full-stack monorepo system engineered for high-growth construction and engineering companies. The platform seamlessly bridges public brand presentation with real-time back-office operations, allowing administrators to manage projects, services, blog news, client testimonials, and certificates through a custom content management system (CMS).

Built with a decoupled, high-availability architecture, the system pairs a fast Next.js (App Router) public web application with a React + Vite administrative control center powered by a secure Node.js/Express.js REST API connected to a Managed MySQL database.

🛠️ Tech Stack & Architecture

🌐 Public Website (construction-website)

• Framework: Next.js (App Router, React 19)
• Styling: Tailwind CSS v4, Radix UI, Emotion, Lucide Icons
• Animations: Motion (Framer Motion)
• Rendering: Server-Side Rendering (SSR) & Incremental Static Regeneration (ISR) for instant page loads and maximum SEO efficiency.

🔑 Admin Control Panel (construction-admin)

• Framework: React 18 + Vite 6
• Routing: React Router v7
• Rich Text Editing: Tiptap Editor for dynamic blog/news publishing
• Data Visualization: Recharts for interactive analytics
• UI Components: Radix UI Primitives & Tailwind CSS

⚙️ Backend API (construction-api)

• Runtime & Framework: Node.js & Express.js v5 (TypeScript)
• Database: Managed MySQL (MySQL2 driver, dynamic migration engine)
• Cloud Media Pipeline: Cloudinary API + Multer middleware for optimized image transformations
• Security & Auth: JWT (JSON Web Tokens), bcrypt password hashing, Helmet HTTP security headers, CORS, Zod schema validation
• Services & Utilities: Nodemailer for automated customer inquiries, Pino structured logging, Compression middleware

✨ Key Features & Capabilities

• 🏗️ Multi-Media Project Showcase: High-resolution gallery management supporting multi-image uploads, categorized tags, and client project timelines.
• ⚡ On-Demand ISR Cache Revalidation: Dynamic content updates in the Admin Panel instantly trigger POST revalidation hooks to flush static page caches on the public Next.js site without requiring full redeployments.
• ✍️ WYSIWYG Content Publishing: Tiptap-powered rich text editing for publishing company news, announcements, and structural case studies.
• 📩 Real-Time Inquiry & Notification System: Customer contact submissions automatically queue formatted email notifications to managers via Nodemailer and store messages directly in the admin dashboard.
• 📱 Fully Responsive Design: Mobile-first fluid UI crafted with accessible Radix UI primitives and custom CSS animations.
• 🔒 Enterprise Security & Audit: Protected API routes with token-based authentication, strict request body validation via Zod, and HTTP request logging via Pino.

🚀 Key Technical Highlights & Impact

• Performance: Achieved near-instant LCP (Largest Contentful Paint) times on public pages through hybrid SSR/ISR rendering strategies.
• Scalability: Decoupled monorepo architecture enables independent scaling of public traffic servers, administrative functions, and backend services.
• Developer Experience: Standardized TypeScript contracts across API and frontend packages with comprehensive OpenAPI/Hoppscotch API documentation.

Traditional construction company websites often face two major challenges: slow page loads due to heavy high-resolution media galleries, and fragmented operational management where media content, client inquiries, and project portfolios are stored across separate systems.

The client needed an enterprise-grade platform capable of:

• Instant page loading for prospective clients showcasing high-resolution gallery images without performance degradation.
• A centralized back-office CMS allowing field admins to update active project statuses, upload certificates, manage client inquiries, and edit content in real-time.
• Strict security and auditability across administrative operations.

1. Zero-Downtime Cache Invalidation

Whenever an admin updates a project in the CMS, the changes must immediately reflect on the public site without full site rebuilds.

• Solution: Implemented On-Demand Webhooks & Revalidation APIs in Next.js that trigger cache purge hooks only for affected routes upon publishing.

2. Large Media Asset Optimization

Construction project showcases require crisp, multi-angle photos which can balloon page sizes.

• Solution: Integrated automated image optimization pipelines converting uploads to modern WebP formats with responsive image srcsets.