Demo Application

Let’s take a look at a React application that uses some of the endpoints we discussed. This application will offer the following functionalities:

• Display the directories

• Navigate through the directories

• Create a new directory

• Delete a directory

Application workflow

Let’s take a look at the application workflow from the user’s point of view:

• When the application starts, we’re presented with the homepage. This page displays the available directories in the main folder of the Dropbox account.

• We can navigate into the directory by clicking on any of these directories.

• The "Home" button is used to navigate to the main directory, and the "Back" button is used to navigate to the parent directory. On the main page, the "Back" button is hidden.

• The "Create Folder" button is used to create a new directory. When we click "Create Folder," it will open a model to take the new folder's name.

• Every directory has a check box. When we click on the check box, the "Delete" button will show up, and we can click it to delete that directory.

Demo application

The widget below contains the code for our application. Click the “Run” button to see the application in action: