Namani Construction — Premium Building & Interior Design Platform

Table of Contents

• The Challenge
• Architecture & Solution
• Tech Stack
• Key Engineering Decisions
• Frontend Features
• Backend API
• Design System
• 3D Visualization
• Deployment
• Roadmap

The Challenge

Namani Construction & Design is a premium construction and interior design firm serving clients who expect visual excellence and sophisticated design. The previous website was static and lacked the interactive capabilities needed to showcase the firm's portfolio of complex construction projects and interior designs.

The challenge was creating a web platform that could effectively communicate the firm's premium brand positioning through visual excellence while also providing a functional admin system for content management. The website needed to feature 3D model viewers for project visualization, complex GSAP animations for engagement, and a responsive design that worked seamlessly across all devices.

The requirement: Build a visually stunning, performance-optimized website with interactive 3D elements, smooth animations, service package management, project portfolio showcase, and a NestJS-based admin API for content management.

Architecture & Solution

The platform follows a modern Turborepo monorepo architecture with separate frontend and backend applications:

Project Structure

namani/
├── apps/
│   ├── web/              # Next.js 15 frontend (Port 3000)
│   │   ├── app/          # App Router pages
│   │   │   ├── (main)/   # Public marketing pages
│   │   │   ├── auth/     # Authentication pages
│   │   │   ├── admin/    # Admin dashboard
│   │   │   └── developer/ # Developer tools
│   │   └── components/   # UI components
│   └── api/              # NestJS 11 backend (Port 3001)
│       └── src/          # Modules, services, controllers
├── turbo.json           # Turborepo configuration
└── docker-compose.yml    # Local development infrastructure

Tech Stack

Key Engineering Decisions

1. Turborepo Monorepo Orchestration

The project uses Turborepo for efficient build orchestration across both applications, enabling parallel builds and intelligent caching:

// turbo.json
{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**", "!.**/*"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {
      "dependsOn": ["^build"]
    }
  }
}

This configuration ensures that the API builds before the web app when they have dependencies, while maximizing build cache hits for faster subsequent builds.

2. Premium Dark Theme with Gold Accents

The design system implements a sophisticated dark theme with gold accent colors using Tailwind CSS configuration:

/* apps/web/app/globals.css */
@theme {
  --color-gold-50: #fdfbf7;
  --color-gold-100: #f9f0dc;
  --color-gold-400: #d4a94b;
  --color-gold-500: #c49a3b;
  --color-gold-600: #a67c2e;
  
  --color-surface-dark: #0a0a0a;
  --color-surface-card: #141414;
  
  --shadow-glow: 0 0 20px rgba(212, 169, 75, 0.3);
  --shadow-premium: 0 4px 6px -1px rgb(0 0 0 / 0.1),
                   0 2px 4px -2px rgb(0 0 0 / 0.1);
}

3. GSAP Animation Integration

Complex scroll-based and SVG animations are powered by GSAP for premium visual effects:

// components/ui/IsometricConstruction.tsx
'use client';
import { useEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export function IsometricConstruction() {
  const containerRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo('.construction-layer', 
        { y: 100, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 1,
          stagger: 0.2,
          scrollTrigger: {
            trigger: containerRef.current,
            start: 'top 80%',
            end: 'bottom 20%',
            toggleActions: 'play reverse play reverse'
          }
        }
      );
    }, containerRef);
    
    return () => ctx.revert();
  }, []);
  
  return (
    <div ref={containerRef} className="isometric-container">
      {/* SVG construction visualization */}
    </div>
  );
}

4. Performance-Optimized 3D Model Viewers

3D model viewers use Google Model Viewer with lazy loading and performance throttling:

// components/ui/ModelViewer.tsx
'use client';
import { useState, useRef } from 'react';

export function ModelViewer({ modelPath, poster }: ModelViewerProps) {
  const [loaded, setLoaded] = useState(false);
  const viewerRef = useRef<any>(null);

  // Throttle rendering for performance on lower-end devices
  const handleLoad = () => {
    setLoaded(true);
    if (viewerRef.current) {
      viewerRef.current.modelGltfTmart = Math.min(viewerRef.current.modelGltfTmart, 0.5);
    }
  };

  return (
    <div className="model-viewer-wrapper relative aspect-video">
      {!loaded && (
        <div className="absolute inset-0 bg-surface-card animate-pulse" />
      )}
      <model-viewer
        ref={viewerRef}
        src={modelPath}
        poster={poster}
        loading="lazy"
        reveal="interaction"
        camera-controls
        auto-rotate
        onLoad={handleLoad}
        className={`w-full h-full transition-opacity duration-500 ${loaded ? 'opacity-100' : 'opacity-0'}`}
      />
    </div>
  );
}

