📂 Dropbox Clone

---

A modern Dropbox-inspired file storage application built with Next.js 14, TypeScript, Tailwind CSS, and Firebase.
This app provides secure authentication, drag-and-drop file uploads, file management (rename/delete), and a responsive dashboard UI with light/dark mode support.

---

📸 Screenshots

🔐 Authentication with Clerk

📂 File Dashboard

---

🚀 Features

• 🔐 Authentication with Clerk (sign-in, sign-up, middleware protection)
• 📤 File Upload with drag & drop support (React Dropzone + Firebase Storage)
• 📂 File Management – rename, delete, sort, and view files
• 🎨 Modern UI – Tailwind CSS, shadcn/ui, Radix UI, dark/light mode
• ⚡ State Management – Zustand for modals & UI states
• 📊 Table View of files with TanStack React Table
• 🔔 Notifications with React Hot Toast
• ⏳ Skeleton loaders for smooth UI transitions
• 🌐 Deployed on Vercel with custom domain (Hostinger)

---

🛠 Tech Stack

Frontend:

• Next.js 14
• React 18
• Tailwind CSS
• shadcn/ui + Radix UI

Authentication:

• Clerk

Backend & Database:

• Firebase
• Firestore Database

Utilities & Libraries:

• Zustand (state management)
• React Dropzone (drag & drop uploads)
• React Hot Toast (notifications)
• TanStack React Table (table view)
• Pretty-bytes (file size formatting)

---

📦 Installation

1. Clone the repository

   git clone https://github.com/fawazv/dropbox-clone.git
   cd dropbox-clone

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables
   Create a .env.local file in the root and configure:

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
   CLERK_SECRET_KEY=your_clerk_secret_key
   
   NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
   NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id

4. Run the development server

   npm run dev
   # or
   yarn dev

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

---

📂 Project Structure

dropbox-clone/
├── app/                # Next.js App Router pages & layouts
├── components/         # Reusable UI components
├── lib/                # Firebase, utils, and helper functions
├── store/              # Zustand store for state management
├── styles/             # Tailwind CSS and global styles
├── public/             # Static assets (screenshots, logos, etc.)
├── package.json
└── README.md

---

🚀 Deployment

This project is optimized for Vercel deployment:

1. Push your project to GitHub/GitLab.
2. Connect repository on Vercel.
3. Add environment variables in the Vercel dashboard.
4. Deploy 🚀

Optional: Configure a custom domain via Hostinger.

---

📜 License

This project is licensed under the MIT License – you are free to use, modify, and distribute.

---

🙌 Acknowledgements

• Clerk for authentication
• Firebase for backend & storage
• shadcn/ui for beautiful components
• Vercel for hosting
• Inspired by Dropbox ✨