A clone of Dropbox built with Next.js, React, and other technologies.
- 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).
Check out the live demo https://next-js-dropbox-clone.vercel.app
-
Clone the repository:
git clone https://github.com/Shaban-Eissa/NextJS-Dropbox-Clone.git
-
Navigate to the project directory:
cd NextJS-Dropbox-Clone
-
Install dependencies:
npm install
-
Create a new Project in Clerk https://clerk.com
-
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. -
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, };
-
Start the development server:
npm run dev
-
Open your browser and visit https://localhost:3000.
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
Contributions are welcome! Please follow these guidelines:
- Fork the repository.
- Create a new branch for your feature/bugfix:
git checkout -b feature-name
. - Commit your changes:
git commit -m 'Add some feature'
. - Push to the branch:
git push origin feature-name
. - Open a pull request.