Welcome to KDS Frontend
KDS Frontend is a modern Kitchen Display System (KDS) built with Next.js, designed to streamline order management in restaurant kitchens through an intuitive, real-time Kanban interface.Quick Start
Get up and running in minutes with our quick start guide
Architecture
Learn about the clean layered architecture
Components
Explore the component library
API Reference
Dive into the API documentation
Key Features
Real-time Sync
Order synchronization via WebSockets ensures all displays stay up-to-date instantly
Drag & Drop
Intuitive Kanban board with drag-and-drop for seamless order status management
Clean Architecture
Domain-driven design with clear separation of concerns across layers
Theme Support
Light and dark modes with smooth transitions
Validated Transitions
Business rules enforce valid order status transitions
Responsive Design
Works seamlessly across desktop and mobile devices
Order Status Flow
The KDS manages orders through seven distinct states:Technology Stack
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe development
- SCSS Modules - Scoped component styling
- @dnd-kit - Drag-and-drop functionality
- Socket.io - Real-time WebSocket communication
- Axios - HTTP client for API requests
Architecture Principles
The application follows clean architecture principles with clear boundaries:- Domain Layer - Pure business logic and rules
- Application Layer - Use cases and interfaces
- Infrastructure Layer - External integrations (HTTP, WebSocket)
- Presentation Layer - React components and UI
All business rules are encapsulated in the domain layer, ensuring consistency and testability across the application.
Next Steps
Set Up Your Environment
Install dependencies and configure your development environment
Understand the Architecture
Learn how the layers work together
Explore Components
See how to use the UI components
View API Reference
Browse the complete API documentation