Next.js Dropbox Clone

A cutting-edge cloud storage solution, combining the power of Next.js with secure authentication, and seamless integration with cloud storage services. Users can confidently manage their files and experience a modern and responsive interface across devices.

Features

• Upload various file types to Firebase Storage, emulating Dropbox functionality.
• Integrate complete CRUD functionality for seamless file management.
• Create an appealing UI/UX using the popular Shadcn library.
• Implement NextAuth Middleware for secure access control.
• Build a smooth login/logout flow with Clerk Authentication.
• Use loaders for visual feedback during data fetching.
• Implement a table view for files with metadata display.
• Enable users to download uploaded files directly to their devices.
• Implement drag-and-drop file uploads using React DnD library.
• Add a dark mode toggling feature for user interface customization.
• Utilize TypeScript for bug reduction and improved code robustness.

Tech Stack

• Next.js
• React.js
• Typescript
• Clerk Authentication
• Zustand
• Tailwind CSS
• ShadCN
• Firebase
• React Dropzone
• React Firebase Hooks
• React File Icon
• Pretty bytes

Installation

1. If you don’t have Node.js installed, install it from here (Node.js version >= 18.12.0 required).

2. Clone The Repo.

     git clone https://github.com/anoopraju31/nextjs-dropbox-clone

3. Install Dependencies

       npm install

4. Make a copy of the example environment variables file.

   On Linux systems:

   $ cp .env.local.example .env.local

   On Windows:

   $ copy .env.local.example .env.local

5. Create a new project in Clerk and add the API Key to the newly created .env.local file.

6. Create a new project in firebase and add the API Key to the newly created .env.local file.

7. Run Local

       npm run dev