Skip to content

sanjaymahto/file-system-in-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This project was bootstrapped with Create React App.

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about [deployment];

How to Start Application

Client App

1.) Open file-System folder in VSCode.

2.) Run npm install to install all the dependencies.

3.) Run client-server - npm start.

Features:

  1. The web app mounts to the root route i.e. “/” This would list all subdirectories to root.

  2. The app will also display the “current path” in the navbar

  3. A double-clicking directory should update the “current path” as well as change the view with all the files & folders present inside this new directory.

  4. There will be an Up button which will lead you one step above in the directory structure.

  5. On right click of a file/folder, secondary menu popups with 3 options:

    ● Open - navigate into the folder, open info popup
    
    ● Get Info - Opens info popup for both file & folder.
    
    ● Delete - remove file/folder from the system
    
  6. Each folder would have a Create/Add button, which would trigger a popup to create a new file/folder with associated meta fields - name(with the extension for files), creator, size and date.

  7. Search Implementation Added(local Search in the current Directory).

App Flow

  1. The web app mounts to the root route i.e. “/dummy” This would list all subdirectories to root.

  2. The app also displays the “current path” in the navbar

  3. Double-clicking directory updates the “current path” as well as change the view with all the files & folders present inside this new directory.

  4. There's an Up arrow button which on click will lead you one step above in the directory structure.

  5. On right click of a file/folder, secondary menu popups with 3 options:

    ● Open - navigate into the folder, open info popup

    ● Get Info - Opens info popup for both file & folder.

    ● Delete - remove file/folder from the system

  6. Each folder has a Create/Add button, which triggers a popup to create a new file/folder with associated meta fields - name(with the extension for files), creator, size and date.

  7. Search Implementation flow:

    ● Enter a file or folder name to be searched (Case Sensitive) and hit enter.

    ● A found file will be displayed in the current directory.

    ● To bring back the original contents clear the text from the search box and hit enter.

  8. Press the Hamburger icon to open the side bar menu.

Releases

No releases published

Packages

No packages published