# Frontend - Next.js\/React\/TypeScript Patterns Next.js App Router with React, TypeScript, shadcn\/ui, and NextAuth.js patterns. --- ## Tech Stack | Library | Purpose | |---------|---------| | Next.js 16+ | React framework with App Router | | React 19 | UI library | | TypeScript 5 | Type safety | | Tailwind CSS v4 | Utility-first styling | | shadcn\/ui | Component library | | Zod | Schema validation | | NextAuth.js | Authentication | | Zustand | Client state management | | React Query | Server state management | | React Hook Form | Form handling | --- ## Project Structure ``` src\/ ├── app\/ # Next.js App Router │ ├── (auth)\/ # Auth route group (no layout) │ │ ├── login\/page.tsx │ │ └── register\/page.tsx │ ├── (dashboard)\/ # Dashboard route group │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── employees\/page.tsx │ ├── api\/ # API routes │ │ └── auth\/[...nextauth]\/route.ts │ ├── layout.tsx # Root layout │ ├── page.tsx # Home page │ └── globals.css │ ├── components\/ │ ├── ui\/ # shadcn\/ui components │ │ ├── button.tsx │ │ ├── input.tsx │ │ ├── card.tsx │ │ ├── dialog.tsx │ │ ├── form.tsx │ │ └── ... │ ├── common\/ # Custom shared components │ │ └── DataTable.tsx │ ├── layout\/ # Layout components │ │ ├── Header.tsx │ │ ├── Sidebar.tsx │ │ └── Footer.tsx │ └── features\/ # Feature-specific components │ ├── employees\/ │ └── departments\/ │ ├── hooks\/ # Custom React hooks │ ├── useDebounce.ts │ └── index.ts │ ├── services\/ # API service layer │ ├── api.ts │ └── index.ts │ ├── stores\/ # Zustand stores │ ├── useAuthStore.ts │ └── index.ts │ ├── types\/ # TypeScript types │ └── index.ts │ ├── lib\/ # Utility libraries │ ├── utils.ts # cn() helper │ ├── auth.ts # NextAuth config │ └── validations.ts # Zod schemas │ └── providers\/ # React providers ├── AuthProvider.tsx └── QueryProvider.tsx ``` --- ## shadcn\/ui Setup > **Reference Repository**: https:\/\/github.com\/vercel\/registry-starter > > Follow the file structure and component patterns from this official Vercel registry starter. ### Configuration (components.json) ```json { "$schema": "https:\/\/ui.shadcn.com\/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "src\/app\/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@\/components", "utils": "@\/lib\/utils", "ui": "@\/components\/ui", "lib": "@\/lib", "hooks": "@\/hooks" }, "iconLibrary": "lucide" } ``` ### Installation ```bash npx shadcn@latest init -y -d ``` ### Adding Components ```bash # Core UI components (install all at once) npx shadcn@latest add button card input label badge dialog dropdown-menu table tabs avatar alert form select checkbox textarea separator skeleton sonner tooltip popover command -y # Layout components npx shadcn@latest add sidebar sheet scroll-area breadcrumb navigation-menu -y # Form components npx shadcn@latest add switch radio-group calendar accordion -y # Additional components npx shadcn@latest add drawer collapsible context-menu hover-card menubar resizable slider toggle toggle-group aspect-ratio input-otp alert-dialog progress pagination -y ``` ### Available UI Components | Component | Description | |-----------|-------------| | `accordion` | Collapsible content sections | | `alert` | Callout for user attention | | `alert-dialog` | Modal confirmation dialog | | `avatar` | User profile image | | `badge` | Status indicator | | `breadcrumb` | Navigation path | | `button` | Clickable actions | | `calendar` | Date picker calendar | | `card` | Content container | | `checkbox` | Multiple selection | | `collapsible` | Expandable content | | `command` | Command palette | | `context-menu` | Right-click menu | | `dialog` | Modal overlay | | `drawer` | Slide-out panel | | `dropdown-menu` | Action menu | | `form` | Form with validation | | `hover-card` | Hover popup | | `input` | Text input | | `input-otp` | OTP code input | | `label` | Form label | | `menubar` | Desktop menu bar | | `navigation-menu` | Site navigation | | `pagination` | Page navigation | | `popover` | Popup content | | `progress` | Progress indicator | | `radio-group` | Single selection | | `resizable` | Resizable panels | | `scroll-area` | Custom scrollbar | | `select` | Dropdown select | | `separator` | Visual divider | | `sheet` | Side panel | | `sidebar` | App sidebar | | `skeleton` | Loading placeholder | | `slider` | Range input | | `sonner` | Toast notifications | | `switch` | Toggle switch | | `table` | Data table | | `tabs` | Tabbed content | | `textarea` | Multi-line input | | `toggle` | Toggle button | | `toggle-group` | Button group | | `tooltip` | Hover hint | ### cn() Utility (lib\/utils.ts) ```tsx import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } ``` ### Button Usage ```tsx import { Button } from "@\/components\/ui\/button"; \/\/ Variants

frontend