https://github.com/kei-k23/react-finder
Recreating Mac OS file explore 'Finder' but this one is for web 🕸️
https://github.com/kei-k23/react-finder
fileexplorer finder macos nextjs react shadcn-ui tailwindcss typescript
Last synced: 2 months ago
JSON representation
Recreating Mac OS file explore 'Finder' but this one is for web 🕸️
- Host: GitHub
- URL: https://github.com/kei-k23/react-finder
- Owner: Kei-K23
- License: mit
- Created: 2024-08-02T15:24:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-15T14:45:00.000Z (about 1 year ago)
- Last Synced: 2025-04-06T09:12:03.689Z (6 months ago)
- Topics: fileexplorer, finder, macos, nextjs, react, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://react-finder-gamma.vercel.app
- Size: 17.9 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Finder 🗂️
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.
## Motivation
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.
## Features
- Beautiful UI design with `Glassmorphism` effect
- 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...
## Tech Stack
- NextJS
- TailwindCSS
- ShadcnUI
- Zustand
## Installation
This is purely NextJS frontend project.
1. Clone the repo
```bash
git clone https://github.com/Kei-K23/react-finder.git
```
2. Change directory
```bash
cd react-finder
```
3. Install dependencies
```bash
pnpm install
# or
npm install
```
4. Run project locally
```bash
pnpm run dev
# or
npm run dev
```
5. Setup your own Sentry (optional)
## Todo
- [x] Folder and file create, delete and rename
- [x] Sortable folders and files
- [x] Drag and drop every node
- [x] 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
## License
This project is licensed under the [MIT License](./LICENSE).