FileDrive - Cloud File Management System

A modern, secure file management system built with Next.js, Convex, and Clerk authentication. Upload different format files (images, PDFs, text files, spreadsheets), add them to favorites, delete and recover files with a beautiful, responsive interface.

🚀 Features

• Secure Authentication - Powered by Clerk
• Real-time File Management - Built with Convex
• File Upload & Storage - Support for images, PDFs, text files, and spreadsheets
• File Organization - Favorites, search, and filtering
• Responsive Design - Works on desktop and mobile
• Modern UI - Built with Tailwind CSS and shadcn/ui

🛠️ Tech Stack

• Frontend: Next.js 14, React, TypeScript
• Backend: Convex (Database & Real-time)
• Authentication: Clerk
• Styling: Tailwind CSS, shadcn/ui
• File Storage: Convex File Storage
• Deployment: Vercel (Frontend), Convex (Backend)

📸 Screenshots

Homepage

Dashboard

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• Git

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/devpayoub/FileDrive.git
cd filedrive

2. Install Dependencies

npm install

3. Environment Variables Setup

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

# Convex Configuration
NEXT_PUBLIC_CONVEX_URL=your_convex_deployment_url

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_clerk_publishable_key
CLERK_SECRET_KEY=sk_test_your_clerk_secret_key
CLERK_WEBHOOK_SECRET=whsec_your_webhook_secret

# Optional: For webhook configuration
CLERK_HOSTNAME=https://your-ngrok-url.ngrok-free.app

4. Convex Setup

1. Install Convex CLI (if not already installed):

npm install -g convex

2. Login to Convex:

npx convex dev --configure

3. Start Convex Development Server:

npx convex dev --prod

5. Clerk Setup

1. Create a Clerk Account:

   • Go to clerk.com
   • Create a new application

2. Configure JWT Template:

   • Go to Clerk Dashboard → JWT Templates
   • Create a new template named convex
   • Add the following claims:

   {
     "aud": "convex",
     "name": "{{user.first_name}} {{user.last_name}}",
     "email": "{{user.primary_email_address.email_address}}",
     "picture": "{{user.image_url}}"
   }

3. Configure Webhook (Optional):

   • Go to Clerk Dashboard → Webhooks
   • Add endpoint: https://your-convex-url.convex.cloud/clerk
   • Select events: user.created, user.updated, organizationMembership.created, organizationMembership.updated

6. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

🔧 Environment Variables Explained

Required Variables

Variable	Description	Example
NEXT_PUBLIC_CONVEX_URL	Your Convex deployment URL	https://your-deployment.convex.cloud
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk publishable key	pk_test_...
CLERK_SECRET_KEY	Clerk secret key	sk_test_...
CLERK_WEBHOOK_SECRET	Webhook verification secret	whsec_...

Optional Variables

Variable	Description	When to Use
CLERK_HOSTNAME	Custom domain for webhooks	When using ngrok for local development

📁 Project Structure

filedrive/
├── app/                    # Next.js app directory
│   ├── dashboard/         # Dashboard pages and components
│   ├── globals.css        # Global styles
│   └── layout.tsx         # Root layout
├── convex/                # Convex backend
│   ├── files.ts          # File management functions
│   ├── users.ts          # User management functions
│   ├── http.ts           # Webhook handlers
│   ├── schema.ts         # Database schema
│   └── auth.config.ts    # Authentication configuration
├── components/            # Reusable UI components
├── public/               # Static assets
└── .env.local            # Environment variables

🔐 Authentication Flow

1. User signs up/logs in via Clerk
2. JWT token is sent to Convex with user information
3. User is created in Convex database (if new)
4. File operations are authenticated using the JWT

📤 File Upload Process

1. Generate upload URL from Convex storage
2. Upload file to Convex storage
3. Create file record in database
4. Display file in the dashboard

🚀 Deployment

Frontend (Vercel)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy

Backend (Convex)

npx convex deploy

🐛 Troubleshooting

Common Issues

1. "Missing Clerk Secret Key"

   • Ensure CLERK_SECRET_KEY is set in .env.local
   • Restart the development server

2. "Failed to authenticate"

   • Check JWT template configuration in Clerk
   • Verify NEXT_PUBLIC_CONVEX_URL is correct
   • Ensure Convex auth config matches Clerk domain

3. "File storage not configured"

   • Configure file storage in Convex dashboard
   • Or use external storage provider (S3, etc.)

4. "User not found"

   • Check if webhook is properly configured
   • Verify user creation in Convex database

Debug Mode

Enable debug logging by adding to your Convex functions:

console.log('Debug info:', { identity, user })

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Devpayoub - GitHub

---