Value4Car Copilot Instructions

Project Overview

Next.js 16 car marketplace connecting verified professionals (doctors, judges, teachers) with premium used car buyers. Two-sided platform: public-facing marketplace + admin dashboard.

Tech Stack & Architecture

Development Commands

```bash

pnpm dev # Start dev server

pnpm build # Production build (TypeScript errors ignored in config)

pnpm lint # ESLint check

```

Key Architectural Patterns

Routing Structure

Client vs Server Components

Admin Authentication Pattern

Location: `contexts/admin-auth-context.tsx`

Frontend-only auth via localStorage (marked TODO for backend). AdminAuthProvider wraps admin routes in admin/layout.tsx. Protected routes redirect to /admin/login when unauthenticated.

**Critical**: Admin layout (`app/admin/layout.tsx`) handles:

1. Auth check with loading skeleton

2. Redirect logic for unauthenticated users

3. Sidebar navigation (LayoutDashboard, Car, Users, MessageSquare icons)

4. Theme toggle in sidebar footer

Data Flow (Current State)

Component Conventions

UI Components Import Pattern

```typescript

// Always use @ alias from tsconfig paths

import { Button } from "@/components/ui/button"

import { CarCard } from "@/components/car-card"

import { cn } from "@/lib/utils" // Utility for className merging

```

CarCard Interface

All car objects must match:

```typescript

{

id: string

brand: string

model: string

year: number

price: number

image: string

ownerType: string // "Doctor", "Judge", "Teacher", etc.

location: string

mileage: string

}

```

Theme Implementation

Animation Patterns

Framer Motion usage:

```tsx

// Card hover lift

<motion.div whileHover={{ y: -4 }} transition={{ duration: 0.2 }}>

// Initial page load

<motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>

// Mobile menu toggle

<AnimatePresence>

{isOpen && <motion.div initial={{ opacity: 0, height: 0 }} ...>}

</AnimatePresence>

```

Styling Guidelines

Color System

Component Styling

SEO & Metadata

Known Technical Debt

1. **Auth**: Frontend-only localStorage auth (see TODO in `admin-auth-context.tsx`)

2. **Data**: All car listings are mock data in component files

3. **TypeScript**: Build errors ignored (`ignoreBuildErrors: true` in next.config)

4. **Images**: Unoptimized (referencing local assets in `/public`)

File Organization

When Adding New Features

1. **New car routes**: Follow `/cars/[id]` pattern, wrap with Navbar + Footer

2. **Admin pages**: Use client components, ensure AdminAuthProvider in layout

3. **UI components**: Run `npx shadcn@latest add [component]` (components.json configured)

4. **Forms**: Use react-hook-form + zod (dependencies installed)

5. **Icons**: Import from lucide-react (e.g., `Search`, `Car`, `MapPin`)

Instructions for AI Assistant

When working with this codebase:

1. **Component Creation**: Always use `"use client"` for interactive components. Follow the pattern of importing UI components with the `@/` alias. Use `cn()` for conditional styling.

2. **Admin Features**: Remember admin routes require client components and AdminAuthProvider context. Check authentication state before rendering protected content.

3. **Car Data**: When adding car-related features, ensure objects match the CarCard interface with all required fields (id, brand, model, year, price, image, ownerType, location, mileage).

4. **Styling**: Use OKLCH color tokens, not RGB/HSL. Apply Framer Motion for subtle animations. Follow mobile-first responsive design with Tailwind breakpoints.

5. **New Pages**: Structure new routes following the App Router conventions. Add metadata exports for SEO. Wrap with appropriate layouts (Navbar/Footer for public, admin layout for dashboard).

6. **Icons**: Use lucide-react for all icons. Common icons: Car, MapPin, Search, LayoutDashboard, User, MessageSquare, Sun, Moon.

7. **Data Fetching**: Currently using mock data in components. When adding features, maintain this pattern until backend is implemented. Mark TODOs for future backend integration.

8. **Type Safety**: Maintain TypeScript types even though build errors are currently ignored. This will be important when the TODO for proper type checking is addressed.