The File Processing Dashboard is a React-based application for processing files stored in buckets. Users can create buckets, add files, and process them to extract information such as content hashes, classifications (e.g., malware vs. goodware), and more. The processed information is stored locally and displayed in a user-friendly dashboard.
-
Frontend:
- React
- React Query
- Tailwind CSS
- TypeScript
- Axios
- Toast Notifications
-
Backend (added in order to be able to read files from the filesystem)
- Hono
- fs-extra (File System Operations)
Make sure you have installed:
- Node.js (v14+)
- npm or Yarn
git clone https://github.com/yotf/bucketAnalyzer.git
cd bucketAnalyzer
npm install
cd backend
npm install
The library concurrently is used, so both backend and frontend can be started from the main folder (bucketAnalyzer) with this command:
npm run dev
The backend server should start on http://localhost:3001
The frontend should be accessible on http://localhost:5173
Once the application runs it should take you to the main and only page of the app, that has two sections:
This section is used for selecting which files from the selected bucket the user wants to process. If the user doesn't select any file from the bucket - all files will be processed. Processing is initiated by pressing the "Process Files" button. A notification appears upon success or failure.
The info of each file is stored in local storage. Clicking the DASHBOARD button opens a modal that displays all the info from the processed files.
This section is used for creating new buckets and files in existing buckets.
- The buttons are disabled if the fields are not valid
- When the ADD button is clicked new files/buckets are created via the back-end, and success or failure (if bucket/file with that name already exists) notification is shown.