GitHub Copilot instructions for building a Next.js 16 car marketplace connecting verified professionals with premium used car buyers. Includes component patterns, styling guidelines, and architecture decisions.
Next.js 16 car marketplace connecting verified professionals (doctors, judges, teachers) with premium used car buyers. Two-sided platform: public-facing marketplace + admin dashboard.
```bash
pnpm dev # Start dev server
pnpm build # Production build (TypeScript errors ignored in config)
pnpm lint # ESLint check
```
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
```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
```
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
}
```
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>
```
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`)
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`)
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.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/value4car-copilot-instructions/raw