🔐 Dev Vault

A Developer’s Personal Library for Code Snippets, Knowledge, and Web-Sourced Insights.

Dev Vault is a productivity-focused MERN application built for developers who constantly jump between tabs, tutorials, Stack Overflow threads, and half-written snippets. Instead of losing useful code in screenshots, bookmarks, and random notes, Dev Vault gives you a clean, structured, and searchable home for everything you discover.

It also includes a fully functional Chrome Extension that captures code from any website with a single click — and syncs instantly with your dashboard.

This project was built with one intention:

If developers had a “Notion for code”, how would it look?
Dev Vault is the answer.

---

🔐 Authentication Screens

✨ Signup Page

---

🔑 Login Page

---

🌟 Why I Built Dev Vault

Every developer keeps hundreds of tiny code fixes, regex patterns, API calls, and useful snippets that they copy daily but forget just as quickly.
Most of them get buried in:

• Bookmarks
• Screenshots
• Notepad files
• Chat messages
• Browser history

I wanted a workflow tool that feels natural — something that captures snippets instantly without breaking focus.
Dev Vault became that tool.

It’s small, fast, practical, and made specifically for real developer life.

---

🚀 Features That Actually Matter

🧠 Smart Snippet Management

• Create, edit, delete, and instantly search snippets
• Add unlimited tags (Many-to-Many relationship)
• Filter snippets in milliseconds
• Clean, distraction-free reading experience

🔗 Chrome Extension

• Select → Right-click → “Save to Dev Vault”
• Auto-detects content type and generates a meaningful title
• Real-time syncing — no manual refresh needed

🔒 Robust Auth System

• JWT-based login & registration
• HttpOnly cookies for security
• BCrypt hashed passwords

🎨 Developer-First UI/UX

• Minimal dark mode design
• Responsive sidebar + grid layout
• Smooth, subtle animations
• Toast notifications (no intrusive popups)

---

🛠️ Tech Stack

Frontend

• React.js (Vite)
• CSS Modules
• Axios
• React Router DOM

Backend

• Node.js
• Express.js

Database

• MongoDB (Atlas)
• Mongoose ODM

Chrome Extension

• Manifest V3

---

🗄️ Database Design

Even though MongoDB is a NoSQL database, the design follows DBMS principles:
Normalization, Constraints, Indexing, and Relationship Mapping

📘 ER Relationships

• User → Snippets: One-to-Many
• Snippets ↔ Tags: Many-to-Many

🧬 Collections

User

• _id — ObjectId
• username — String
• email — String (unique)
• password — Hashed

Snippet

• _id
• user — ObjectId (ref: User)
• title
• content
• language
• tags — Array of ObjectIds (ref: Tag)

Tag

• _id
• name
• user — ObjectId
• Composite Unique Index: { user, name }
  → prevents duplicate tags per user

---

⚙️ Installation Guide

1. Clone the Repository

git clone https://github.com/KeertanaGupta/Dev-Vault.git
cd Dev-Vault

---

2. Backend Setup

cd backend
npm install

Create .env inside backend/:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
NODE_ENV=development

Run backend:

npm run dev

---

3. Frontend Setup

cd frontend
npm install
npm run dev

---

4. Chrome Extension Setup

1. Open Chrome → chrome://extensions
2. Enable Developer Mode
3. Click Load Unpacked
4. Select the extension/ folder
5. Pin the extension

---

📡 API Endpoints

Method	Endpoint	Purpose	Access
POST	/api/users/register	Register new user	Public
POST	/api/users/login	Login & set cookie	Public
GET	/api/users/profile	Fetch logged-in user	Private
GET	/api/snippets	Get all snippets	Private
POST	/api/snippets	Add new snippet	Private
PUT	/api/snippets/:id	Update snippet	Private
DELETE	/api/snippets/:id	Delete snippet	Private
GET	/api/tags	Get tags	Private

---

📸 Screenshots

🖥️ Dashboard (Dark Mode)

🔗 Chrome Extension

---

---

🔮 Future Roadmap

• Syntax highlighting for all languages
• Public/Private snippet sharing
• VS Code extension integration
• AI-based snippet categorization
• Keyboard shortcut: Quick Add Snippet
• Folder system for advanced organization