DropVault - A Secure Personal File Storage 🔒

View completed workdropvault.netlify.app

Drop Vault - A Secure Personal File Storage🔒

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 on the settings page.

Real-time Updates: File list updates automatically when you upload or delete files.

🖥️ Screenshots

DropVault Homepage

DropVault - My Dashboard

DropVault- Upload Files

🛠️ 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

0 likes · 18 views · May 28, 2025

DropVault - A secure, user-friendly web app for personal file storage, offering seamless file upload, management, and access with a strong focus on privacy.

Timeline

May 24, 2025 - May 24, 2025