DropVault - A Secure Personal File Storage 🔒

DropVault is a modern, secure, and user-friendly web application for personal file storage. Effortlessly upload, manage, and access your files from anywhere, with privacy and security at the core.

You can check out the deployed app here: DropVault

🚀 Features

• Secure Cloud Storage: All files are encrypted and stored securely using Supabase Storage.
• Easy Drag & Drop Uploads: Upload images, PDFs, and documents with a simple drag-and-drop interface.
• File Management: View, download, and delete your files. Image thumbnails and file type icons for easy browsing.
• Private Access: Only you can access your files. Authentication is required for all file operations.
• Responsive UI: Beautiful, mobile-friendly design powered by React, Tailwind CSS, and Framer Motion.
• Account Management: Change your password and view your account details in the settings page.
• Real-time Updates: File list updates automatically when you upload or delete files.

---

🖥️ Screenshots

---

🛠️ Tech Stack

• Frontend: React, TypeScript, Vite
• Styling: Tailwind CSS, Framer Motion
• Auth & Storage: Supabase
• UI Icons: Lucide React

---

⚡ Getting Started

1. Clone the repository

git clone https://github.com/your-username/DropVault.git
cd DropVault

2. Install dependencies

npm install

3. Configure Environment Variables

Create a .env file in the root directory and add your Supabase credentials:

VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

Note: You can get these from your Supabase project dashboard.

4. Start the development server

npm run dev

The app will be available at http://localhost:5173.

---

📦 Build for Production

npm run build

The production-ready files will be in the dist/ directory.

---

📁 Project Structure

├── src/
│   ├── components/      # Reusable UI components (auth, files, layout)
│   ├── context/         # React context for authentication
│   ├── lib/             # Supabase client setup
│   ├── pages/           # Main pages (Home, Settings)
│   ├── types.ts         # TypeScript types
│   └── App.tsx          # Main app logic and routing
├── index.html           # App entry point
├── tailwind.config.js   # Tailwind CSS config
├── vite.config.ts       # Vite config
└── ...

---

🔒 Security & Privacy

• All files are private by default and accessible only to authenticated users.
• Passwords are never stored in the app; authentication is handled securely by Supabase.
• Environment variables are required for connecting to your own Supabase instance.

---

🤝 Feedback and Contribution

It is publicly open for any contribution. Bugfixes, new features, and extra modules are welcome.

• To contribute to code: Fork the repo, push your changes to your fork, and submit a pull request.
• To report a bug: If something does not work, please report it using GitHub Issues.

---

📬 Connect

• Email: chhetryaman3@gmail.com
• Twitter: @iamamanchhetri
• Website: Portfolio
• LinkedIn: @amankshetri

© 2025 Aman Kshetri 👨‍💻