EDH Swipe

Overview

I created this project to make finding commanders for new EDH decks less overwhelming. Instead of scrolling through endless lists, you’re presented with one card at a time and make a quick decision. You can then look at this list later to help you figure out what commander you want to build out next.

Tech Stack

Category	Technologies
Frontend	React, TypeScript, GSAP
Data	Scryfall REST API
Storage	Browser Local Storage

Key Features

Feature	Details
Card Discovery	One commander at a time, yes/no decision, auto-progression, Scryfall card images
Saved Collection	View saved commanders, remove cards, persistent across sessions, EDHRec links

Development Journey

This was a focused project to practice working with external APIs and managing simple state. Also practiced using GSAP animations for the card swiping feature. The main challenges were:

API Integration: Learning to work with Scryfall’s REST API and understanding their data structure
State Management: Keeping track of seen cards and saved commanders
Local Storage: Persisting the collection without a backend
GSAP Animations: Learning to use the useGSAP hook, as well as how Draggable works

What I Learned

Working with External APIs

I learned how to read API documentation, handle JSON responses, and structure my code to work with external data sources — including the importance of having fallbacks for when an external API doesn’t include what you expected.

GSAP Animations

I learned how to interact with the GSAP framework to add animations while using their Draggable abstraction to implement the card swiping feature. Using GSAP saved a lot of time finishing up the project.

Simple State Management

Managing which cards have been seen and which are saved taught me practical state management patterns. Local storage provided a straightforward way to persist data without needing a backend.

Future Enhancements

Export saved commanders as a shareable list
User accounts to persist sessions across devices