Deck of Cards

GamesLive

Overview

Deck of Cards is a small card interaction project built for an Audi interview task. It was created with Gatsby, React, and TypeScript, and focuses on working with a deck of playing cards in a simple browser interface.

Card interaction flow

The app displays a deck of cards that can be shuffled, selected, and moved into a separate selected area. Once cards are selected, they can be sorted high-to-low or low-to-high using the project rules: suits are ordered Clubs, Spades, Hearts, Diamonds, and Ace is treated as high.

Interview task focus

Because this was built for an interview, the important part was not the size of the app, but the implementation details: clean component structure, state handling, sorting logic, click interactions, loading/error states, and a working deployed demo.

Built with Gatsby and React

The project uses Gatsby with React and TypeScript, plus SCSS for styling and Jest setup for testing. It is a compact project, but it shows practical frontend logic around data, UI state, and user interaction rather than just a static page.

Deck of Cards screenshot

Tech stack

react-img
typescript-img
html5-img
css3-img
sass-img