https://github.com/madhura-punde/folder-app
a Full Stack ReactJS NodeJS application with enhanced file management capabilities.
https://github.com/madhura-punde/folder-app
aws-s3 expressjs mongodb-atlas multer-fileupload multer-s3 nodejs
Last synced: 2 months ago
JSON representation
a Full Stack ReactJS NodeJS application with enhanced file management capabilities.
- Host: GitHub
- URL: https://github.com/madhura-punde/folder-app
- Owner: madhura-punde
- Created: 2025-03-21T16:20:53.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-21T16:45:22.000Z (2 months ago)
- Last Synced: 2025-03-21T17:33:58.775Z (2 months ago)
- Topics: aws-s3, expressjs, mongodb-atlas, multer-fileupload, multer-s3, nodejs
- Language: JavaScript
- Homepage:
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Folder-APP
a Full Stack ReactJS NodeJS application with enhanced file management capabilities.
### Project Overview
This project is a Full Stack ReactJS and NodeJS application focused on enhancing file management capabilities. The application consists of two main components:
1. Backend (Node.js): Handles the core business logic, file storage, and management.
2. Frontend (React.js): Provides the user interface for file upload, folder creation, document viewing, and more.
### The application is divided into four key sections:
1. Top Section: Allows users to upload files and create folders. It also includes folder breadcrumbs and a context menu for easy navigation.
2. Left Section: Displays a folder and file hierarchy along with an ongoing upload progress section.
3. Middle Section: Provides an expanded view of the folder and file structure.
4. Right Section: Displays a document viewer for the selected file.
Currently, the backend has been fully implemented, and the frontend is still a work in progress.
### Tech Stack
- Backend:
1. Node.js
2. Express.js
3. MongoDB (or any other database you're using)
4. Multer (for file handling and uploads)
- Frontend:
1. React.js (in progress)
### Features
1. Backend Features:
- File Upload API: Handles file uploads using Multer.
- Folder Management: Allows users to create and manage folders.
- File Hierarchy API: Fetches the folder and file structure.
- Document Viewer: A simple API to serve files for document viewing.
2. Frontend (Work in Progress):
- File Upload & Folder Creation
- Folder and File Hierarchy Visualization
- Document Viewer
### Installation
#### Prerequisites
Ensure you have the following installed:
- Node.js (Backend & Frontend)
- MongoDB (or your preferred database)
- npm or yarn (For dependency management)
#### Steps to Install:
Clone the repository:
```
git clone https://github.com/your-username/Folder-APP.git
```
Install backend dependencies: Navigate to the backend directory and install dependencies:
```
cd backend
npm install
```
Install frontend dependencies (currently in progress): Navigate to the frontend directory and install dependencies:
```
cd ../frontend
npm install
```
Backend Setup
Database Configuration: If you are using MongoDB, create a .env file in the backend directory and include the following variables:
```
DB_URI=
PORT=5000
```
Running the Backend: Navigate to the backend directory and start the server:
```
cd backend
npm start
```
The backend will run on http://localhost:5000.
Frontend Setup (In Progress)
The frontend is still under development, but once it's ready, you can set up and run the client as follows:
Running the Frontend: Navigate to the frontend directory and run:
```
cd frontend
npm start
```
The frontend will run on http://localhost:3000.
#### Running the Application
To run the full-stack application:
Start the backend:
```
cd backend
npm start
```
Start the frontend:
```
cd frontend
npm start
```
Once both the backend and frontend are running, you can access the application at http://localhost:3000 (frontend) and http://localhost:5000 (backend).
Future Enhancements
Frontend: Complete the frontend with UI for file upload, folder creation, and document viewing.
User Authentication: Implement user authentication for file access and management.
File Preview: Add support for previewing different types of files (images, PDFs, etc.).
Drag-and-Drop Upload: Implement drag-and-drop file upload functionality for better UX.
Search Functionality: Add search functionality to find files and folders.
File Versioning: Implement versioning for files.