| .github/workflows | ||
| .husky | ||
| .vscode | ||
| public | ||
| scripts | ||
| src | ||
| .gitignore | ||
| .nvmrc | ||
| eslint.config.js | ||
| index.html | ||
| instructions | ||
| LICENSE | ||
| main.css | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| vite.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
- Firebase for leader board store
- Netlify for hosting
Development tooling:
- Vite for bundling and development server
- Eslint for JS linting & CSS linting
- ESLint Stylistic for JS formatting
- Husky for git hooks
Project motivation
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) ✨
Development
To start development, you need node v16 (the dev server doesn't work on v18 yet). Once you know you have this, you can do the following:
- Install dependencies:
npm i - Start the dev server:
npm run dev
Live Demo
👉 The live site is here: Minesweeper