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. --- ## 📐 System Architecture Flow ┌─────────────────────────┐ HTTP GET / ISR ┌───────────────────────────┐ │ Public Website │ ◄─────────────────────────────── │ Next.js App Server │ │ (Samson Construction) │ └─────────────┬─────────────┘ └─────────────────────────┘ │ REST API Call ▼ ┌─────────────────────────┐ REST API (JWT Auth) ┌───────────────────────────┐ │ Admin Panel │ ───────────────────────────────► │ Express.js Backend API │ │ (Vite + React) │ ◄─────────────────────────────── │ (Node.js / TypeScript) │ └─────────────────────────┘ └───────┬───────────┬───────┘ │ │ MySQL Query (mysql2)│ │ Cloudinary SDK ▼ ▼ ┌─────────────┐ ┌─────────────┐ │ Managed │ │ Cloudinary │ │ MySQL DB │ │ Media CDN │ └─────────────┘ └─────────────┘ --- ## 🚀 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.