Tahaluf Al Emarat Technical Solutions
June 2024

Trello-style Kanban Board (Internal Training Project)

Expertise

Full-Stack Web, Product Engineering, UI/UX

Platforms

Web (Desktop & Mobile)

Deliverables

  • Working Prototype

Links

View on LinkedIn
Trello-style Kanban Board (Internal Training Project)

Project Overview

This internal training project at Tahaluf Al Emarat delivers a Trello-style kanban app with a focus on clean architecture and a smooth user experience. The frontend uses React + Next.js with TypeScript for strong typing and early error detection, and Zustand for minimal, predictable state management.

An OpenAI API assistant speeds up writing card descriptions and initial acceptance criteria, while natural drag & drop keeps task organization effortless. Appwrite Cloud provides authentication, data, and realtime subscriptions for instant updates across clients.

Unity 6 Overview

Execution

Architecture & Engineering

  • Clear separation between domain models (Board/List/Card) and the UI, with scoped Zustand store slices (auth/boards/ui).
  • Straightforward Next.js routing (/boards/:id) using dynamic segments and optimistic UI for create/move actions.
  • TypeScript strict mode and a type-safe API layer to reduce interface mismatches between client and server.

UX & Interaction

  • Fluid drag & drop (dnd library) with stable ordering and no index jitter.
  • Keyboard shortcuts for frequent actions (new card, move up/down) plus human-readable toasts and error messages.
  • Real responsive design: horizontal boards on desktop, stacked columns on mobile.

State & Data

  • Zustand with compact slices to simplify testing and traceability.
  • Appwrite for auth and CRUD on boards/lists/cards, with Realtime channels for live updates.
  • Optional SWR/React Query for caching and revalidation without added complexity.

AI Assistant (OpenAI)

  • “Generate description” fills an initial card summary and checklist.
  • Concise prompt design targeting useful, bounded outputs with basic error handling.

Quality & Performance

  • Code-splitting and lazy loading for heavier components.
  • Unified error handling (network/validation) with resilient fallback UI.
  • Local Lighthouse runs and bundle hygiene to keep payloads lean.

Results

Measurable outcomes (replace placeholders after measurement):

  • Experience & performance: LCP ≈ 1.8s on Fast 4G · Performance Score 94/100.
  • JavaScript size: JS payload ↓ 32% via code-splitting and package cleanup.
  • Interaction latency: p95 action latency ≈ 120ms for create/move card operations (dev/preview).
  • Stability: Crash-free sessions 99.9% on the latest test round.
  • Authoring efficiency: AI-assisted descriptions cut manual entry time by ~ 40%.

Before → After (snapshot)

Before: heavy initial load and broad re-renders on drag. After: virtualized lists + memoization ⇒ re-renders ↓ 55% under high-density boards.