- One of my personal digital nomad life projects (for practice).
- Project current status: [complete]☑️
- Tech
- Features
- Category CRUD
- Task CRUD
- Supports multi-line category
- Supports multi-line task
- Category(board) position manipulation via DnD
- Task(card) position manipulation via DnD
- Persistency (refresh, reopen)
- Auto-save whenever change is made
- Able to manually reset/remove the saved data
- Able to manually save the current data
- Self-implemented DnD drop position preview
- cf> useDragScroll.tsx
- Whenever a category(board)/task(card) is dragged, a drop position preview is displayed.
- Self-implemented DnD auto-scroll
- cf> useDragPositionPreview.ts
- Whenever the pointer/cursor is near the edge of the container/window while dragging, the auto-scroll is triggered and 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 scroll containers.
- 2. The @hello-pangea/dnd & react-beautiful-dnd libraries don't support auto-scroll for nested scroll containers.
- Mobile support
- Responsive design
- DnD, drag position preview and auto-scroll are all also available at mobile.
- Other many little functionalities for better UX
- Edit: Known bugs (2025.01.18 ~)
- Card in board drag scroll (at mobile devices) not working good.
- Demo: React Practice Trello Clone Challenge
- Preview Screenshots
