A study project using recursive functions and others data structures.

One day I was thinking to myself how hard it could be to create a folder structure system, like VS Code - and then one day I decided to start this, and I bet with you it was one of the best (and the coolest) project I've coded - and this was great because I could learn a lot of about recursion and data structure. In the future, I hope to refactor this project with TypeScript.

Actually, this project does not require anything else but your browser. Then, use your favorite browser to try it out. If you want to clone this repository, use the following command:

git clone https://github.com/vinicius-goncalves/folders-structure

Inside of assets directory, there is a file named structure.js that contains the logic of the whole structure. Let's go deeper to see some examples:

1. This initial structure must exist.

const structure = [
    {
        type: Types.Folder,
        name: 'languages',
        content: [
            { types: Types.File, name: 'html' },
            { types: Types.File, name: 'css' },
            { types: Types.File, name: 'js' },
        ]
    }
]

2. This is a folder inside another folder, for example.

//[...]
type: Types.Folder,
name: 'database',
content: [
	{
		type: Types.File,
		name: 'mongodb'
	},
	{
		type: Types.File,
		name: 'sql'
	},
	{
		type: Types.File,
		name: 'firestore'
	}
]
//[...]

3. This represents an empty folder inside another folder:

//[...]
//An empty folder does not need to have a "content" property, this will be defined automatically.
{
	type: Types.Folder,
	name: 'empty-cool-folder'
}
//[...]

ATTENTION to those details:

• The structure must be initialized as an array, because the structure is going to be iterated through the role object (array) by a recursive function inside the app.js.
• A single file (or folder) is an object with the following properties:
  • type (must exist) - it's the 'type' (more details below) of the file;
  • name (must exist) - the name of the file;
  • content (optional) - it's the content of the folder, but is just used when Types.Folder is used too.
• The type property is a type of Types.js, inside the utils directory, meaning:
  • Folder - represents a folder;
  • File - represents a file;
  • Empty - used when content is undefined AND the file type is Types.Folder;
  • Other (for testing purposes).
• Even if a content has JUST a single content an array must be used, but this is not a requirement if you want the content to be an empty folder. There is a function that adds Types.Empty for all contents that fit in the previous requirements (it's the same thing in the "3" structure example).

You can see the best example of the structure inside the assets > structure.json directory.

If you want to try it out, you can do this online through this link: https://jcd18.vinicius-goncalves.com (the index.html is localized into the folder html).

That's all for this project, I just want to say thank you for reading this!