A collection of classic browser games built to learn the React ecosystem hands-on — reading docs, following best practices, and figuring things out from scratch.
🔗 Live Demo: react-arcade.noahparknguyen.workers.dev
React Arcade started as a learning exercise — real experience with React 19 and React Router v7 through actual time spent reading documentation and making decisions, not following tutorials. Building games I already understood meant I could focus on the stack rather than the problem space.
The games are Wordle (with hard mode) and Minesweeper. All game logic lives in pure TypeScript functions in app/lib/ — kept separate from the React components so the logic is easy to reason about and test in isolation. Vitest covers the edge cases: Wordle's duplicate letter handling in particular is trickier than it looks. A CI pipeline runs tests, type checking, and a production build on every push to main.
| Game | Status |
|---|---|
| Wordle | Live |
| Minesweeper | Live |
Prerequisites: Node.js v22+, npm
git clone https://github.com/SerenePrince/react-arcade.git
cd react-arcade
npm install
npm run devOpen http://localhost:5173 in your browser.
npm testTests cover the core game logic for Wordle and Minesweeper using Vitest.
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| React Router v7 | Routing and SSR |
| Tailwind CSS v4 | Styling |
| TypeScript | Type safety |
| Cloudflare Workers | Hosting |
MIT © Noah Park-Nguyen