A virtual folder tree visualizer. Live at https://folder-mania.netlify.app.
This is an front end application for the virtual folder tree structure, 'node-virtual-folder'. The idea was to create a full stack virtual folder tree that can be updated.
The tools I used for this are React, React context API, axios, Fontawesome library, and react-toggle for the small theme toggle button.
When the app renders, a root folder appears which contanis all the folders inside. The component re-renders everytime a folder is added or removed.
The InsertFolderForm component is added for inserting a folder to the tree with a custom title. This component renders using React's useState method.
Much like the InsertFolderForm component, the DeleteFolderForm component is added for deleting a folder from the tree.
I used custom CSS for all the components.
I wanted to create 2 themes which would look like a windows environment and a terminal environment. I used custom JavaScript to update the CSS root variables for changing the theme. This allowed me to keep my theme changer component clean from the other components.