Davis Patterson
Web Developer & Designer
I build
pixel-perfect
digital experiences.
Salt Quiz
Salt Quiz is a dynamic, front-end web application built with TypeScript and React, designed to challenge users' knowledge of Magic: The Gathering through an interactive ranking quiz. Inspired by CovertGoBlue's CovertGoSalt series, the app leverages the Scryfall API for card data and images, featuring EDHREC's 2024 Top 100 Salty Cards list. Users test their expertise by guessing the rank of randomly selected cards within a customizable range (1–100), with accuracy measured by the absolute difference between their guess and the card's actual rank. Salt Quiz features a clean, responsive interface, delivering a polished, intuitive user experience while showcasing modern front-end development practices.
- Built with TypeScript and React, emphasizing type-safe code and efficient state management for a seamless front-end-only experience.
- Integrated Scryfall API for card data and images, ensuring access to accurate MTG card information.
- Generates 10 random cards per quiz from a user-selected range (1–100), with scoring based on absolute difference for precision tracking.
- Allows users to exclude known cards from the quiz pool, tailoring the challenge to focus on unfamiliar rankings.
- Features a responsive, intuitive interface optimized for both desktop and mobile, prioritizing clarity and ease of interaction.
The quiz menu provides an overview of gameplay mechanics, enabling users to customize their quiz length and filter out pre-known cards for a tailored experience.