• 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!

• 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 components of the app i.e. the maze and the cell.
• Create a custom component called Maze (preferably) which will be used to render cells as containers.

function Maze() {
     return (
        <div >
        // Write here the logic to create a N*N grid (maze) UI
        // Hint : You can use Material UI Grid and Box Components
        </div>
  );
}

• To render a cell within a maze another component must be used.

function Cell(props) {
      return (
        <div >
        //  Write here the logic to create a cell UI
        //  Hint : You can use Material UI Grid and Paper Components
        </div>
  );
}
 
export default Cell;
 

• 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 computation of the paths.
• We need a loadCells function to load all cells of the maze. This function will be responsible for assigning the cells' roles.
• The main function to be exported from maze.js will be used for the visualisation. So inside this main function (say function Maze()) 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 function you should call the calculatePath function to get the computation done and return the visualisations using loadCells function.

 
/**
 * Calculate all possible Maze paths
 * @param  {Array} matrix - row * column grid(Maze)
 * @param  {int} i - source initial row index
 * @param  {int} j - source initial column index
 * @param  {int} rows - total number of rows in grid
 * @param  {int} columns - total number of columns in grid
 * @return {Array} path - total possible paths
 */
function calculatePaths(matrix, i, j, rows, columns) {
     let paths = [];
      
    // Write here the logic to calculate all possible paths from top left of a grid (maze) to bottom right 
    
    return paths;
}
 
/**
 * Create all cells for a given maze
 * @param  {Array} mat - row * column grid(Maze)
 * @param  {int} rows - total number of rows in grid
 * @param  {int} columns - total number of columns in grid
 * @param  {int} gindex - a unique value for each maze
 * @return {Array} path - a single valid path
 * @return {Array} cells - all the cell components for a given maze.
 */
function loadCells(mat, rows, columns, gindex, path) {
    let cells = [];
    
    // Write here the logic to push cell to a grid with type(red = to indicate obstacle ,green = to indicate a possible path ,while = to indicate a possible passage)
    
    return cells;    
}

  "@material-ui/core": "^4.11.2",
  "@testing-library/jest-dom": "^5.11.6",
  "@testing-library/react": "^11.2.2",
  "@testing-library/user-event": "^12.6.0",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-scripts": "4.0.1",
  "web-vitals": "^0.2.4"