ivangdavila_frontend/stack.md

Stack & Tooling — Frontend

Recommended Stack

Layer	Choice	Why
Framework	Next.js 14+	RSC, file routing, Vercel deploy
Language	TypeScript	Catch errors early, better DX
Styling	Tailwind CSS	Utility-first, design tokens built-in
Components	shadcn/ui	Accessible, customizable, not a dependency
Animation	Framer Motion	Declarative, performant
Forms	React Hook Form + Zod	Type-safe validation
State	Zustand or Jotai	Simple, no boilerplate

Project Structure

src/
├── app/                 # Next.js App Router
│   ├── layout.tsx
│   ├── page.tsx
│   └── [feature]/
├── components/
│   ├── ui/              # shadcn/ui components
│   └── [feature]/
├── lib/
│   ├── utils.ts         # cn(), formatters
│   └── api.ts
├── hooks/
├── styles/
│   └── globals.css
└── config/
    └── site.ts

Essential Utils

// lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

shadcn/ui Setup

npx shadcn@latest init
npx shadcn@latest add button card dialog

Most used: Button, Card, Dialog, Accordion, Tabs, Sheet, NavigationMenu.