A modern, responsive web application for storing, managing, and organizing files in the cloud. Built with Next.js, Firebase, and tailored with a clean, user-friendly interface.
- File Management: Upload, view, download, and delete files
- Folder Structure: Create folders and organize files inside them
- User Authentication: Google OAuth login via NextAuth
- Responsive Design: Works seamlessly on mobile and desktop devices
- Storage Dashboard: Track storage usage and limits
- File Filtering: Sort and filter files by type, date, and size
- Trash Functionality: Recover or permanently delete files from trash
- Dark/Light Mode: Auto-detects system preference with Tailwind CSS
- Frontend: Next.js 13 (App Router), React 18
- Styling: Tailwind CSS, DaisyUI
- Backend: Firebase (Firestore & Storage)
- Authentication: NextAuth with Google Provider
- File Handling: Firebase Storage
- Database: Firestore Database
- Hosting: Vercel (recommended)
- Node.js (v16 or higher)
- Yarn or npm
- Firebase account
- Google Cloud account (for Google OAuth)
Create a .env file in the root directory with the following:
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXTAUTH_SECRET=random_string_for_encryption
NEXTAUTH_URL=http://localhost:3000
FIREBASE_API_KEY=your_firebase_api_key
-
Clone the repository:
git clone https://github.com/adarsh1278/mini-cloud.git cd mini-cloud -
Install dependencies:
yarn install # or npm install -
Start the development server:
yarn dev # or npm run dev -
Open http://localhost:3000 in your browser.
- Create a new Firebase project in the Firebase Console
- Enable Firestore Database
- Enable Storage
- Create a Web App and copy configuration
- Update Firebase config in
src/config/Firebase.js - Set up security rules for Firestore and Storage
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API routes
│ │ ├── auth/ # Auth pages
│ │ ├── folder/ # Folder view pages
│ │ ├── myfiles/ # My files page
│ │ └── trash/ # Trash page
│ ├── assets/ # Project assets
│ ├── components/ # React components
│ │ ├── common/ # Common components
│ │ ├── file/ # File-related components
│ │ ├── folder/ # Folder-related components
│ │ └── storage/ # Storage-related components
│ ├── config/ # Configuration files
│ ├── context/ # React context providers
│ ├── data/ # Static data
│ └── services/ # API service functions
└── ...
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Adarsh Tiwari - GitHub - Web Developer
Made with ❤️ by Adarsh Tiwari