Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js

Version 20.x or higher recommended

pnpm

Fast, disk space efficient package manager
This project uses pnpm as the package manager. If you don’t have it installed, run:
npm install -g pnpm

​
Installation

Follow these steps to set up your development environment:
1

Clone the repository

git clone <repository-url>
cd kds-frontend
2

Install dependencies

Install all required packages using pnpm:
pnpm install
This will install all dependencies defined in package.json, including:
  • Next.js 14 - React framework
  • TypeScript 5 - Type safety
  • React 18 - UI library
  • @dnd-kit - Drag and drop functionality
  • Socket.io-client - Real-time updates
  • Axios - HTTP client
  • SASS - Styling
  • Biome - Linting and formatting
3

Configure environment variables

Create a .env.local file in the root directory:
cp .env.example .env.local
Update the API URL to point to your backend:
.env.local
NEXT_PUBLIC_API_URL=http://localhost:3004
The NEXT_PUBLIC_ prefix makes this variable accessible in the browser. This is required for client-side API calls.

​
Running the Development Server

Start the Next.js development server: 
pnpm dev
The application will be available at http://localhost:3000
  • Fast Refresh - Instant feedback on code changes
  • Hot Module Replacement - Updates without full page reload
  • Error overlay - Detailed error messages in the browser
  • TypeScript checking - Real-time type validation

​
Building for Production

Create an optimized production build: 
pnpm build
The build process:
  1. Compiles TypeScript to JavaScript
  2. Bundles and minifies all assets
  3. Optimizes images and fonts
  4. Generates static pages where possible
  5. Creates server-side rendering bundles
Always test your production build locally before deploying to ensure everything works as expected.

​
Linting and Code Quality

This project uses Biome for fast, comprehensive code linting and formatting.

​
Running the Linter

pnpm lint

​
Biome Configuration

The project uses a custom Biome configuration (biome.json) with: 
{
  "formatter": {
    "enabled": true,
    "indentStyle": "tab",
    "indentWidth": 4
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "semicolons": "asNeeded"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}
  • Auto-organize imports - Sorts imports alphabetically
  • Sorted attributes - Consistent JSX attribute ordering
  • Sorted properties - Alphabetical object keys
  • Tab indentation - 4-space tabs for consistency
  • Double quotes - Enforced quote style
  • Smart semicolons - Added only when needed

​
TypeScript Configuration

The project uses strict TypeScript settings for maximum type safety:
tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitOverride": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": ["./*"]
    }
  }
}
exactOptionalPropertyTypes is enabled, which means you cannot pass undefined explicitly to optional properties. This prevents common bugs and enforces cleaner type contracts.

​
Path Aliases

The project uses the @/ alias for cleaner imports: 
import { OrderStatus } from '../../../domain/order/order-status';

​
Troubleshooting

If port 3000 is occupied, Next.js will automatically try port 3001. You can also specify a custom port:
pnpm dev -- -p 3001
Clear the cache and reinstall dependencies:
rm -rf node_modules .next
pnpm install
Ensure you’re using TypeScript 5.x:
pnpm list typescript
Verify that:
  • The backend server is running
  • NEXT_PUBLIC_API_URL is correctly set
  • There are no CORS issues

​
Next Steps

Project Structure

Learn about the architecture and directory organization

Styling Guide

Understand the SCSS modules and theming system

Build docs developers (and LLMs) love

Get started for freeTalk to us