Minesweeper – Old school game with Next.JS

A simple implementation of the classic Minesweeper game built with Next.js. This project showcases the use of React components and modern front-end development techniques. Players can enjoy the Minesweeper game experience directly in their browser, with a clean and responsive UI.

📌 Project Overview

Minesweeper is a web-based implementation of the classic puzzle game, built with Next.js 15. It features modern UI elements, customizable settings, and responsive design. Players can enjoy the classic Minesweeper experience with added features like custom themes, multiple languages, and various visual customization options.

⚡ Key Points to Know

• 🎮 Classic Gameplay - Traditional Minesweeper mechanics with modern features
• 🌙 Dark/Light Mode - Full theme support with automatic system detection
• 🌍 Multi-Language - Supports English, Thai, Japanese, Vietnamese, and Chinese (can add more)
• 📱 Responsive Design - Playable on all devices from mobile to desktop
• 🎨 Customizable UI - Various options for icons, numbers, and game elements (can add more)
• 💾 No Backend - Client-side only with state management

🔥 Features

• 🎯 Multiple Difficulty Levels - Easy (9x9), Medium (16x16) and Hard (16x30)
• 🎨 Customizable Elements (can add more)
  • Different flag icons (Default, Pyramid, Radar, Sparkles, Sigma)
  • Various mine icons (Bomb, Skull, Fire, Flame, Ghost)
  • Multiple number styles (Default, Roman, Thai, ABC, Question)
• 🌍 Language Support - Available in multiple languages (can add more)
• 🎨 Theme Options - Dark and light mode with system preference detection
• 📊 Score System - Time-based scoring with difficulty multipliers
• 📱 Mobile Support - Touch-friendly interface with flag mode toggle

🛠️ Tech Stack

• Next.js 15 – Framework for static site generation.
• TailwindCSS 4 – Utility-first CSS framework for styling.
• TypeScript – Strongly typed JavaScript for better maintainability.
• shadcn/ui – Reusable UI components
• Magic UI – Reusable UI components
• Lucide Icons – Modern icon set
• next-themes – Theme management

🚀 Live Demo

Try it here: Minesweeper

📂 Installation & Setup

To run this project locally, follow these steps:

1. Clone the repository

git clone https://github.com/guysuvijak/nextjs-minesweeper-game.git

cd nextjs-minesweeper-game

2. Install dependencies

npm install
or
bun install
or
pnpm install

3. Start the development server

npm run dev
or
bun run dev
or
pnpm run dev

4. The app will be available

http://localhost:3000

5. Export to cross-platform

npm run tauri
or
bun run tauri
or
pnpm run tauri

note: If you want to Export Cross-platform, please follow setup before Here

🗺️ Project Structure

nextjs-minesweeper-game/
├── public/              # Static assets
│   ├── cursor/          # Static Cursor Image
│   ├── icon/            # Website Icon
│   ├── metadata/        # Static Metadata & README Image
│   └── manifest.json    # Config Metadata (PWA)
└── src/
    ├── app/             # layout & page Next.JS
    │   └── page.tsx     # Main Page
    ├── components/      # React components
    │   ├── magicui/     # UI from Magic-UI
    │   ├── ui/          # UI from shadcn/ui
    │   ├── CustomDock.tsx      # Menu Dock in Mainmenu
    │   ├── GameResultModal.tsx # Modal Result in Game Screen
    │   ├── MainMenu.tsx        # Mainmenu Screen
    │   ├── Minesweeper.tsx     # Game Screen
    │   ├── SettingsModal.tsx   # Modal Settings in Mainmenu
    │   └── Timer.tsx           # Timer in Game Screen
    ├── configs/         # Configs File (Edit Here)
    ├── hooks/           # React Custom Hooks
    ├── lib/             # Auto Create from Library
    ├── locales/         # Language Files
    └── types/           # TypeScript File

📄 Modifying the Website

Since this is a static website, all modifications must be made directly within the project files. Here’s where you can edit specific parts of the site:

⚙️ Game Configuration
📍 File: src/configs/game.tsx
Add or modify game settings like difficulty levels, scoring, and colors.

🎨 UI Settings
📍 File: src/configs/settings.ts
Configure available options for icons, themes, and number styles.

🌍 Language Files
📍 Folder: src/locales/
📍 File: src/configs/language.ts
Add or modify translations for different languages.

🖼️ Custom Cursors
📍 Folder: public/cursor/
Add or modify custom cursor images.

⚙️ Types Definition
📍 File: src/types/index.ts
Modify TypeScript types and interfaces.

⚙️ Website Configuration
📍 Files:
src/configs/metadata.ts – Modify general layout and metadata settings.
public/manifest.json – Update website metadata for PWA settings.

📜 License

This project is open-source under the MIT License. Let me know if you need any modifications! 🚀

🙏 Acknowledgments

Thank you for your interest in Minesweeper from me! Your support means a lot. ❤️
⭐ If you like this project, please consider giving it a star on GitHub to show your support and encouragement! 🚀