Minesweeper (React)

By Sanchezdev.com

🖥️ Live Demo → minesweeper.sanchezdev.com

Table of Contents

1. Features
2. Prerequisites
3. Installation
4. Development & Editing
5. Building for Production
6. Project Structure
7. Deployment
8. License

Features

• Classic Minesweeper gameplay
• Three difficulty levels: Beginner, Intermediate, Expert
• Responsive design (desktop & mobile)
• Timer & flag counter
• Smooth CSS animations

Prerequisites

• Node.js v14 or higher
• npm (comes with Node.js) or Yarn

Installation

1. Clone the repo

   git clone https://github.com/yourusername/minesweeper-react.git
   cd minesweeper-react
   

2. Install dependencies

   npm install
   # or
   yarn install
   

Development & Editing

• Start the development server

  npm run dev
  # or
  yarn dev
  

  Opens at http://localhost:3000.

• Edit source code

  • Components in src/components/
  • Styles in src/index.css (Tailwind + custom CSS)
  • Config in tailwind.config.js & vite.config.js

• Hot Reloading updates the browser instantly on save.

Building for Production

npm run build
# or
yarn build

• Generates an optimized dist/ folder.
• Preview locally:

  npm run preview
  # or
  yarn preview
  

Project Structure

/
├─ public/             # Static assets & index.html
├─ src/
│  ├─ components/      # React components
│  ├─ index.css        # Global styles
│  ├─ main.jsx         # App entry point
│  └─ App.jsx          # Root component
├─ tailwind.config.js  # TailwindCSS config
├─ vite.config.js      # Vite build config
├─ package.json
└─ README.md

Deployment

1. Run npm run build.
2. Upload dist/ to your server’s public_html.
3. Point your domain (e.g. minesweeper.sanchezdev.com) to that folder.

License

This project is licensed under the MIT License.