Skip to content

Latest commit

 

History

History
110 lines (77 loc) · 2.92 KB

README.md

File metadata and controls

110 lines (77 loc) · 2.92 KB
Raw

NextJS Dropbox Clone

A clone of Dropbox built with Next.js, React, and other technologies.

Table of Contents

Features

  • Modern Stack: Built with Next.js, React, Firebase, Zustand and other modern web technologies.
  • Responsive Design: Ensures a seamless experience across various devices.
  • Upload Functionality: Users can upload files with any file type.
  • User Authentication: Secure user authentication for personalized experiences.
  • CRUD Operations: Users can edit filename, and can delete any file.
  • Download Functionality: Allows users to download files.
  • Sort Files: Allow users to sort files by date of uploaded files.
  • Toast Notifications: Display notifications for uploading, renaming, deleting files indicating the file state in app for better Developer Experience(DX).

Demo

Check out the live demo https://next-js-dropbox-clone.vercel.app

Installation

  1. Clone the repository:

    git clone https://github.com/Shaban-Eissa/NextJS-Dropbox-Clone.git

  2. Navigate to the project directory:

    cd NextJS-Dropbox-Clone

  3. Install dependencies:

    npm install

  4. Create a new Project in Clerk https://clerk.com

  5. Create .env file:

     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_public_key
 CLERK_SECRET_KEY=your_clerk_secret_key

    replace you_clerk_public_key, your_clerk_secret_key with your clerk credentials.

  6. Replace configs in firebase.ts with your configs:

    const firebaseConfig = {
 apiKey: your_api_key,
 authDomain: your_auth_domain,
 projectId: your_project_id,
 storageBucket: your_storage_bucket,
 messagingSenderId: your_messaging_sender_id,
 appId: your_app_id,
 };

Usage

  1. Start the development server:

    npm run dev

  2. Open your browser and visit http://localhost:3000.

Technologies

This project utilizes a robust stack of modern technologies for efficient development and optimal user experience:

  • Next
  • React
  • Clerk Auth
  • Zustand
  • Firebase
  • Typescript
  • TailwindCSS
  • Next-Themes
  • React-Hot-Toast

Contributing

Contributions are welcome! Please follow these guidelines:

  1. Fork the repository.
  2. Create a new branch for your feature/bugfix: git checkout -b feature-name.
  3. Commit your changes: git commit -m 'Add some feature'.
  4. Push to the branch: git push origin feature-name.
  5. Open a pull request.