Ever built a drag-and-drop UI with just the native browser API? No react-beautiful-dnd, no dnd-kit — just dragStart, dragOver, and drop events. In this challenge, you'll build a Tier List app where users upload images and rank them A through F by dragging, mastering the HTML5 Drag and Drop API along the way.
🧩 Overview
Build a tier maker app where users upload images and drag them into ranked tiers (A through F) — practicing HTML5 Drag and Drop and file uploads in React.
✅ Requirements
- Render a "Tier List" title at the top of the page
- Render six tier rows labeled A, B, C, D, E, F with the correct background colors
- Include two action buttons: Add (file picker) and Reset (moves all images back)
- Provide a selector area at the bottom where unassigned images appear
- Start with an empty selector and empty tier rows
- File upload: selecting images via file picker adds them to the selector; dragging files from desktop onto the selector also works
- Drag and drop: drag images from selector to tiers, between tiers, and back to the selector
- Highlight the drop zone while dragging over it
- Reset moves all images from tier rows back into the selector area
If you've never worked with the native Drag and Drop API before, this is the perfect challenge to get comfortable with it. You'll walk away knowing how to handle file uploads, drag events, and complex UI state — all inside a custom hook.
Top comments (0)