Show Cases

A portfolio project showcasing various React UI patterns and frontend techniques, built with modern tooling and component libraries.

Live demo: https://show-cases.vercel.app/

Showcases

Route	Description
/	Registration form with validation
/confirm	Confirmation page with shared state
/data-table	Sortable, filterable, paginated data table
/dashboard	Weather dashboard with charts
/infinite-scroll	Infinite scroll image gallery
/model-viewer	Interactive 3D model viewer

Tech Stack

Core

• React 19 + TypeScript
• Vite — dev server and bundler
• React Router 7 — client-side routing
• Tailwind CSS v4 — utility-first styling

UI Components

• shadcn/ui — composable component system built on Radix UI
• Radix UI — accessible, unstyled primitives
• Lucide React — icon library
• class-variance-authority + tailwind-merge — variant-based component styling

Forms & Validation

• React Hook Form — performant form management
• Zod — schema-based validation

Data & Tables

• TanStack Table v8 — headless table with sorting, filtering, and pagination

Charts & Visualization

• Recharts v3 — composable chart library

3D Rendering

• Three.js + React Three Fiber v9 + drei — 3D scene rendering in React

Tooling

• Biome — fast linter and formatter

Getting Started

git clone https://github.com/your-username/show-cases.git
cd show-cases
pnpm install
pnpm start

Open http://localhost:5173 in your browser.

Scripts

Command	Description
pnpm start	Start dev server at localhost:5173
pnpm run build	Production build
pnpm run preview	Preview production build locally
pnpm run lint	Lint and format check (Biome)
pnpm run check	TypeScript type check

License

MIT — see LICENSE for details.