Skip to content

Recreating Mac OS file explore 'Finder' but this one is for web 🕸️

License

Notifications You must be signed in to change notification settings

Kei-K23/react-finder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
git clone https://github.com/Kei-K23/react-finder.git
  1. Change directory
cd react-finder
  1. Install dependencies
pnpm install
# or
npm install
  1. Run project locally
pnpm run dev
# or
npm run dev
  1. Setup your own Sentry (optional)

Todo

  • 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

License

This project is licensed under the MIT License.