File Manager

Overview

A File manager with React Frontend and Rails Backend. Allows users to manage their files and folders seamlessly. The app uses Minio for object storage, ensuring that the structure in the File Manager UI mirrors the structure in Minio, providing a reliable and intuitive user experience. Additionally, the app features real-time updates with ActionCable, allowing users to see changes immediately as they happen.

Features

• Folder Management:

  • Create Folder
  • Create Nested Folder
  • Rename Folder
  • Remove Folder
  • Get Folder List

• File Management:

  • Create File
  • Create File inside a Folder
  • Rename File
  • Remove File
  • View File

Technology Stack

• React 18: Framework
• Zustand: State management library
• Shadcn: Component library
• ActionCable: Real-time updates
• Zod: Schema validation

Preview

Demo

Watch Video

Screenshots

Backend API Documentation

• When accessing BE documentation you need follow the steps

Setup

Prerequisites

Dependencies installed on your machine

• Node.js version 14.0.0 or higher
• Npm or Yarn

Installation Steps

1. Clone the repository:

   git clone https://github.com/voidzenn/file_manager_fe.git
   cd <repository-name>

2. Rename .env.example to .env:

   mv .env.example .env

3. Install dependencies:

   npm install
   # or 
   yarn install

4. Run the app:

   yarn dev

5. Access the web application:

   Open your browser and navigate to http://localhost:3001