# DEAL PLUS TECH - PROJECT KNOWLEDGE BASE

**Generated:** 2026-03-10  
**Commit:** 668f690  
**Branch:** main  

## OVERVIEW

Thai corporate website for pipe/HVAC materials supplier. Next.js 14 App Router + TypeScript + Tailwind CSS. Thai language content with Thai URL support.

## STRUCTURE

```
src/
├── app/           # Next.js App Router pages
├── components/    # UI, layout, analytics components
├── content/       # Blog markdown files
├── data/          # Product catalog & site config (HUGE)
├── lib/           # Utility functions
├── styles/        # Global CSS + Tailwind
└── types/         # TypeScript interfaces
```

## WHERE TO LOOK

| Task | Location | Notes |
|------|----------|-------|
| Add/edit pages | `src/app/*/page.tsx` | App Router conventions |
| Add/edit products | `src/data/site-config.ts` | ProductCategory array |
| Add product tables | `src/data/product-tables.ts` | Table data for specs |
| UI components | `src/components/ui/` | Button, Card, Badge |
| Layout | `src/components/layout/` | Header, Footer, FloatingContact |
| Types | `src/types/index.ts` | All TypeScript interfaces |
| Styling | `src/styles/globals.css` | Custom component classes |
| SEO/Metadata | `src/app/layout.tsx` | Root metadata + schema |

## CONVENTIONS

**Thai-first content**: All UI text, URLs, metadata in Thai. English `nameEn` fields for product IDs.

**URL format**: Thai URLs with trailing slash (e.g., `/ท่อพีพีอาร์ตราช้าง/`)

**Product data structure**: Each product in `productCategories` has:
- Thai `name`, `description`, `seoContent`
- English `nameEn`, `id`, `slug`
- `specifications[]`, `features[]`, `applications[]`, `faq[]`
- `schemaData` for structured data
- Optional `productTables[]` for spec tables

**Styling**: Tailwind + custom classes in globals.css:
- `.btn-primary`, `.btn-secondary`, `.btn-outline`
- `.card`, `.card-industrial`
- `.section-title`, `.section-subtitle`

**Font**: Kanit (Thai Google Font) via `next/font/google`

**Path alias**: `@/*` maps to `./src/*`

## DEPLOYMENT

### Dockerfile (Production)

```dockerfile
# Multi-stage build for Next.js
FROM node:20-alpine AS deps
# ... (see Dockerfile for full config)
```

**Easypanel Configuration:**
- **Build Type:** Dockerfile
- **Dockerfile Path:** `./Dockerfile`
- **Port:** 3000

**To Deploy:**
1. Push to Git main branch
2. Easypanel auto-detects and rebuilds
3. Wait 2-3 minutes for build
4. Site is live

### Alternative: Nixpacks

If Dockerfile build fails, Easypanel can auto-detect and use Nixpacks.

## ANTI-PATTERNS (THIS PROJECT)

- **DO NOT** use `output: 'standalone'` in dev mode (breaks HMR)
- **DO NOT** hardcode contact info - use `siteConfig` from `@/data/site-config`
- **DO NOT** add tests - project has no test infrastructure
- **DO NOT** use `as any`, `@ts-ignore`, `@ts-expect-error` - strict mode enabled
- **DO NOT** modify CSS unless necessary - preserve existing design

## UNIQUE STYLES

**Design System**: Industrial/construction theme with:
- Primary green (#22c55e) - trust, growth
- Secondary slate grays - professional, industrial
- Accent yellow - highlights
- Industrial-specific shadows and gradients

**Product pages**: SEO-heavy with structured data (LocalBusiness schema, Product schema)

**Blog**: Headless WordPress integration via `NEXT_PUBLIC_WORDPRESS_API_URL`

**Image optimization**: AVIF/WebP auto-converted, Thai domain patterns in `next.config.mjs`

## COMMANDS

```bash
npm run dev      # Development server (localhost:3000)
npm run build    # Production build
npm run start    # Production server
npm run lint     # ESLint check
```

## NOTES

- No CI/CD configured - manual deployments via Easypanel
- Environment variables in `.env.local` (copy from `.env.example`)
- Large data files in `src/data/` - edit with care
- Thai URLs require URL-encoded characters in some contexts
- `public/llm.txt` contains AI-readable content for the site

## PAGES STRUCTURE

| Route | File | Description |
|-------|------|-------------|
| `/` | `app/page.tsx` | Homepage with hero, featured products |
| `/about-us/` | `app/about-us/page.tsx` | About company |
| `/services/` | `app/services/page.tsx` | Services offered |
| `/products/` | `app/product/page.tsx` | Product listing |
| `/contact-us/` | `app/contact-us/page.tsx` | Contact form & info |
| `/join-us/` | `app/join-us/page.tsx` | Careers/jobs |
| `/sales-engineer/` | `app/sales-engineer/page.tsx` | Sales engineer info |
| `/portfolio/` | `app/portfolio/page.tsx` | Project portfolio |
| `/all-projects/` | `app/all-projects/page.tsx` | FAQ page |
| `/blog/` | `app/blog/page.tsx` | Blog listing |
| `/[slug]/` | `app/[slug]/page.tsx` | Dynamic product pages |

## DATA STRUCTURE

### site-config.ts

```typescript
interface ProductCategory {
  id: string;
  name: string;  // Thai
  nameEn: string;  // English
  slug: string;  // Thai URL slug
  href: string;  // Full URL
  description: string;
  shortDescription: string;
  image: string;
  specifications: Array<{label: string; value: string; unit?: string}>;
  features: string[];
  applications: string[];
  faq: Array<{question: string; answer: string}>;
  schemaData: {...};
}
```

### Key Config Sections:
- `siteConfig` - Company info, contact details
- `mainNavigation` - Header navigation items
- `productCategories` - All products (20+ items)
- `workHours` - Business hours
- `socialLinks` - Social media links

## IMAGE HANDLING

**Location**: `public/images/`

**Optimization**:
- Next.js Image component auto-converts to AVIF/WebP
- Remote patterns configured for external images
- Sharp required for production builds

**Best Practices**:
- Use `next/image` component
- Always provide `alt` text in Thai
- Specify `width` and `height` to prevent layout shift

## SEO

**Metadata**:
- Thai language meta tags
- Open Graph tags for social sharing
- Twitter Card support
- Structured data (JSON-LD) for LocalBusiness

**Thai URLs**:
- All URLs in Thai language
- URL-encoded where necessary
- Trailing slashes preserved

## BACKUP

Old Next.js project backed up at:
`/Users/kunthawatgreethong/Gitea/dealplustech-backup-nextjs-{DATE}.tar.gz`

---

**Last Updated:** 2026-03-10  
**Status:** Production Ready