About This Project

This application is a frontend client built to consume the tcg-rest-api. It demonstrates how a modern web interface can interact with a RESTful backend to simulate a trading card game experience. It extends the backend by adding features - for example, dynamic card images.

The tcg-rest-api express backend is entirely standalone and can be self-hosted.

All game logic, including pack opening, battles, and user progression, is handled through API requests, while this frontend manages rendering, state, and interaction flow.

Built using Next.js, focusing on component architecture, server/client separation, and API-driven UI design.

Card Design

The cards are themed around common technology and programming concepts, adapted into a trading card game format.

Rarities are based on data storage prefixes, progressing from smaller units such as kilo and mega through to higher-tier rarities like peta and exa.

Types are inspired by technology-related terms that also have real-world meanings, such as bug, tree, cloud, and shell. These dual meanings help create a recognisable type system while retaining a technical theme.

Card names are derived from the placeholder and metasyntactic variables commonly used in programming examples, including foo, bar, baz, and others.

Together, these conventions create a game world that is intentionally inspired by software development, computer science, and internet culture.

For full backend implementation details, refer to the repository: