TierList Editor – Full-Stack Custom Tier List Builder

Date: Oct 2025 – Nov 2025

TierList Editor is a full-stack application that lets users create, save, and edit fully customizable tier lists. It supports drag-and-drop card sorting, image uploads, midpoint-based ghost previews, inline editing, and full CRUD on lists, tiers, and items.

🚀 Tech Stack

React (TypeScript, Vite) + Tailwind CSS
Node.js + Express + Prisma ORM
PostgreSQL Database
JWT-based authentication with session persistence

The screenshots below illustrate the full workflow of adding a new entry to a tier list themed “Most Dangerous Animals.” They highlight the Add Card interface, the unsorted zone, the drag-and-drop midpoint ghost logic, and the final tier placement before saving.

📸 Screenshots

Initial Add Card form before entering a title or pasting an image.

Add card form after typing and pasting image

Add Card form after typing a name and pasting an image directly using Ctrl+V.

After pressing “Add Card,” the card appears in the Unsorted zone, ready to be placed into a tier.

Ghost preview showing insertion before a card

Dragging a card over another triggers a ghost preview that appears before the target card when the cursor is left of its midpoint.

Ghost preview showing insertion after a card

Dragging with the cursor right of the target card’s midpoint causes the ghost to appear after the card.

Hovering over empty space places the ghost preview at the end of the tier row, demonstrating flexible insertion behavior.

I decided to put the card to the left of the Grizzly Bear. After releasing the card, it appears in the correct position within the tier. The user can then save the tier list to persist it in the backend.

📌 Outcome

The final product is a polished, flexible tier list editor with full CRUD functionality, a midpoint-based drag-and-drop algorithm, inline editing, and image uploads via direct paste. It serves as a showcase of frontend interactivity, backend API design, and end-to-end state synchronization.

⚙️ Development Highlights

Drag-and-Drop Engine: Built a custom ghost preview system using midpoint math and DOM bounding boxes to determine insertion before or after a card.
Image Paste Handling: Users can paste images directly into a drop zone, converting clipboard files into object URLs. Perfect for quick tier list creation.
Inline Editing: Tier names, card names, and titles are contentEditable, enabling smooth and intuitive updates without modal interruptions.
Two-Way Sync: Saving pushes all state (tiers, items, orderings, deletions) to the backend, while loading regenerates the editor state exactly.
Full CRUD: Users can add, rename, or delete tiers and cards, reorder tiers, clear tiers, and manage multiple saved tierlists tied to their account.
Authentication: JWT-based login system ensures users can access their own collections securely.

⬅ Back to Portfolio Home