SakuYadoArchitecture Documentation
SakuYado follows a component-based architecture with centralized state management, built on Next.js 16 App Router with full TypeScript support.
Source Architecture
Tech Stack
Next.js 16.1.6
App Router with Turbopack
React 19.2.4
With TypeScript
Tailwind CSS v4.2.1
Utility-first styling
Context + useReducer
Centralized state management
Vitest
Unit tests with V8 coverage
Cypress
End-to-end testing
Core Architecture Pattern
Component-Based Architecture with Context API
- Modular Components — Reusable UI components with clear responsibilities
- Centralized State — HotelContext manages all hotel-related state
- Separation of Concerns — UI, business logic, and data management are distinct
- Type-Safe Development — Full TypeScript integration throughout
Context API over Redux
Simpler, built-in solution with predictable state updates
LocalStorage Persistence
Hotel data persists automatically across browser sessions
Mobile-First Design
Optimized for 375px mobile with desktop support at 1280px+
App Router Architecture
Application Pages
| File | Route | Description |
|---|---|---|
page.tsx | / | Landing page with hero section and navigation CTAs |
hotels/add/page.tsx | /hotels/add | Hotel entry form with rich validation |
hotels/compare/page.tsx | /hotels/compare | Hotel comparison table and value ranking |
docs/page.tsx | /docs | Documentation overview and quick links |
docs/architecture/page.tsx | /docs/architecture | Technical documentation covering architecture and components |
docs/features/page.tsx | /docs/features | User guide detailing available features and usage |
Component Architecture
UI Component Library
| Component | Purpose |
|---|---|
Button | Interactive actions with variants (default, secondary, destructive, ghost, outline) and asChild support for Link components. |
Input | Basic text input field with Tailwind-based styling and focus states. |
Select | Full Radix-UI based selection system including SelectTrigger, SelectValue, SelectContent, and SelectItem. |
Card | Compositional container with CardHeader, CardTitle, CardDescription, CardContent, CardAction, and CardFooter sub-components. |
Alert | Feedback and warning messages with AlertTitle and AlertDescription for structured content. |
Field | A rich form layout system featuring FieldSet, FieldGroup, FieldLabel, FieldDescription, and FieldError with multi-error support. |
Label | Accessible Radix-UI based label element for form controls. |
Separator | Accessible visual divide between content sections with horizontal and vertical orientations. |
Table | Accessible data tables with TableHeader, TableBody, TableFooter, TableHead, and TableCell sub-components. |
Component Design Patterns
Stateless Components
All UI components receive data via props; business logic handled by context
Composition over Inheritance
Components built for reusability with flexible prop interfaces
Accessibility-First
Semantic HTML, ARIA labels, keyboard navigation, screen reader support