How to Build a PWA Game with Preact in Five Steps

This tutorial walks you through building a progressive web app (PWA) game with Preact, starting from functional requirements and ending with deployment.

1. Requirements – The game must use a 4 × 3 grid, hide emojis on the back of cards, support matching logic, score up to six pairs, work over HTTPS, be responsive, installable, offline‑capable, fast to load, and have unique URLs for each page.

2. Design – Simple wireframes are shown for the homepage (title + start button), the game page (grid + score), and the winning page (celebration message + restart button).

3. Bootstrap with preact‑cli – Install globally with npm i -g preact-cli and create the project using preact create match-game . The generated structure includes assets , components , index.js , manifest.json , routes , and style directories.

4. Set up routes – Three routes are defined: / (home), /game (game board), and /win (winning screen). The routing configuration is added to the main App component.

5. Build pages – Global styles are added in styles/index.css using the "Press Start 2P" font. The homepage contains a title and a button linking to /game . The winning page mirrors the homepage but shows a congratulatory message.

Card component – A reusable card component receives hidden , flipStatus (DEFAULT, FLIPPED, MATCHED), and an onClick handler. The front shows a question mark, the back shows the emoji, and CSS flip animation is applied.

Game logic – On each start the deck is shuffled by duplicating the emoji list, randomising, and assigning unique keys. State tracks flippedCards , isMatched , and score . Clicking cards updates state, checks for matches, flips back mismatched cards, and after a short delay marks matches, increments the score, and navigates to the win page when the maximum score is reached.

Final touches – Icons for Android and iOS are generated from the card component screenshot and placed in assets/icons . The src/index.html template is modified to include an apple-touch-icon link. Build scripts are updated in package.json :

{ "scripts": { "build": "preact build --template src/index.html", "serve": "npm run build && preact serve" } }

The src/manifest.json is edited to reference the Android icons and game title.

Build and deployment – Run npm run build to produce a /build folder ready for hosting. The tutorial confirms the app passes Google Lighthouse checks for PWA criteria, with only minor SEO improvements suggested.