Folders Structure

A study project using recursive functions and others data structures.

Introduction

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.

Installation

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

How it works?

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:

Structures example

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.

Online test

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).

Finishing

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