CloudSave is a Dropbox-inspired cloud storage platform built with modern web technologies. It leverages Next.js for the frontend, Clerk for authentication, Shadcn for a sleek user interface, Zustand for state management, React Dropzone for file uploading, and Firebase for the backend infrastructure.
- User Authentication: CloudSave uses Clerk for secure and seamless user authentication.
- Intuitive UI: Shadcn provides a visually appealing and responsive user interface, ensuring an excellent user experience.
- State Management: Zustand is employed for efficient state management, providing a robust foundation for dynamic updates and interactions.
- File Upload: React Dropzone facilitates easy drag-and-drop file uploads, enhancing user convenience.
- Backend Storage: Firebase is used as the backend infrastructure for secure and scalable file storage.
- Dark and Light Mode: CloudSave offers both dark and light mode options to cater to users' preferences for a personalized experience.
- Responsive Design: The application is fully responsive, ensuring a seamless experience across various devices and screen sizes.
Live URL : https://cloud-save.vercel.app/
Dark Mode:
Light Mode:
Sign-in Modal:
Dashboard:
Completely Responsive:
Before you begin, ensure you have the following tools installed:
- Node.js and npm
- Firebase account and project setup
- Clerk account and API keys
-
Clone the repository:
git clone https://github.com/yourusername/cloudsave.git
-
Navigate to the project directory
cd CloudSave -
Install dependencies
npm install
-
Create a
.env.localfile in the project root and add the following configuration:NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= CLERK_SECRET_KEY=
- Start the development server:
or
npm run devyarn dev - Open your browser and navigate to http://localhost:3000.
-Next.js - For front-end development
-Clerk - For user-authenication
-Shadcn - For UI integration
-Zustand - For state-management
-React-Dropzone - For drag-'n'-drop
-Firebase - For backend integration