Discover a state-of-the-art cloud storage solution akin to Google Drive, powered by cutting-edge technologies such as React, Next.js, Shadcn, Convex, and Clerk. This platform empowers users to effortlessly manage and share files with unparalleled performance, robust security features, and intuitive user interfaces.
Embrace the versatility of multi-organization support, where each organization enjoys distinct assets and the capability to invite members seamlessly. Experience the convenience of file management with functionalities including delete and restore options, along with the ability to mark files as favorites for quick access.
- React: A JavaScript library for building user interfaces.
- Next.js: A React framework for server-side rendering and generating static websites.
- Convex: A backend-as-a-service that simplifies building scalable applications.
- Clerk: Authentication and user management made easy.
- Shadcn: A component library for building consistent and accessible user interfaces.
- Live Demo: Cloudix Demo Link
- YouTube Demo: Youtube Link
- Node.js (v18.x or higher)
- npm (v7.x or higher) or yarn (v1.x or higher)
- Convex Account: Convex Quickstart
- Clerk Account: Clerk Quickstart
-
Clone the repository:
git clone https://github.com/Mohammed-Abdelhady/Cloud-Storage-next.js-convex-clerk-shadcn.git cd Cloud-Storage-next.js-convex-clerk-shadcn
-
Environment Variables: Copy
.env.local.example
to.env.local
and fill in the required environment variables. Ensure to update the following variables specific to Clerk and Convex:cp .env.local.example .env.local # Update .env.local with the necessary variables, including CLERK_HOSTNAME and CLERK_WEBHOOK_SECRET for Clerk integration.
-
Create Webhook from Clerk:
- Log in to your Clerk dashboard and create a webhook for integration. Update the
CLERK_WEBHOOK_SECRET
environment variable with the generated webhook secret, and update convex environment from setting and addCLERK_WEBHOOK_SECRET
CLERK_HOSTNAME
- Log in to your Clerk dashboard and create a webhook for integration. Update the
-
Install Dependencies:
npm install
-
Run the Development Server:
npm run dev
- Docker: Install Docker
- Docker Compose: Install Docker Compose
-
Build the Docker Image:
docker-compose build
-
Start the Containers:
docker-compose up -d
- The
docker-compose up -d
command runs the containers in detached mode, allowing them to run in the background.
- The
-
Stopping the Containers:
docker-compose down
- The
docker-compose down
command stops and removes the containers, networks, and volumes created byup
.
- The
docker-compose build
: Builds the Docker images defined in thedocker-compose.yml
file.docker-compose up -d
: Starts the services defined in thedocker-compose.yml
file in detached mode.docker-compose down
: Stops and removes the services, networks, and volumes defined in thedocker-compose.yml
file.
We welcome contributions! Please read our Contributing Guide in the repository to learn how you can help.
This project is licensed under the MIT License.