Cloudrive

A personal cloud storage solution offering seamless file management capabilities. Users can upload, organize, share, and manage their files with granular access controls. Features include file previews, secure sharing links, folder organization, favorites, trash management, admin panel, billing/subscription management, and storage quota tracking. Built with AWS S3 for reliable storage and Postgres for structured data management.

🛠️ Tech Stack

NextJS — Full Stack

• Framework: Next.js 15 (App Router)
• Styling:
  • Tailwind CSS
  • shadcn/ui
  • Sonner - Toast notifications
• State Management: Tanstack Query
• Form Handling: React Hook Form with Zod validation
• Icons:
  • Lucide
• Database: PostgreSQL with Drizzle ORM
• Authentication: Better Auth
• Storage: AWS S3
• Email: Resend
• Charts: Recharts
• File Upload: React Dropzone
• Excel Processing: xlsx

Development Tools

• Package Manager: Bun
• Type Checking: TypeScript
• Formatting & Linting: ESLint with Next.js config
• Version Control: Git

🚀 Quick Start

Prerequisites

• Node.js >= 18
• Bun >= 1.2.1
• PostgreSQL database
• AWS S3 bucket and credentials
• Git

Setup Instructions

1. Clone the repository:

   git clone https://github.com/shoaibshaikh07/cloud9.git
   cd cloud9

2. Install dependencies:

   bun install

3. Set up the database:

   • Create a PostgreSQL database
   • Run the migrations:

     bunx drizzle-kit migrate

4. Start the development server:

   bun run dev

   This will start the app at http://localhost:3000

🔒 Environment Variables

Create a .env file in the root directory with the following variables:

# Database
DATABASE_URL=postgresql://username:password@localhost:5432/cloudrive

# Better Auth
BETTER_AUTH_SECRET=your_secret_key_here
BETTER_AUTH_URL=http://localhost:3000

# AWS S3
S3_ENDPOINT=https://s3.amazonaws.com
S3_ACCESS_ID=your_aws_access_key_id
S3_SECRET_KEY=your_aws_secret_access_key
S3_BUCKET=your_s3_bucket_name
S3_REGION=us-east-1

# Email (Resend)
RESEND_API_KEY=your_resend_api_key

Available Scripts

• bun run dev - Start development server with Turbopack
• bun run build - Build the application for production
• bun run start - Start the production server
• bun run lint - Run ESLint for code linting

📚 API Documentation

API Endpoints

The application provides the following REST API endpoints:

Authentication

• POST /api/auth/{*any}
  • Uses better-auth for secure authentication and authorization
  • Handles user registration, login, logout, and session management

File Management

• GET /api/files

  • Returns a list of files for the authenticated user

  // Response (Success)
  {
    "success": true,
    "files": [
      {
        "id": "string",
        "name": "string",
        "mimeType": "string",
        "size": "number",
        "s3Key": "string",
        "createdAt": "Date"
      }
    ]
  }
  
  // Error Response
  {
    "message": "Unauthorized"
  }

• POST /api/upload

  • Uploads a file to AWS S3 and stores metadata in database
  • Requires multipart/form-data with 'file' and optional 'folder' fields

  // Request: multipart/form-data
  // file: File object
  // folder: string (optional)
  
  // Response (Success)
  {
    "message": "File uploaded successfully",
    "file": {
      "id": "string",
      "name": "string",
      "mimeType": "string",
      "size": "number",
      "s3Key": "string"
    }
  }
  
  // Error Responses
  {
    "message": "Content-Type must be multipart/form-data"
  }
  {
    "message": "Unauthorized"
  }
  {
    "message": "No file"
  }

User Management

• GET /api/user

  • Admin endpoint for updating user storage usage (requires admin role)

  // Response (Success)
  {
    "message": "Storage updated successfully"
  }
  
  // Error Response
  {
    "error": "Failed to update storage"
  }

🏗️ Code Architecture

The project is built as a single Next.js 15 application with the App Router:

cloudrive/
├── src/
│   ├── app/                 # Next.js App Router pages and API routes
│   │   ├── api/            # API endpoints (auth, files, upload, user)
│   │   ├── drive/          # Main drive pages (folders, files, etc.)
│   │   ├── auth/           # Authentication pages
│   │   └── share/          # File sharing pages
│   ├── components/         # Reusable UI components
│   │   ├── ui/            # shadcn/ui components
│   │   ├── dialogs/       # Modal dialogs
│   │   ├── data-view/     # File/folder list components
│   │   └── sidebar/       # Navigation sidebar
│   ├── db/                # Database schema and connection
│   ├── lib/               # Utility libraries
│   │   ├── authentication/ # Auth configuration
│   │   ├── s3.ts          # AWS S3 utilities
│   │   └── utils.ts       # General utilities
│   ├── actions/           # Server actions for data operations
│   ├── hooks/             # Custom React hooks
│   └── types/             # TypeScript type definitions
├── public/                # Static assets
└── drizzle/               # Database migrations

Key Components

1. Frontend Application

   • Built with Next.js 15 and React 19
   • Uses Tailwind CSS and shadcn/ui for styling
   • Implements file upload with drag-and-drop
   • Features folder organization and file sharing

2. Backend API

   • Next.js API routes handle authentication and file operations
   • Uses Better Auth for secure authentication
   • AWS S3 integration for file storage
   • PostgreSQL with Drizzle ORM for data persistence

3. Database Schema

   • Users with storage quotas and role management
   • Hierarchical folder structure
   • File metadata with S3 references
   • Subscription and transaction tracking

Development Workflow

1. All code resides in a single Next.js application
2. API routes handle backend logic using server actions
3. Database migrations managed with Drizzle Kit
4. Authentication handled through Better Auth middleware

🚀 Deployment

The application is designed to be deployed as a single Next.js application to Vercel:

1. Create a Vercel account (if you don't have one) and connect your GitHub account
2. Create a new project and select Next.js as the Framework
3. Set the root directory to / (project root)
4. Configure the following environment variables in Vercel's dashboard:
   • DATABASE_URL - Your PostgreSQL database URL
   • BETTER_AUTH_SECRET - Secret key for Better Auth
   • BETTER_AUTH_URL - Your deployed Vercel URL (e.g., https://your-app.vercel.app)
   • S3_ENDPOINT - AWS S3 endpoint
   • S3_ACCESS_ID - AWS access key ID
   • S3_SECRET_KEY - AWS secret access key
   • S3_BUCKET - AWS S3 bucket name
   • S3_REGION - AWS region
   • RESEND_API_KEY - Resend API key for email
5. Click Deploy
6. Once deployment is complete, your Cloudrive application will be available at https://your-app.vercel.app

Additional Setup

• Ensure your PostgreSQL database is accessible from Vercel's servers
• Configure CORS settings in your S3 bucket if needed
• Set up proper IAM permissions for S3 access

📝 License

MIT License

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request