|
|
||
|---|---|---|
| .github/workflows | ||
| .husky | ||
| .vscode | ||
| app | ||
| lib | ||
| scripts | ||
| test | ||
| utils | ||
| .gitignore | ||
| .nvmrc | ||
| AGENTS.md | ||
| eslint.config.js | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| vitest.config.js | ||
Play Minesweeper Online for Free
Play it here: mnswpr.com. This is the classic game Minesweeper built with vanilla web technologies (i.e., no framework dependency).
Technology Stack: HTML, JS, and CSS; Google Firebase for leader board store; Netlify for hosting
Usage
The web is a wonderful, free, and open platform to create and distribute value. You can use mnswpr in different ways:
Tooling
The project has gone through years of existence. It started from 2019 when tooling was massively different. I have modernized it since and have witnessed how much easier and faster it is to build now - even without web frameworks or LLMs!
As of now the tooling I use are:
- Vite for bundling and development server
- Eslint for JS linting & CSS linting
- ESLint Stylistic for JS formatting
- Husky for git hooks
- PNPM for dependency & workspace management
- and a bunch of automation using scripts and Continuous Integration actions
Because a big part of this project's purpose is to track how the software development industry evolves — and because it has come a long way in modernizing along the way — I now also use it as a playground for coding agents. It's a small, framework-free, well-scoped codebase, which makes it a great sandbox to see how AI agents read, reason about, and change real code. To help them get their bearings quickly, the repo ships an AGENTS.md describing the architecture and conventions.
Development
To start development, you need node. I highly recommend pnpm to be used as well. Once you know you have this, you can do the following:
- Install dependencies:
pnpm i - Start the dev server:
pnpm run dev
You just want to play?
👉 The live site is here: mnswpr.com
Background
One day, while working in my home office, I heard loud and fast mouse clicks coming from our bedroom. It's my wife, playing her favorite game (Minesweeper) on a crappy website full of advertisements.
I can't allow this, it's a security issue. 🤣
But it is also an opportunity.
I wanted to give her the same game, with a similar leader board she can dominate. And this is also a chance for me to dig deeper into vanilla JS.
Can I make a page with complex interactions (more on this later) without any library dependency?
What I have learned:
- JS is awesome ✨
- We don't always necessarily need JS frameworks (or TS) ✨
- Even subtle UI changes can improve user gameplay experience ✨
- There's more ways to break you're app than you are initially aware of ✨
- Competition motivates users to use your app more ✨
- Hash in bundled filenames help issues in browser caching (when shipping versions fast) ✨
Just keep building.
A project by Ayo