Green and Orange Day Glow Maze! 12 based rodent, mice rat maze - bases act as either ceiling or flooring! Make a T-Maze, Box Maze a Vertical Maze, a horizontal maze, all with the same parts! Modular Rat Maze 2x2x2. Add more kits to make a larger maze! Watch 25 trials of a rat from this treament group. How do hormones, like estrogens, affect learning and the formation of memories? Students use this simulation with videos from a real laboratory to test how rats perform in a maze test.
Objective
Create a simple web application using React that implements a novel way to visualize the famous Rat in a Maze Problem which can be solved using backtracking.
Your rat starts out in the upper left corner lead him to the lower right corner. Use the mouse to click on the maze and leave the cheese. Lead the rat out of the rat maze game before you run out of cheese and time. Enjoy rat maze game at The PCman's fun, free games arcade. A function to find the rat in the maze. You will need the starting (row, col) of the rat in order to call solvemaze for the first time. An alternate way to do this is to find the rat while reading in the lines from the file. The solvemaze function that will be called recursively.
Project Context
The Rat in a maze is a famous problem in which we have a N x N matrix (the maze) which consists of two types of cells - one therat can pass through and the other that the rat cannot pass through.
The objective of this probleem is that the rat will be at a particular cell and we have to find all the possible paths that the rat can take to reach the destination cell from the given source cell.

Now you will be building a simple react application that will visualize all the possible paths on the web page.
While building this simple react app you will learn ES6 Javascript techniques, how to create react components and apply the Data Structures' and Algorithms' concepts such as Recursion and Backtracking.
Project Stages
High-Level Approach
- Install and Setup React on your machine
- Create React Components such as
Maze.js
andCell.js
for the project. These components will be simple functional components - Implement an algorithm for the Rat in a Maze problem using Backtracking
- Finally, run the application to visualise the Rat in a Maze problem.
Project demo -
Objective
Create a simple web application using React that implements a novel way to visualize the famous Rat in a Maze Problem which can be solved using backtracking.
Project Context
The Rat in a maze is a famous problem in which we have a N x N matrix (the maze) which consists of two types of cells - one therat can pass through and the other that the rat cannot pass through.
The objective of this probleem is that the rat will be at a particular cell and we have to find all the possible paths that the rat can take to reach the destination cell from the given source cell.
Now you will be building a simple react application that will visualize all the possible paths on the web page.
While building this simple react app you will learn ES6 Javascript techniques, how to create react components and apply the Data Structures' and Algorithms' concepts such as Recursion and Backtracking.
Project Stages
High-Level Approach
- Install and Setup React on your machine
- Create React Components such as
Maze.js
andCell.js
for the project. These components will be simple functional components - Implement an algorithm for the Rat in a Maze problem using Backtracking
- Finally, run the application to visualise the Rat in a Maze problem.
Project demo -
Getting Started
First validate the idea by doing a low level implementation (Proof of Concept) of the components involved in the project.This helps you to -
- Get more clarity around the unknowns.
- Get a better understanding of the stages involved in the project.
Explore various aspects of the terms mentioned in the preceding sections and also understand the preference to use React over Angular or Vue, all possible ways to solve the Rat in a Maze problem and challenge yourself by implemeting other algorithmic problems in a simlar illustrative method.
This task includes the setup you may follow to get started with this project.
Requirements
- Ideally, this is a React app. So start by creating one and keep only the relevant files needed for the project (all essential files are shown below).
- Install necessary dependency packages (you may refer and use the ones recommended below) using npm (or yarn). Research what each of the following packages/libraries are responsible for.
Search for React dev tools in Chrome extensions and add them for your own testing purpose.
Use react developer tools throughout the project to debug your code better. If new to it refer this to understand how to use it. Also check this out!
References
- Quick tutorial for React, want a lighter tutorial?
- Why use React? and not angular,vue
Tip
- To run the react application simply type
npm start
in the terminal and you will get a live server started (on localhost). Explore about this here
Bring it On!
- Challenge yourself by using yarn instead of npm
Create the site’s main layout
In this task the basic structure of the web application is built (excluding the core functionality) using mainly React alongside HTML, CSS (optional).
Requirements
- Visualise how the maze can be made on a blank canvas. We will have the main maze as one part (that will have the logic) and its cells as the other part that needs to be organised to create the maze.
- Create the two component of the app i.e. the maze and the cell.
- Create a custom component called
Maze
(preferably) which will be used render cells as containers.
- To render a cell within a maze another component must be used.
Note
Rat Maze Ideas
- The red cells (obstacles) are randomly generated i.e. you have full liberty of choosing which all blocks they should be from the N*N maze grid. However, for a particaular case the obstacles should be fixed and only change in the next case run.
- Use
cell.js
file to create components for the cells. - Use
maze.js
file to create the components for the maze and inside it itself implement the algorithm (else create another file and import the functions, which may cause unnecessary cluttering ).
Expected Outcome
Implement the core functionalities
Implement the the core functionality of the problem's solution into the app, i.e. bascially finding the paths.Here the paths will be from top left to bottom right for a maze with obstacles.
The constraints of the problem are :
- Rat can't go outside the maze
- Rat can't pass through the red cell (obstacle)
- Rat can go only 1 step (up, down, right, left) at a time.
Rat Maze 2
Requirements
- We need a
calculatePath
function to calculate all the paths from top left to bottom right cell of the maze. This function is solely responsible for the compututaion of the paths. - We need a
loadCells
function to load all cells of the maze. This function will be responsible for assigning the cells' its roles. - The main function to be exported from
maze.js
will be used for the visualisation. So inside this main function (say functionMaze()
) you should be assigning the obstacle cells it's boolean value (i.e. 0) so that computation of green cells (paths) can be done. - Inside this main functino you should call the
calculatePath
function to get the computation done and return the visualisations usingloadCells
function.
References
- React Grid components, API alternative
Tip
- Use React Grid Components (material UI) to effectively deal with the grid cells.
- Make sure the starting point (source cell), the obstacles (red cells), endign point (destination cell) and the possible paths (green cells) are rightly attributed while writing the algorithm.
- Start with a case of which you know the solution to. Then once the app is working right you can try out random cases.
Note
- Refer to the following packages and see how you can use it in your code.
Bring it On!
- Implement your own methods to solve this problem and implement the visualisation for that solution.
Expected Outcome
Now that the core functionalities are implemented the web app is ready. So the web app rendered should look something like this.
Publish your work to GitHub and host your website live
Rat Maze Experiment
Finish your work in complete style.
Publish your work on GitHub with proper folder structure and a good README for people to get to know of your work. Make sure you add a .gitignore file and mention all dependency folders like node_modules in it.
Rat Maze Leetcode
Since this is a React application, go one step further by using a hosting service like Heroku, Firebase or Netlify to host your app and get a live URL.
Share this link among your peers and add this project (with the link and proper documentation) to your resume and voila, you have just boosted your resume.

Rat Maze Video
References
Rat Maze For Sale
Bring it on!
- Try implementing this puzzle now. Explore all such famous algorithmic problems and develop visualisations for them.
