🧩 Maze Solver Visualizer

A modern, interactive maze generator and pathfinding visualizer built with HTML, TailwindCSS, and Vanilla JavaScript, powered by a lightweight Node/Express backend. Explore classic algorithms with smooth animations, a glassmorphism UI, and a live complexity panel.

---

✨ Features

• Dynamic Maze Generation: Fresh maze on demand from a Node/Express API.
• Algorithms Included:
  • Depth First Search (DFS)
  • Breadth First Search (BFS)
  • Dijkstra’s Algorithm
  • A* Search (A-star)
  • Greedy Best-First Search
• Live Complexity Panel: Displays time/space complexity metadata and path results.
• Animated Solving: Cell-by-cell visualization with adjustable animation speed (slider + ½x / 2x buttons).
• Polished UI:
  • Glassmorphism panels, glowing accents, animated gradients
  • Terminal-style loader and status messages
  • Responsive layout for desktop and mobile
• User Controls:
  • Generate maze
  • Choose algorithm
  • Solve maze
  • Tune animation delay in real time

---

🛠️ Tech Stack

• Frontend: HTML5, TailwindCSS (CDN), CSS animations
• Logic: Vanilla JavaScript (ES6+)
• Backend: Node.js + Express (maze generation API), CORS enabled

---

📂 Project Structure

BhulBhulaya/
├── backend/
│   ├── server.js          # Express server: GET /maze
│   ├── mazeGenerator.js   # Maze generation + random start/goal
│   ├── package.json       # Scripts and deps
│   └── node_modules/      # Installed dependencies
└── frontend/
    ├── index.html         # UI layout, loader, panels, controls
    ├── maze.js            # Fetch + render maze, animations, UI events
    ├── algorithms.js      # Algorithm metadata & panel updates
    ├── utils.js           # Helper utilities
    ├── style.css          # Custom styles (glassy effects, accents)
    ├── logo.png           # Branding asset
    ├── titlelogo.png      # Favicon/title image
    ├── cheese.webp        # Goal icon
    └── rat.jpg            # Start icon

---

🚀 Getting Started (Local)

Prerequisites

• Node.js 18+

1) Start the backend

cd backend
npm install
npm start
# Server runs at http://localhost:3001

2) Open the frontend

Option A — open frontend/index.html directly in your browser.

Option B — serve the folder (recommended for consistency):

# from project root
npx serve frontend
# or
npx http-server frontend -p 5173

The frontend fetches a maze from http://localhost:3001/maze?size=25 by default (see frontend/maze.js).

---

🎮 How to Use

1. Start the backend server.
2. Open the frontend in your browser.
3. Click Generate Maze to get a new maze with random start (rat) and goal (cheese).
4. Choose an algorithm from the dropdown.
5. Click Solve Maze to visualize the pathfinding.
6. Adjust the animation speed using the slider or the ½x / 2x buttons.
7. Watch the complexity panel update rating, complexity, and path length.

---

⚙️ Configuration

• Maze size: Set via query param in the fetch, e.g. ?size=25 in frontend/maze.js.
• Animation speed: Default 80ms. Adjust live via the UI.
• CORS: Enabled server-side (cors() in backend/server.js) for local development.

---

🔮 Future Improvements

• Weighted cells and diagonal movement options
• Heuristic selection for A* (Manhattan, Euclidean, etc.)
• Step-by-step debug mode (pause/resume, frame advance)
• Export/import mazes and solutions
• Sound effects and enhanced animations (GSAP)
• Optional serverless API variant under /api/maze (same logic)

---

📜 License

This project is licensed under the MIT License — free to use, modify, and distribute.

---

🙌 Acknowledgements

• Inspiration: classic pathfinding visualizers and maze generation techniques
• UI/UX: Glassmorphism patterns and modern gradient design

---

💡 Built with care using HTML + Tailwind + JavaScript + Node/Express