MediaVault

A secure and private media manager built with React + Vite.
MediaVault lets you store, tag, search, and favorite images and videos locally — all inside your browser using IndexedDB.
No external servers. No cloud. 100% private.

🌐 Live Demo: https://mediavault.vercel.app/

---

🚀 Features

• Local Media Storage – Add images/videos, stored directly in your browser (IndexedDB).
• Search & Filter – Quickly find media by tags or keywords.
• Favorites – Mark important files for quick access.
• Full-Screen Viewer – Preview media, edit tags, download, or delete.
• Offline-Ready – Works without an internet connection.
• Privacy First – No uploads to external servers.

---

🛠️ Tech Stack

• Frontend: React 18, Vite, CSS3
• Storage: IndexedDB (via browser)
• Deployment: Vercel

---

📂 Project Structure

mediavault/
├── public/
├── src/
│   ├── components/   # MediaCard, MediaGrid, UploadForm, Viewer
│   ├── hooks/        # Custom IndexedDB hooks
│   ├── pages/        # Main Vault page
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── package.json
├── vite.config.js
└── index.html

---

🔧 Setup

npm install
npm run dev

Open http://localhost:5173.

---

🌐 Deployment

Easily deploy using Vercel:

• Build command: npm run build
• Output folder: dist

---

📸 Screenshots

Mobile View

Desktop View

---

📅 Roadmap

• 🔒 Optional encryption for stored media
• ☁️ Cloud sync option
• 🏷 Bulk tagging

---

📄 License

This project is open source under the MIT License.

---

🏷 GitHub Topics

react vite javascript indexeddb mediavault frontend offline vercel