I Built the Cleanest Tier List App in React — Fully Explained

In this video I build a clean, fully functional Tier List App in React from scratch — no templates, no shortcuts. We cover drag and drop using dnd-kit, React's most popular drag and drop library. You'll learn how to create Draggables, Droppables, SortableContexts, DragOver/DragEnd events, and more! This isn’t just a UI demo — it’s a real-world React build with practical patterns you can reuse in your own projects. Whether you’re learning React, improving your frontend architecture, or want to see how a polished drag-and-drop interface is built step by step, this video walks through the entire process and explains why each decision is made. Resources 📕 Source code: https://github.com/AustinDavisTech/Ti... Dnd-kit docs: https://docs.dndkit.com/ Jotai Tutorial:    • State Management in React Will Never Be th...   Also, shoutout to Clash Royale as I am using their Cards for this list :) Timestamps: 0:00 - Intro 0:53 - Setup 3:18 - Visual Breakdown 5:18 - Draggables 15:36 - Droppables 20:04 - Drag Events 30:16 - Sorting 40:50 - DragOverlay 57:54 - Animations (DragOver) 1:03:45 - Outside/Inside 1:11:13 - Empty Space Drop 1:18:57 - Multiple Zones 1:47:36 - Sorting between zones 1:58:39 - Multiple Zones 1:59:59 - Polish