Skip to content

README.md

Latest commit

 

History

History
167 lines (123 loc) · 5.43 KB

README.md

File metadata and controls

167 lines (123 loc) · 5.43 KB
Raw

☁️ Cloud Bucket

A modern, full-stack cloud storage application featuring a premium Claymorphism visual design system. Users can securely register, log in, create custom directory structures, upload files directly to Cloudinary storage, search across files, and organize their digital assets in an interactive 3D-styled environment.

✨ Features

  • 🎨 Claymorphism UI Overhaul: Beautiful, state-of-the-art interface utilizing soft inner/outer borders, chunky offset shadows, pastel gradients, and dynamic micro-animations.
  • 📁 Organized Directory Tree: Create new folders, navigate nested folder systems, and move files between folders dynamically.
  • 🚀 Drag & Drop File Uploads: Interactive modal interface supporting drag-and-drop actions, click-to-browse zones, and real-time upload progress indicators.
  • ☁️ Cloudinary Integration: Fully integrated file streaming directly to secure cloud image storage.
  • 🔍 Real-time Global Search: Instantly query files and folders in real time from the header search bar.
  • 🔒 Secure Authentication: Built-in JSON Web Token (JWT) authorization for protected routes, signup/login cards, and persistent sessions.

🛠️ Technology Stack

Frontend

  • Framework: React.js with Vite
  • Styling: Custom CSS variables with a modular Claymorphic Design System (index.css)
  • Routing: React Router DOM (SPA routing fallback with vercel.json rewrite configuration)
  • Icons: Lucide React

Backend

  • Server: Node.js & Express
  • Database: MongoDB (Mongoose ODM)
  • File Parsing: Multer with Multer-Storage-Cloudinary
  • Security: JWT & BcryptJS password hashing

🚀 Quick Start (Local Setup)

Prerequisites

  • Node.js (v16+)
  • MongoDB (Local instance or MongoDB Atlas URI)
  • Cloudinary Account (for file uploads)

1. Clone & Install Dependencies

Clone the repository and install dependencies in both the backend and frontend folders:

# Install Backend dependencies
cd backend
npm install

# Install Frontend dependencies
cd ../frontend
npm install

2. Configure Environment Variables

Create a .env file in the /backend folder:

PORT=5000
MONGO_URI=your_mongodb_connection_uri
JWT_SECRET=your_jwt_secret_key

# Cloudinary credentials
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

Create a .env file in the /frontend folder:

VITE_API_URL=http://localhost:5000

3. Run Locally

Start the backend and frontend dev servers concurrently:

# In the backend directory
npm run dev

# In the frontend directory
npm run dev

Your app will be running locally at http://localhost:5173.

🌐 Production Deployment

The codebase is pre-configured for instant deployments:

Backend (Render)

  1. Set the root directory to backend.
  2. Configure your environment variables in Render's dashboard.
  3. Build command: npm install, Start command: node server.js.

Frontend (Vercel)

  1. Set the root directory to frontend.
  2. Set the environment variable VITE_API_URL to your live Render backend URL.
  3. Vercel will automatically read vercel.json to configure the React SPA routing correctly.

📁 Repository Structure

├── backend/
│   ├── routes/              # Auth, Folder, and File routes
│   ├── models/              # Mongoose DB schemas (User, Folder, Image)
│   ├── server.js            # Express server entrypoint
│   └── package.json
│
├── frontend/
│   ├── src/
│   │   ├── components/      # UI components (Sidebar, Layout, Navigation)
│   │   ├── pages/           # Login, Signup, Dashboard views
│   │   ├── context/         # Auth state context provider
│   │   ├── index.css        # Claymorphism Design System CSS
│   │   └── App.jsx          # Router & layout wrapper
│   ├── index.html
│   ├── vercel.json          # SPA routing config
│   └── package.json
└── README.md

🤖 Claude Desktop / MCP Server Integration

Cloud Bucket includes a built-in Model Context Protocol (MCP) server (backend/mcp-server.js) that allows Claude Desktop to view, manage, and create folders and mock files directly via standard stdio transport.

🛠️ Configuration Steps

  1. Locate Claude Desktop Configuration File:

    • Windows: %APPDATA%\Claude\claude_desktop_config.json (Paste this path directly in File Explorer: %APPDATA%\Claude\)
    • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

  2. Add Cloud Bucket MCP Server: Open the configuration file (or create it if it doesn't exist) and add cloud-bucket to your mcpServers object:

    {
  "mcpServers": {
    "cloud-bucket": {
      "command": "node",
      "args": [
        "C:/Users/Hp_Owner/Desktop/Cloud-Drive-main/backend/mcp-server.js"
      ],
      "env": {
        "MONGO_URI": "mongodb://127.0.0.1:27017/dobby-ads"
      }
    }
  }
}

    (Note: Adjust the path to mcp-server.js and your MONGO_URI connection string according to your local machine setup).

  3. Restart Claude Desktop: Once restarted, Claude Desktop will show a hammer icon indicating the active MCP tools:

    • create_folder: Create a folder for a user.
    • upload_image: Mock upload an image for a user.