EDH Swipe
A simple Tinder-style interface for discovering Magic: The Gathering commanders. Click yes to save commanders you like, click no to see the next one, and view your saved collection in a separate tab.
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