Let’s play a Javascript Frontend Game

Under the Hood

The story begins last week I got a technical assignment for a full-time position as a part of an interview process.

I am not putting the entire assignment here but the problem statement is the real-world case scenario and that is what we will play around with today.

Question

You have one JSON file that represents the file system of any directory in the world.

Now the questions revolve around this one JSON

Each question will represent the stages of the game.

Passing one stage will allow you to go to the next stage and therefore complete the game.

Stage One

Show file structure as a Tree on the screen from JSON

• How will you iterate over the JSON and render it on the website just like Javascript DOM or binary tree?
• The tree should contain all the directories and folders mentioned in the file structure
• The tree should have accordion functionality just like any file folder you s ee on the browser.

Stage Two

Collapse/Expand directories

• Define a method to collapse and expand all directories.

Stage Three

Add Delete file/folder functionality

• Write a javascript function to remove a file/folder from the JSON described above.

Stage Four

Edit the name of any file/folder

• How will you update the name of any of the files/folders,

Stage Five

Create a new file/folder for any position

• How will you add a new file/folder to the required position, for example, inside the directory name components or in the root directory?

The last stage — Stage Six

Add Drag and Drop functionality to the file structure

• You have the children key in the file structure which is an array. Now define a way to move the elements of this array to the position given as an input parameter.

It’s not OVER

Once this is OVER you have successfully completed the GAME.

But that’s not why this GAME is developed.

Now that you have written each method, simply convert those methods into a React code.

Meaning writes each method in whatever frontend language or framework you are comfortable with and your own CODE editor is ready just like codesandbox.

If you are wondering how is this even possible just TRY it on your own.

Advanced

The more advanced version will certainly enable more stages.

Stage 7 can also include the content of each file and you have to show the content to the editor on the screen.

The editor should allow developers to edit the content and save the entire JSON and sends it back to the server.

The server then stores this JSON in the database. Keep playing the game until you want it to end. I mean it can go to whatever extent you want it to take.

But I’ve to certainly end here only.

Cheers
Shrey
iHateReading