[Meeting Management] Front-end migration using React and Material-ui
Budget: €30 – €250 EUR
This job has the aim of rethinking the user interface of a web component (so-called Meeting Management), used to build the structure of a meeting, mainly done using a tree approach and drag and drop.
This job is part of a migration step and, consequently, it is required to apply a look and feel coherent with the one we are already applying in other components (some additional screens we’ll be shared with the selected developer).
It is required to develop the solution in React using Material UI and the json-dir-tree library.
Note: The back-end has already been developed and the actions started from this new user interface end with asynchronous calls handled through the back-end, info about such calls will be provided to the selected developer.
In details, this component (meeting management) is built on top of 2 pages.
The first one:
- It is used to build the structure of a meeting using a tree approach (e.g. it is initially created and configured the root element and then children and sibling till the structure of the meeting is finished).
- It is possible to move (using a drag and drop approach) the nodes of the tree and modify their attributes.
- Once the structure of a meeting is completed, it is possible to view the structure without the chances of updating it.
- The structure of the meeting is stored in a json file (containing everything it is shown in the page).
- The library to be used to handle the tree representation is the following https://github.com/anubhav04/json-dir-tree.
The second one:
- It is used to add files (using a drag and drop approach) inside the structure of the meeting, previously described.
- It is possible to move (using a drag and drop approach) the files inside the nodes of the tree.
- The structure of the meeting previously created (stored in a json file) is updated with the info about the loaded files.
- The library to be used to handle the tree representation is the following https://github.com/anubhav04/json-dir-tree.
Note: Please consider the operations about json updates are handled by the back-end component (out of this work), here it is just required to call the necessary APIs
Similarly, the operations about uploading files on the server are handled by the back-end component (out of this work), here it is required to call the necessary APIs
Further details about the back-end API will be shared with the selected developer together with details about new look and feel.
This job is part of a migration step and, consequently, it is required to apply a look and feel coherent with the one we are already applying in other components (some additional screens we’ll be shared with the selected developer).
It is required to develop the solution in React using Material UI and the json-dir-tree library.
Note: The back-end has already been developed and the actions started from this new user interface end with asynchronous calls handled through the back-end, info about such calls will be provided to the selected developer.
In details, this component (meeting management) is built on top of 2 pages.
The first one:
- It is used to build the structure of a meeting using a tree approach (e.g. it is initially created and configured the root element and then children and sibling till the structure of the meeting is finished).
- It is possible to move (using a drag and drop approach) the nodes of the tree and modify their attributes.
- Once the structure of a meeting is completed, it is possible to view the structure without the chances of updating it.
- The structure of the meeting is stored in a json file (containing everything it is shown in the page).
- The library to be used to handle the tree representation is the following https://github.com/anubhav04/json-dir-tree.
The second one:
- It is used to add files (using a drag and drop approach) inside the structure of the meeting, previously described.
- It is possible to move (using a drag and drop approach) the files inside the nodes of the tree.
- The structure of the meeting previously created (stored in a json file) is updated with the info about the loaded files.
- The library to be used to handle the tree representation is the following https://github.com/anubhav04/json-dir-tree.
Note: Please consider the operations about json updates are handled by the back-end component (out of this work), here it is just required to call the necessary APIs
Similarly, the operations about uploading files on the server are handled by the back-end component (out of this work), here it is required to call the necessary APIs
Further details about the back-end API will be shared with the selected developer together with details about new look and feel.