ayo/mnswpr
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Play Minesweeper Online for Free https://mnswpr.com
237 commits 1 branch 37 tags 1.2 MiB
JavaScript 87.4%
CSS 9.3%
HTML 3.3%
Find a file
Ayo 832afc1128 chore: add vite build app monorepo script
2026-04-05 15:31:10 +02:00
.github/workflows chore: update release action to not publish to npm 2026-04-03 03:18:06 +02:00
.husky chore: use eslint for linting & formatting 2026-04-02 14:41:52 +02:00
.vscode chore: use eslint for linting & formatting 2026-04-02 14:41:52 +02:00
app feat(app): top links to npm and github 2026-04-03 23:11:28 +02:00
lib chore(lib): move vite config to lib dir 2026-04-04 01:22:04 +02:00
scripts chore: add more stylistic rules & run formatter 2026-04-02 19:39:18 +02:00
utils chore: organize pnpm workspaces 2026-04-03 14:13:11 +02:00
.gitignore refactor: separate app & lib directories 2026-04-03 11:15:18 +02:00
.nvmrc chore: update release gh action 2026-04-03 03:03:08 +02:00
eslint.config.js refactor: separate app & lib directories 2026-04-03 11:15:18 +02:00
LICENSE Create LICENSE 2023-03-10 09:42:58 +01:00
package.json chore: add vite build app monorepo script 2026-04-05 15:31:10 +02:00
pnpm-lock.yaml feat(app): show leaderboard & enable sending result on game done 2026-04-03 14:57:51 +02:00
pnpm-workspace.yaml chore: organize pnpm workspaces 2026-04-03 14:13:11 +02:00
README.md chore: update readme to mention pnpm in tooling section 2026-04-03 14:15:20 +02:00

README.md

Play Minesweeper Online for Free

Netlify Status

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:

  • as a deployed web app
  • as a library with npm i @ayo-run/mnswpr
  • as a web component (coming soon).

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

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:

  1. Install dependencies: pnpm i
  2. 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:

  1. JS is awesome ✨
  2. We don't always necessarily need JS frameworks (or TS) ✨
  3. Even subtle UI changes can improve user gameplay experience ✨
  4. There's more ways to break you're app than you are initially aware of ✨
  5. Competition motivates users to use your app more ✨
  6. Hash in bundled filenames help issues in browser caching (when shipping versions fast) ✨

Just keep building.
A project by Ayo