Next Drive is a powerful web application that closely resembles Google Drive. It is designed to simplify file management tasks such as uploading, organizing files into folders (including nested folders), and offering a comprehensive search functionality, among other essential features.
- Introduction
- Preview
- Getting Started
- Project Structure
- Usage
- Configuration
- Deployment
- Contributing
- License
Your all-in-one solution for efficient cloud-based file management. This web application simplifies the process of uploading, organizing, and accessing your files securely, no matter where you are. Whether you need to store personal documents, collaborate with others, or simply find a specific file in a massive collection, Next Drive has you covered.
Next Drive is built using a variety of technologies and frameworks that make it powerful and efficient. Here's an overview of the key components in our tech stack:
-
Next.js: A popular React framework for building server-rendered and statically generated web applications.
-
NextAuth.js: An authentication library for Next.js that simplifies the implementation of authentication, including OAuth providers, JWT, and more.
-
Firebase: A comprehensive platform for building web and mobile applications, including Firestore for NoSQL database, Firebase Storage for file storage, and Firebase Admin for server-side operations.
-
Tailwind CSS: A highly customizable CSS framework that allows for rapid UI development with utility-f first classes.
-
Shadcn UI: A UI library built using Tailwind CSS and Radix UI that provides a collection of copy-paste components for creating a consistent and stylish user interface.
-
Zod: A TypeScript-first schema validation and object serialization library.
Our tech stack is carefully chosen to provide a robust and scalable foundation for Next Drive, ensuring a fast and secure user experience.
To start working with Next Drive locally, follow these steps:
Before you begin, make sure you have the following prerequisites in place:
- Node.js installed on your machine.
- A Firebase project set up with the required API keys. Refer to the
.env.examplefile for specific details on the required keys.
- Clone the repository to your local machine:
git clone https://github.com/mohamed-lifa7/next-drive.git- Navigate to the project directory:
cd next-drive- Install the project dependencies using npm:
npm install- Create a
.envfile in the project's root directory and populate it with the necessary API keys and configuration information from the.env.examplefile.
cp .env.example .envEdit the .env file with your API keys and configuration details.
- Start the development server:
npm run dev- The Next Drive application should now be running locally at http://localhost:3000. You can access it in your web browser.
Now you have Next Drive set up locally on your machine and can start exploring and contributing to the project. If you encounter any issues or have questions, feel free to reach out to us.
Next Drive uses app directory instead of pages directory and follows a well-organized project structure to keep codebase clean and maintainable. Here's an overview of directories tree of the project:
│
├── .next
├── .git
├── public
├── node_modules
├── src
│ ├── app
│ │ ├── api
│ │ │ ├── auth
│ │ │ │ └── [...nextauth]
│ │ │ │ └── route.ts
│ │ │ └── ...
│ │ ├── auth
│ │ │ ├── error
│ │ │ │ └── page.tsx
│ │ │ ├── error.tsx
│ │ │ ├── signin
│ │ │ │ ├── page.tsx
│ │ │ │ └── profile-setup
│ │ │ │ └── page.tsx
│ │ │ └── ...
│ │ ├── contact
│ │ │ └── page.tsx
│ │ ├── ...
│ ├── components
│ │ ├── auth
│ │ │ ├── auth-buttons.tsx
│ │ │ ├── user-auth-form.tsx
│ │ │ └── who-am-i.tsx
│ │ ├── icons.tsx
│ │ ├── layout
│ │ │ ├── features.tsx
│ │ │ ├── footer.tsx
│ │ │ ├── ...
│ │ ├── others
│ │ │ ├── feedback-form.tsx
│ │ │ └── share-file-form.tsx
│ │ ├── ...
│ ├── context
│ │ ├── folder-navigation.context.tsx
│ │ ├── nextauth-provider.tsx
│ │ └── ...
│ ├── lib
│ │ ├── firebase
│ │ │ ├── file-utils.ts
│ │ │ ├── firebase-admin-config.ts
│ │ │ ├── ...
│ │ ├── site.ts
│ │ └── ...
│ ├── middleware.ts
│ ├── server
│ │ └── auth.ts
│ ├── styles
│ │ └── globals.css
│ └── types
│ ├── index.ts
│ └── schema.ts
├── components.json
├── next.config.mjs
├── next-end.d.ts
├── package.json
├── package-lock.json
├── postcss.config.cjs
├── prettier.config.mjs
├── README.md
├── tailwind.config.ts
├── tsconfig.json
├── .env
├── .env.example
├── .eslintrc.chs
├── .gitignore
└── ...
We welcome contributions from the community to help improve Next Drive. Whether you want to report a bug, suggest an enhancement, or contribute code, your help is greatly appreciated.
If you encounter a bug, have a feature request, or want to suggest improvements, please open an issue on our GitHub issue tracker. When submitting an issue, please provide as much detail as possible, including steps to reproduce the problem if applicable.
If you'd like to contribute code to Next Drive, please follow these steps:
- Fork the repository to your own GitHub account.
- Clone your forked repository to your local machine.
git clone https://github.com/mohamed-lifa7/next-drive.git- Create a new branch for your feature or bug fix.
git checkout -b feature-name- Make your changes and commit them with descriptive commit messages.
- Push your changes to your GitHub repository.
git push origin feature-name- Open a pull request (PR) to the main repository's main branch. Provide a clear title and description for your PR.
- Your PR will be reviewed, and any necessary feedback or changes will be discussed. Once your PR is approved, it will be merged into the main project.
To maintain code consistency, we use ESLint for JavaScript/TypeScript linting. Please make sure your code adheres to our coding standards. You can run ESLint using the following command:
npm run lintIf you have any questions or need further assistance, you can reach out to us through the contact section within the app or by creating an issue on GitHub.
Thank you for contributing to Next Drive! We appreciate your support and look forward to your contributions.
The configuration settings for Next Drive are stored in the .env.example file in the project's root directory. To configure the application, follow these steps:
-
Locate the
.env.examplefile in the project's root directory. -
Create a copy of the
.env.examplefile and rename it to.env. -
Open the newly created
.envfile in a text editor. -
Modify the configuration settings as needed, including API keys and environment-specific variables. Ensure that you provide the required API keys and credentials, as specified in the
.env.examplefile. -
Save the
.envfile with your changes.
The configuration settings in the .env file are used by Next Drive to connect to external services, manage environment variables, and customize the behavior of the application.
Note: Ensure that you keep sensitive information, such as API keys and credentials, confidential and do not share them publicly. Use environment variables and consider using a secrets management solution for added security.
To deploy Next Drive, we recommend using Vercel, a powerful platform for serverless deployment and hosting. Vercel is well-suited for Next.js applications and offers a seamless deployment process.
Note: While we recommend Vercel for its ease of use and seamless integration with Next.js, you can use other platforms like Netlify or Docker if you prefer. However, for the purpose of this guide, we'll stick with Vercel as our recommended deployment platform.
Follow these steps to deploy Next Drive on Vercel:
-
Visit the Vercel Next.js deployment guide to get started.
-
Sign up for a Vercel account if you don't already have one.
-
Connect your Vercel account to your GitHub repository where Next Drive is hosted.
-
Configure your deployment settings as needed.
-
Click the "Deploy" button.
During the setup, you need to define the all the environment variables
Vercel will automatically build and deploy your Next Drive application. Once the deployment is complete, you'll receive a URL where you can access your live application.
By deploying on Vercel, you can take advantage of its powerful features, such as automatic deployments on every push to your repository, SSL certificates, and easy scaling. It's an excellent choice for hosting Next.js applications.
Next Drive is open-source software released under the MIT License. You are free to use, modify, and distribute this software as per the terms of the license.
If you find Next Drive useful, consider supporting the project in one of the following ways:
-
Star the Repository: If you appreciate the work that has gone into Next Drive, please give it a star on GitHub. Your star helps us gain visibility and encourages more contributors to join the project.
-
Donate: If you'd like to buy us a virtual pizza (or a real one if you're feeling generous), check out our donation options on our GitHub main page. Your support keeps our code well-fed and happy!
Your support is like the extra cheese on our code pizza, making it even more delightful. Thanks for being a slice of the Next Drive community!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent