Web Application

Trello Clone Challenge
Nomadcoders Challenge
[Highlight Project]

1. Introduction

A custom Kanban board built with advanced drag-and-drop (DnD) UX.

This project was created as part of the Nomad Coders React Challenge and demonstrates my ability to design and implement a fully functional Trello-style task board.

Key Features
  • Category & Task CRUD — Create, update, and delete categories (boards) and tasks (cards).
  • Multi-line Support — Titles for both boards and cards span multiple lines.
  • Drag-and-Drop (DnD)
    • Reorder boards and cards with fluid DnD.
    • Self-implemented custom DnD drop position previews for intuitive interactions.
      • useDragScroll.tsx
      • Whenever a category(board)/task(card) is dragged, a drop position preview is displayed.
    • Self-implemented custom DnD auto-scroll to support dragging near container/window edges.
      • Whenever the pointer/cursor is near the edge of the container/window while dragging, the auto-scroll is triggered and automatically scrolls the container/window.
      • I decided to implement it by myself because...
        • 1. The @hello-pangea/dnd & react-beautiful-dnd libraries don't support auto scroll buffer zone and scroll speed for multiple nested scroll containers.
        • 2. The @hello-pangea/dnd & react-beautiful-dnd libraries don't support auto-scroll for multiple nested scroll containers.
  • Fully Responsive
    • Responsive design
    • DnD, drag position preview and auto-scroll are all also available at mobile.
  • Persistence (refresh, reopen)
    • Auto-save whenever change is made (states saved to localStorage automatically on change).
    • Feature for user to manually reset/remove the saved data.
    • Feature for user to manually save the current data.
Known Issue (as of 2025-01-18)
  • Card in board drag scroll (at mobile devices) not working good.
Demonstration
  • Demonstration (Overall)
  • Demonstration (Complement)

2. Techs

  • Language / Script

  • Library

  • IDE

  • VCS

  • Compiler / Transpiler / Bundler / Build Tool

  • Linter / Formatter

  • Package Manager / Dependency Manager

  • Deployment / Process Management / Containerization

  • Etc.

3. Screenshots

© 2025 hansf14. All Rights Reserved.