https://github.com/lgope/folder-manager

Folder Manager React App
https://github.com/lgope/folder-manager

localstorage react redux-toolkit typescript

Last synced: 15 days ago
JSON representation

Folder Manager React App

• Host: GitHub
• URL: https://github.com/lgope/folder-manager
• Owner: lgope
• Created: 2024-01-02T09:21:09.000Z (about 1 year ago)
• Default Branch: new-ui-data
• Last Pushed: 2024-01-08T11:51:02.000Z (about 1 year ago)
• Last Synced: 2024-11-20T13:34:18.254Z (3 months ago)
• Topics: localstorage, react, redux-toolkit, typescript
• Language: TypeScript
• Homepage: https://lgope.github.io/folder-manager/
• Size: 868 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# folder-manager

Task Description: Folder Manager React App

Objective:

Create a web application using React that allows users to manage folders and subfolders dynamically. The app should enable users to create folders, nest them inside each other, and provide an interactive interface for effective folder management.

Provide the complete React application source code github public repo.

Include necessary documentation to set up and run the application.

Discuss any challenges faced and how they were addressed.

Include a brief overview of the technologies and libraries used.

## Key Features 📝

-   Folder Breadcrumb

-   Context Menu For Folder/File

-   Global Context Menu

-   Add Folder

-   Delete Folder (Delete Warning Message)

-   Rename Folder

-   Same Name Alert in Same Folder

-   Change Folder Color

-   Copy Folder

-   Cut Folder

-   Paste Folder

-   Duplicate Folder

-   Global Search

-   Sort By Alphabetically, Folder, File

## Demonstration 🖥️

#### Main Context Menu :

![globalContextMenu](https://github.com/lgope/folder-manager/assets/58518192/69848d20-a939-46ed-ab40-3dd1ae0c2c20)

#### Folder/File Settings Context Menu

![Screenshot 2024-01-08 at 1 21 34 AM](https://github.com/lgope/folder-manager/assets/58518192/34fe69d2-ecb4-4714-9219-e12e9747b601)

#### Search



#### Change Color



#### Rename



#### Same Name Alert in Same Folder



#### Delete Warning Message



## 💻 Technology Used

The Folder Manager Application is built using the following technologies and libraries:

-   **React**

-   **Typescript**

-   **React Redux**

-   **Redux Toolkit**

-   **React Modal**

-   **Styled Components**

-   **UUID**:

-   **Material UI**

-   **Material Icon**: Customizable toast notification library for React.

## 🛠️ Installation Steps:

1. Clone the repository


```

git clone https://github.com/lgope/folder-manager.git

```

2. Install the required dependencies 


```

npm install

```

3. Start the development server


```

npm run dev

```

4. Access the application at


```

http://localhost:5173 or Your Local URL

```

## Build With 🏗️

1. Javascript, Typescript

2. ReactJs, Redux, Toolkit

3. React Modal

3. Material UI, Material Icon

3. Styled Component (Styling)

4. UUID

## Contributing 💡

Pull requests are welcome but please open an issue and discuss what you will do before 😊

## Known Bugs 🚨

Feel free to email me at [email protected] if you run into any issues or have questions, ideas or concerns.

Please enjoy and feel free to share your opinion, constructive criticism, or comments about my work. Thank you! 🙂

## Future Updates 🪴

- Drag and Drop Folder/File

- And More! There's always room for improvement!

## License 📄

This project is open-sourced under the [MIT license](https://opensource.org/licenses/MIT).

## Deployed Version 🚀

Live demo (Feel free to visit) 👉🏻 : https://lgope.github.io/folder-manager/