A modern, cloud-powered file management system built for the web
Features • Tech Stack • Getting Started • Usage • Contributing
FileFlux-Drive is a feature-rich file and folder management web application that brings desktop-like file organization to your browser. Built with cutting-edge web technologies, it provides seamless file uploads, intelligent organization, and real-time state management for an exceptional user experience.
- 📤 Secure File Uploads - Upload files and images with Cloudinary's robust cloud storage
- 📂 Smart Organization - Create folders, move files, and maintain a clean file structure
- 👀 In-Browser Preview - View files directly without downloading
- ⬇️ Quick Downloads - Download files with a single click
- 🔄 Real-Time Updates - Instant UI updates powered by Zustand state management
- ⚡ Lightning Fast - Built on Next.js for optimal performance and SEO
- 📱 Responsive Design - Works seamlessly across desktop, tablet, and mobile devices
- 🎨 Intuitive Interface - Clean, modern UI that's easy to navigate
| Layer | Technology |
|---|---|
| Frontend | Next.js 14 with App Router |
| State Management | Zustand |
| Networking | Axios |
| File Storage | Cloudinary |
| Database | Drizzle ORM |
| Language | TypeScript |
| Styling | Tailwind CSS (or your choice) |
Before you begin, ensure you have the following installed:
- Node.js (v18 or above) - Download here
- npm / yarn / pnpm - Package manager
- Cloudinary Account - Sign up for free
- Clone the repository
git clone https://github.com/AvatarN03/FileFlux-Drive.git
cd FileFlux-Drive- Install dependencies
npm install
# or
yarn install
# or
pnpm install- Configure environment variables
Create a .env.local file in the root directory:
# Cloudinary Configuration
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=your_upload_preset
# Database (if applicable)
DATABASE_URL=your_database_url
# Add other environment variables as needed- Run database migrations (if using Drizzle)
npm run db:push
# or
npx drizzle-kit push:pg- Start the development server
npm run dev
# or
yarn dev- Open your browser
Navigate to http://localhost:3000 and start managing your files!
FileFlux-Drive/
├── app/ # Next.js app directory (routes & pages)
│ ├── api/ # API routes
│ ├── (routes)/ # Application routes
│ └── layout.tsx # Root layout
├── components/ # Reusable React components
├── context/ # Zustand state stores
├── db/ # Database configuration
├── drizzle/ # Drizzle ORM schema & migrations
├── hooks/ # Custom React hooks
├── lib/ # Utility functions & helpers
├── public/ # Static assets
├── types/ # TypeScript type definitions
├── .env.local # Environment variables (not committed)
├── package.json # Dependencies & scripts
└── README.md # You are here!
- Click the Upload button or drag and drop files into the upload zone
- Files are automatically uploaded to Cloudinary with progress tracking
- Uploaded files appear instantly in your current folder
- Create Folder: Click the "New Folder" button and enter a name
- Navigate: Click on any folder to view its contents
- Move Files: Select files and use the "Move to" option to relocate them
- Preview: Click on any file to view it in the browser
- Download: Use the download icon to save files locally
- Delete: Select files and click the delete button to remove them
The easiest way to deploy your Next.js app is with Vercel:
- Build the production version:
npm run build- Start the production server:
npm startContributions are what make the open-source community amazing! Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow the existing code style and conventions
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
Found a bug or have a feature suggestion? Please open an issue with:
- A clear title and description
- Steps to reproduce (for bugs)
- Expected vs actual behavior
- Screenshots if applicable
This project is open-source and available under the MIT License.
AvatarN03
- GitHub: @AvatarN03
- Project Link: https://github.com/AvatarN03/FileFlux-Drive
- Next.js - The React Framework
- Cloudinary - Cloud Storage & Media Management
- Zustand - State Management
- Drizzle ORM - TypeScript ORM
If you find this project helpful, please consider giving it a ⭐️!
Made with ❤️ by AvatarN03