Chaotic Cafe – Website & Card Editor

A presentation website and content-authoring tool

For Chaotic Cafe, I built the presentation website and a separate browser-based card editor. The website introduces the game and its modes; the editor serves teachers and players who want to prepare their own accounting situations.

Card authoring with an immediate preview

The editor lets users create and modify game cards, their content, amounts, account groups and individual entries. It includes a live card preview, accounting templates and a double-entry balance check that highlights missing corresponding entries.

Mapping connections and trying scenarios

Cards can be connected in a visual map: link a player's choice to the next card or schedule a follow-up after several turns. A simulator lets authors step through a sequence and check how it plays before using it in the game.

From the editor to game content

The library helps manage custom cards, while work in progress is saved in the browser. Finished content can be imported and exported as a .ccpack package that the game can also load, allowing authors to create exercises suited to their lessons.

Web technologies

The presentation website uses Next.js, React, TypeScript, Tailwind CSS and PostgreSQL, with tools for content administration. The editor is a separate React and TypeScript application built with Vite; its card map uses React Flow. I use Docker for deployment.

The related game project

I present the Unity development, game modes and multiplayer separately in Chaotic Cafe – Accounting Game.