MTG Binder

A premium web application that displays Magic: The Gathering cards in a curated "Digital Vault" experience.

Features

• The Premium Collector's Digital Vault: A high-end editorial archive aesthetic with a Noir-inspired color palette.
• Responsive 3x3 Grid: Displays 9 random MTG cards utilizing Scryfall's high-quality art crops.
• Atmospheric Depth: Interactive modal views with Glassmorphism and Backdrop Blur effects.
• Clean Typography: Combines the geometric authority of Manrope for headlines with the technical precision of Inter for card data.

Prerequisites

• Node.js (v14 or higher)
• npm (Node Package Manager)

Getting Started

1. Install dependencies

   npm install
   

2. Start the server

   npm start
   

3. Open in browser

   • Visit http://localhost:3000

API & Configuration

This app uses the Scryfall API to fetch card data. Scryfall is free to use and does not require an API key for basic usage.

Project Structure

mtg-binder/
├── public/
│   ├── css/
│   │   └── styles.css       # Noir-palette & Glassmorphism styling
│   └── js/
│       └── card-modal.js    # Modal logic & Scryfall integration
├── routes/
│   └── index.js             # Route handlers (currently stubbed)
├── views/
│   └── home.ejs             # Main EJS template (3x3 grid)
├── package.json             # Scripts & dependencies
└── server.js                # Core Express application

Credits

• Card Data: Scryfall API
• Design System: "The Premium Collector’s Digital Vault"
• Fonts: Manrope & Inter