Our frontend will be a React app with which the user can register a directory to secure our blockchain. After registering the directory, the app will iterate every 5 seconds and call the /api/hashread service to check whether the directory has been tampered with.
In the case the directory has been tampered with, the app will show the message Tampered! in the header; otherwise, it will say Not Tampered. It will then call the /api/hashreadfile service in the backend server to fetch a list of tampered files, added files, and removed files. These are then listed in the app.
The following are the constituent parts of the app:
- The main App.js file
- The following React components:
- Container.js
- PathMapper.js
- FolderBlock.js
- FolderBlockChkStatus.js
- GlowBar.js
The following is a brief description of these components:
- App.js: The main App.js file implements the methods that interact with the backend server, submit requests, and interpret responses. It invokes Container.js for rendering the child components and forwards the current state to Container.js.
- React components: These components render the DocsApp frontend:
- Container.js: This receives the current state from App.js and passes it to the child components.
- PathMapper.js: This is the landing screen for the app that asks the user for the root of the directory they want to secure.
- FolderBlock.js: This is the component that renders the list of files in the directory and their current status (tampered/not tampered).
- FolderBlockChkStatus.js: This is the component that renders the list of files in the directory and their current status (tampered/not tampered). If the directory has been tampered with, it shows the list of tampered files, added files, and removed files in the directory.
- GlowBar.js: This is the component that shows the message Tampered with a red highlight if the directory is found to have been tampered with or Not Tampered with a green highlight if the directory has not been tampered with.
Let's start creating the frontend.