Moving Kanban Board

A responsive drag-and-drop kanban board application designed for organizing moving tasks. Perfect for demonstrating Veeam Kasten backup and restore capabilities with persistent data in OpenShift.

Features

📋 5 Pre-configured Boards: To Do, Moving Information, To Pack, To Donate, To Recycle/Trash
🎯 Drag & Drop: Intuitive task management with smooth animations
👥 User Assignment: Assign tasks to family members with color-coded avatars
🏷️ Tagging System: Categorize tasks with customizable tags (Fragile, Kitchen, Urgent, etc.)
🌓 Light/Dark Theme: Toggle between themes with persistent preference
📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile
🔄 Real-time Updates: Live synchronization across all clients
💾 Persistent Storage: PostgreSQL database ensures data persistence

Tech Stack

Frontend: React 18, @dnd-kit for drag-and-drop, Axios for API calls
Backend: Node.js, Express, PostgreSQL
Database: PostgreSQL 15 with comprehensive schema
Containerization: Docker & Docker Compose
Deployment: OpenShift-ready with persistent volumes

Quick Start

Prerequisites

Docker and Docker Compose
Node.js 18+ (for local development)

Run with Docker Compose

# Clone and start the application
git clone <repository-url>
cd moving-kanban

# Start all services
npm run dev

# View logs
npm run logs

# Stop services
npm run down

The application will be available at:

Frontend: http://localhost:3000
Backend API: http://localhost:5000
PostgreSQL: localhost:5432

Local Development

# Install backend dependencies
cd backend && npm install

# Install frontend dependencies
cd ../frontend && npm install

# Start PostgreSQL (using Docker Compose)
docker-compose up postgres -d

# Start backend (in backend directory)
npm run dev

# Start frontend (in frontend directory)
npm start

Database Schema

The application uses a well-structured PostgreSQL schema:

users: Family members who can be assigned to tasks
boards: The 5 moving boards with positioning and colors
tasks: Individual moving tasks with priority, due dates, and assignments
tags: Customizable labels for categorizing tasks
task_tags: Many-to-many relationship for flexible tagging

API Endpoints

Method	Endpoint	Description
GET	`/api/boards`	Get all boards
GET	`/api/tasks`	Get all tasks with relationships
POST	`/api/tasks`	Create new task
PUT	`/api/tasks/:id`	Update task
DELETE	`/api/tasks/:id`	Delete task
PUT	`/api/tasks/reorder`	Reorder tasks (drag & drop)
GET	`/api/users`	Get all users
POST	`/api/users`	Create new user
GET	`/api/tags`	Get all tags
POST	`/api/tags`	Create new tag

Environment Variables

Backend (.env)

NODE_ENV=development
PORT=5000
DB_HOST=postgres
DB_PORT=5432
DB_NAME=moving_kanban
DB_USER=kanban_user
DB_PASSWORD=kanban_password

Frontend

REACT_APP_API_URL=http://localhost:5000

Docker Configuration

The application includes optimized Docker configuration:

Multi-stage builds for production
Health checks for PostgreSQL
Volume mounts for development
Proper dependency management

Veeam Kasten Integration

This application is designed to demonstrate Veeam Kasten's backup and restore capabilities:

Persistent Data: PostgreSQL data is stored in Docker volumes
Stateful Application: Real user data with relationships
OpenShift Ready: Includes manifests for easy deployment
Data Recovery Testing: Add tasks, backup with Kasten, simulate failure, restore

OpenShift Deployment

Kubernetes/OpenShift manifests will be provided for:

PostgreSQL StatefulSet with PersistentVolumeClaim
Backend Deployment with ConfigMap and Secrets
Frontend Deployment with ConfigMap
Services and Routes for external access
NetworkPolicies for security

Development Notes

The application uses modern React patterns with hooks
Drag & Drop powered by @dnd-kit for accessibility and performance
Responsive CSS Grid layout with CSS custom properties for theming
Express.js API with proper error handling and CORS
PostgreSQL with proper indexing and relationships

Sample Data

The application includes sample data:

4 sample users (John Doe, Jane Smith, Mike Johnson, Sarah Wilson)
10 common moving tags (Fragile, Heavy, Important, Kitchen, etc.)
5 sample tasks distributed across boards
Color-coded priorities and user avatars

Perfect for demonstrating backup/restore scenarios with realistic data!

🚀 OpenShift Deployment

Prerequisites

OpenShift cluster access with cluster-admin privileges (or sufficient permissions)
OpenShift CLI (oc) installed and configured
Container images built and pushed to accessible registry

Quick Deployment

Login to OpenShift:
```
oc login <your-openshift-cluster-url>
```
Deploy the application:
```
cd openshift
./deploy.sh
```
Access the application: The script will output the application URL. Open it in your browser.

Manual Deployment

If you prefer to deploy manually:

# Create namespace and apply all manifests
oc apply -f openshift/namespace.yaml
oc apply -f openshift/postgres-secrets.yaml
oc apply -f openshift/postgres-configmap.yaml
oc apply -f openshift/backend-configmap.yaml
oc apply -f openshift/frontend-configmap.yaml

# Deploy PostgreSQL with persistent storage
oc apply -f openshift/postgres-statefulset.yaml
oc apply -f openshift/postgres-service.yaml

# Wait for PostgreSQL to be ready
oc wait --for=condition=ready pod -l app.kubernetes.io/component=database -n moving-kanban --timeout=300s

# Deploy backend and frontend
oc apply -f openshift/backend-deployment.yaml
oc apply -f openshift/backend-service.yaml
oc apply -f openshift/frontend-deployment.yaml
oc apply -f openshift/frontend-service.yaml

# Create external route
oc apply -f openshift/frontend-route.yaml

Container Images

Before deploying, you need to build and push the container images:

Backend Image

cd backend
podman build -t quay.io/your-registry/moving-kanban-backend:latest .
podman push quay.io/your-registry/moving-kanban-backend:latest

Frontend Image

cd frontend
podman build -t quay.io/your-registry/moving-kanban-frontend:latest .
podman push quay.io/your-registry/moving-kanban-frontend:latest

Update the image references in the deployment files:

openshift/backend-deployment.yaml
openshift/frontend-deployment.yaml

Storage Configuration

The PostgreSQL StatefulSet uses persistent storage:

Storage Class: ibmc-block-gold (default for IBM Cloud)
Volume Size: 2Gi
Access Mode: ReadWriteOnce

To use a different storage class, edit openshift/postgres-statefulset.yaml:

volumeClaimTemplates:
- metadata:
    name: postgres-data
  spec:
    storageClassName: your-storage-class  # Change this
    accessModes:
    - ReadWriteOnce
    resources:
      requests:
        storage: 2Gi

Application Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Frontend      │────│    Backend      │────│   PostgreSQL    │
│   (React)       │    │   (Node.js)     │    │   StatefulSet   │
│   Deployment    │    │   Deployment    │    │   with PVC      │
│   + Route       │    │   + Service     │    │   + Service     │
└─────────────────┘    └─────────────────┘    └─────────────────┘

Veeam Kasten Integration

The manifests are optimized for Veeam Kasten backup:

Namespace Labels: kasten.io/backup: "true"
Pod Annotations: kasten.io/backup: "true"
PVC Annotations: kasten.io/backup: "true"
Proper Labels: Consistent labeling for easy policy creation

Monitoring & Database Stats

The application includes built-in database monitoring:

Health Endpoint: https://your-route/api/database/health
Summary Endpoint: https://your-route/api/database/summary
Detailed Stats: https://your-route/api/database/details
Frontend Interface: Click "DB Stats" button in the UI

Demo Scenario Commands

# Check application status
oc get pods -n moving-kanban
oc get pvc -n moving-kanban

# View database stats
curl https://your-route/api/database/summary | jq '.'

# Scale frontend for load testing
oc scale deployment frontend --replicas=3 -n moving-kanban

# Simulate database issues (for demo)
oc scale statefulset postgres --replicas=0 -n moving-kanban

# Restore database
oc scale statefulset postgres --replicas=1 -n moving-kanban

Cleanup

To remove the entire application:

cd openshift
./cleanup.sh

Or manually:

oc delete namespace moving-kanban

Troubleshooting

PostgreSQL not starting:

# Check pod logs
oc logs postgres-0 -n moving-kanban

# Check PVC status
oc get pvc -n moving-kanban

Backend connection issues:

# Check backend logs
oc logs deployment/backend -n moving-kanban

# Test database connectivity
oc exec deployment/backend -n moving-kanban -- nc -zv postgres-service 5432

Frontend not loading:

# Check frontend logs
oc logs deployment/frontend -n moving-kanban

# Check route
oc get route -n moving-kanban

Resource Requirements

Component	CPU Request	CPU Limit	Memory Request	Memory Limit
PostgreSQL	250m	500m	256Mi	512Mi
Backend	100m	500m	128Mi	256Mi
Frontend	100m	500m	128Mi	256Mi

Security Features

Secrets for database credentials
Non-root container security contexts
Network policies (optional)
TLS termination at route level
Resource limits and requests

Perfect for production-ready Veeam Kasten demonstrations! 🎯

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
backend		backend
database		database
frontend		frontend
openshift		openshift
.gitignore		.gitignore
README.md		README.md
docker-compose.yml		docker-compose.yml
package.json		package.json

cloud-design-dev/moving-kanban-demo

Folders and files

Latest commit

History

Repository files navigation

Moving Kanban Board

Features

Tech Stack

Quick Start

Prerequisites

Run with Docker Compose

Local Development

Database Schema

API Endpoints

Environment Variables

Backend (.env)

Frontend

Docker Configuration

Veeam Kasten Integration

OpenShift Deployment

Development Notes

Sample Data

🚀 OpenShift Deployment

Prerequisites

Quick Deployment

Manual Deployment

Container Images

Backend Image

Frontend Image

Storage Configuration

Application Architecture

Veeam Kasten Integration

Monitoring & Database Stats

Demo Scenario Commands

Cleanup

Troubleshooting

Resource Requirements

Security Features

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages