Project Structure

Y3NKO follows Next.js 14 App Router conventions with some project-specific organization.

Directory Overview

yenko-web/
├── app/                          # Next.js App Router
│   ├── (auth)/                   # Auth-related pages (grouped)
│   │   ├── login/
│   │   └── register/
│   ├── (main)/                   # Main app pages (grouped)
│   │   ├── page.tsx              # Homepage
│   │   ├── accommodations/
│   │   ├── activities/
│   │   ├── destinations/
│   │   └── about/
│   ├── dashboard/                # User dashboard
│   │   ├── bookings/
│   │   ├── favorites/
│   │   └── profile/
│   ├── host/                     # Host dashboard
│   │   ├── listings/
│   │   └── bookings/
│   ├── admin/                    # Admin dashboard
│   │   ├── listings/
│   │   ├── bookings/
│   │   └── users/
│   ├── api/                      # API routes
│   │   ├── auth/
│   │   ├── bookings/
│   │   ├── listings/
│   │   └── webhooks/
│   ├── layout.tsx                # Root layout
│   └── globals.css               # Global styles
├── components/
│   ├── ui/                       # shadcn/ui components
│   ├── forms/                    # Form components
│   ├── layout/                   # Header, Footer, etc.
│   └── features/                 # Feature-specific components
├── lib/
│   ├── db.ts                     # Prisma client
│   ├── supabase/                 # Supabase clients
│   ├── actions/                  # Server actions
│   ├── utils.ts                  # Utility functions
│   └── validators.ts             # Zod schemas
├── prisma/
│   ├── schema.prisma             # Database schema
│   └── seed.ts                   # Seed data
├── public/
│   └── images/
├── types/
│   └── index.ts                  # TypeScript types
├── docs/                         # This documentation
├── INSTRUCTIONS/                 # Original spec documents
└── CLAUDE.md                     # AI assistant instructions

Key Directories Explained

`app/` - Application Routes

Next.js 14 uses file-system routing. Each folder with a page.tsx becomes a route.

Route Groups (folders in parentheses like (auth)) organize code without affecting the URL structure.

app/
├── (auth)/
│   ├── login/page.tsx           # /login
│   └── register/page.tsx        # /register
├── accommodations/
│   ├── page.tsx                 # /accommodations
│   └── [slug]/page.tsx          # /accommodations/beach-villa

`components/` - React Components

Organized by purpose:

Directory	Purpose	Examples
`ui/`	Base UI primitives (shadcn/ui)	Button, Input, Card, Dialog
`forms/`	Form-related components	BookingForm, SearchBar
`layout/`	Page structure components	Header, Footer, Sidebar
`features/`	Feature-specific components	ListingCard, BookingCard

`lib/` - Utilities and Services

File/Directory	Purpose
`db.ts`	Prisma client singleton
`supabase/`	Supabase client setup
`actions/`	Server actions for mutations
`utils.ts`	Helper functions
`validators.ts`	Zod validation schemas
`email.ts`	Email sending functions

`prisma/` - Database

File	Purpose
`schema.prisma`	Database schema definition
`seed.ts`	Database seeding script
`migrations/`	Migration history (auto-generated)

File Naming Conventions

Type	Convention	Example
Components	PascalCase	`ListingCard.tsx`
Utilities	camelCase	`formatCurrency.ts`
Pages	`page.tsx`	`app/accommodations/page.tsx`
Layouts	`layout.tsx`	`app/layout.tsx`
API Routes	`route.ts`	`app/api/bookings/route.ts`
Loading UI	`loading.tsx`	`app/accommodations/loading.tsx`
Error UI	`error.tsx`	`app/accommodations/error.tsx`

Import Aliases

The project uses path aliases configured in tsconfig.json:

// Instead of
import { Button } from '../../../components/ui/button'
 
// Use
import { Button } from '@/components/ui/button'

Aliases configured:

@/* maps to the project root

Environment Files

File	Purpose	Committed
`.env`	Default environment variables	No
`.env.local`	Local development overrides	No
`.env.example`	Example variables (template)	Yes

Overview Data Flow