5. Security Middleware with Rate Limiting

The NestJS API implements comprehensive security with rate limiting:

// main.ts (API)
import { ThrottlerModule, ThrottlerGuard } from '@nestjs/throttler';
import { helmetMiddleware } from './middleware/helmet.middleware';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  // Security headers
  app.use(helmetMiddleware());
  
  // Rate limiting: 100 requests per minute
  app.useGlobalGuards(new ThrottlerGuard());
  
  // CORS configuration
  app.enableCors({
    origin: process.env.ALLOWED_ORIGINS?.split(',') || [],
    credentials: true,
  });
  
  await app.listen(process.env.PORT || 3001);
}

Frontend Features

Public Pages (20+ Routes)

Premium UI Components

Service Categories

1. Interior Design - Package-based design services (Basic, Standard, Premium)
2. Site Supervision - Project management and oversight
3. Building Construction - Full-scale construction services
4. Architecture Design - Plan and structural design consultation

Additional Features

• Dynamic content sections for Team, Projects, Packages
• Auto-scrolling testimonial carousels
• Service availability maps with floating UI elements
• Mobile-first responsive design with Tailwind CSS
• Performance-optimized 3D animations with lazy loading

Backend API

NestJS Architecture

The API follows a modular architecture with separate modules for different concerns:

/api
├── /auth          # JWT authentication, login, signup
├── /projects      # Project portfolio CRUD
├── /services      # Service package management
├── /team          # Team member management
├── /testimonials  # Client testimonials
├── /contacts      # Contact form submissions
├── /settings      # Site configuration
├── /uploads       # File upload to Minio
└── /health        # Health check endpoints

Authentication Flow

JWT-based authentication with httpOnly cookies:

// auth.controller.ts
@Post('login')
async login(@Body() dto: LoginDto) {
  const user = await this.authService.validateUser(dto.email, dto.password);
  
  if (!user) {
    throw new UnauthorizedException('Invalid credentials');
  }
  
  const tokens = await this.authService.generateTokens(user);
  
  return {
    access_token: tokens.access_token,
    user: { id: user.id, email: user.email, role: user.role },
  };
}

Database Models (Prisma)

Design System

Color Palette

Component Patterns

The design system emphasizes:

• 8px semantic grid: All spacing follows 8px increments
• Premium shadows: Layered shadows for depth
• Gold glow effects: Subtle glow on interactive elements
• Dark theme default: Primary aesthetic is dark mode
• Typography: Modern sans-serif (Inter/Outfit)

3D Visualization

Model Viewer Integration

The platform features interactive 3D model viewers using Google's model-viewer web component:

• Embedded widgets: Integrated within service pages
• Floating widgets: Sticky-positioned for continuous viewing
• Performance throttling: Reduced quality on mobile devices
• Lazy loading: Only loads when approaching viewport
• Poster images: Placeholder while loading
• Camera controls: Orbit, zoom, pan functionality

Supported Formats

• GLB (GL Transmission Format)
• USDZ (Universal Scene Description)
• OBJ with MTL materials

Deployment

Local Development

# Start infrastructure (PostgreSQL, Redis, Minio)
docker compose up -d

# Install dependencies
npm install

# Run both applications
npm run dev

Production Deployment

The project supports automated deployment via deploy script:

./deploy.sh "commit message"

Services:

• Website: Next.js production build
• API: NestJS production build
• PostgreSQL: Data persistence
• Redis: Caching layer
• Minio: Media file storage

Roadmap

• Phase 1 — Core Platform (Complete) - Turborepo, Next.js, NestJS, Prisma
• Phase 2 — Frontend UI (Complete) - Premium dark theme, GSAP animations
• Phase 3 — Service Pages (Complete) - 4 service categories with packages
• Phase 4 — Project Portfolio (Complete) - Gallery with filtering
• Phase 5 — 3D Integration (Complete) - Model viewers with lazy loading
• Phase 6 — Admin API (Complete) - NestJS with JWT auth
• Phase 7 — Admin Dashboard (In Progress) - Next.js admin interface
• Phase 8 — Online Payments (Planned) - Payment gateway integration
• Phase 9 — Client Portal (Planned) - Project tracking for clients
• Phase 10 — Analytics Dashboard (Planned) - Visitor and engagement metrics

Conclusion

The Namani Construction platform delivers a premium digital experience that matches the high-end positioning of the construction and interior design firm. The combination of GSAP animations, 3D model viewers, and sophisticated dark-gold design creates an engaging experience for potential clients while the NestJS API provides the foundation for content management.

The Turborepo monorepo structure enables efficient development and deployment, while Docker containerization ensures consistency across environments. The performance-optimized 3D elements and responsive design ensure the site works well across all devices and connection speeds.