Kanban Frontend

A frontend application for a Kanban board built with Next.js.

Key Features

• Authentication (Login/Register/Logout) and session management (HttpOnly Cookie)
• Board/Column/Card management
• Drag & drop task reordering
• Dark mode support

Tech Stack

• Next.js
• React
• TypeScript
• Tailwind CSS
• TanStack Query
• dnd-kit
• Radix UI

Requirements

• Node.js 18.x or higher
• npm 9.x or higher
• Assumes the backend API kanban-backend is running.

Backend

For the backend that works with this app, please refer to the following repository:

• kanban-backend

Initial Setup

1. Clone the repository

git clone <repository-url>
cd kanban-frontend

2. Install dependencies

npm install

3. Configure environment variables

Copy .env.example to create .env.local.

cp .env.example .env.local

Edit .env.local and set the backend API URL.

# Backend API URL (Laravel Sanctum)
NEXT_PUBLIC_API_URL=http://localhost:8000

# Optional: Frontend App URL
NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Start the development server

npm run dev

Open http://localhost:3000 in your browser to view the application.

Project Structure

src/
├── app/                  # Next.js App Router
│   ├── api/              # Route Handlers
│   ├── boards/           # Board pages
│   ├── login/            # Login page
│   └── register/         # Registration page
├── components/           # Shared components
│   └── ui/               # UI components
├── constants/            # Constants
├── features/             # Feature modules
│   ├── board/            # Board feature
│   ├── card/             # Card feature
│   └── column/           # Column feature
├── hooks/                # Custom hooks
├── lib/                  # Utilities
├── middleware.ts         # Middleware
└── types/                # Type definitions