Let's create a File Manager From Scratch With React And Typescript Chapter I: A good way to Expand Your Experience

Hello folks, as mentioned in the title, we're going to create a simple file manager, that we might convert it later to a standalone package... why not xD.

The project is hosted in github, scroll down to the end of the article if you want to check it there.

Introduction

The main purpose of this series (yes it will be list of articles) is for education and leveling up your logic skills as i will not focus on the UI part and the second one is i want to create one :).

This series will go with you from the very tiny steps to a very advanced onces, so don't get rush into it and you will be good.

Prerequisites

Before you get into this series make sure you're aware with the following so you don't get lost in the middle

• React (Of Course)
• Typescript Basics
• Styled Components Basics
• Basics of ES6 Classes (OOP)
• Yarn, npm works too but i'll use yarn here.

As we'll create the project with CMA (Create Mongez App) so i advice you to watch the series.

The main purpose of CMA is for organization only, and the used packages that we will use are standalone, but stick with me for the time being.

Constructing the project

Open your practice directory then open the terminal inside it and run the following command

npx create-mongez-app react file-manager

If you're using it for the first time, it will ask your permission to install for the first time, press y then Enter.

Now you'll be asked to select your preferred way of styling, we'll use Styled Components, the second choice.

Now we'll wait until the installation is done, once everything is ok now let's head to our project, cd file-manager then code . to open vscode.

Before we start the project, we need a UI framework to handle the UI for us, i'll be using Mantine a promising framework for React Js.

We'll install only the following packages, not the entire packages for the framework.

yarn add @mantine/core @mantine/hooks @mantine/notifications @mantine/dropzone @mantine/spotlight @mantine/modals @mantine/nprogress

Now let's start our server yarn start

File Manager Features

Before we start write any line, we need first to determine how the file manager works then how the file manager will be implemented.

Let's start with the features of the file manager, let's make a simple sketch first then we write down the features.

I know my drawing skills aren't perfect, but it should fit to the purpose, as we can see above, we'll have a toolbar to manage the files and directories, on the left sidebar we'll have directories list for quick navigation and on the right content we'll display all files and directories.

• Toolbar to control selected files/directories
• Sidebar to list directories
• Create Directories inside directories or in the root directory.
• Drag & Drop For File Uploads.
• Display File/Directory meta data like size, last modification date, name and mimetype (for files).
• Context Menu (Using Mouse Right Click) to display quick action for select file/directory.
• Multiple selections
• Search for files and directories in current directory.
• Copy/Cut/Paste/Delete Multiple files and directories.

Sounds promising right?, but needs tons of work to be fully implemented.

Project Repository

I've made a repository on Github to follow up with me each chapter, and i'll make the main branch contains the last update, and each chapter will have its own branch numbered with the chapter number, This is the Introduction Branch

Now our setup is ready, in the next chapter we will start creating our FileManager class that we will use to manage the filesystem, which will be fully separated from the UI and react components.

Stay tuned...