Recreating the interactive Mac OS file explore 'Finder' 🗂️ but this one is for web 🕸️. I recreated most functionalities of Mac OS Finder, including UI and user interactions functionalities and features.
In recently, I really like the UI style call glassmorphism. I always wanted to created and use that UI system in my project but I have no chance to use that UI design for some reason. After that, I decided to create that effect in side project by combining with tree data structure. All these idea combining and inspiring from Mac OS UI design system, this React Finder project is rise.
- Beautiful UI design with
Glassmorphismeffect - Similar behavior and functionalities of Mac OS Finder
- Create, rename and delete file and folder with native features like right click on item
- User's device battery status
- Settings to change background wallpaper
- Others...
- NextJS
- TailwindCSS
- ShadcnUI
- Zustand
This is purely NextJS frontend project.
- Clone the repo
git clone https://github.com/Kei-K23/react-finder.git- Change directory
cd react-finder- Install dependencies
pnpm install
# or
npm install- Run project locally
pnpm run dev
# or
npm run dev- Setup your own Sentry (optional)
- Folder and file create, delete and rename
- Sortable folders and files
- Drag and drop every node
- Add Sentry error management
- Smooth transition between each nodes
- Add more functions to right panel action bar like finding folder or file
- Smooth initial transition state management
- Code refactoring
This project is licensed under the MIT License.