.envVault

.envVault is a modern, secure, and user-friendly platform for managing, encrypting, and organizing your environment variables. Built with Next.js and React, it provides developers and teams with a seamless way to store, upload, and control access to sensitive configuration data.

---

🚀 Features

• Secure Storage:
  All environment variables are encrypted client-side using AES-256-GCM before being stored, ensuring only you can access your secrets.

• File Upload & Parsing:
  Upload .env files and automatically parse variables for easy import.

• Organization:
  Group your variables by project or environment for better management.

• Access Control:
  Only authenticated users can access their environment variables.

• Modern UI:
  Responsive, accessible, and visually appealing interface built with React, Tailwind CSS, and Lucide icons.

• Authentication:
  Simple login and signup flows to keep your data private.

---

🏗️ Project Structure

envvault/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
│   ├── auth/
│   │   ├── login/page.tsx
│   │   └── signup/page.tsx
│   ├── dashboard/page.tsx
│   └── setup/page.tsx
├── components/
│   ├── Navbar.tsx
│   ├── add-variable-modal.tsx
│   ├── edit-variable-modal.tsx
│   ├── file-upload-modal.tsx
│   ├── group-management.tsx
│   ├── variable-table.tsx
│   └── ui/
│       └── ... (UI primitives)
├── utils/
│   └── crypto.ts
├── public/
│   └── image.svg
├── package.json
└── README.md

---

🖥️ Main Components

app/page.tsx

• Landing page with navigation, hero section, feature cards, and footer.
• Uses Navbar, Button, Card, and Lucide icons for a polished look.

components/Navbar.tsx

• Responsive navigation bar with links to login and signup.

components/ui/

• Collection of reusable UI primitives (buttons, cards, dialogs, etc.) for consistent design.

utils/crypto.ts

• Handles all cryptographic operations:
  • AES-256-GCM encryption/decryption
  • PBKDF2 key derivation
  • Base64 encoding/decoding
• Ensures secrets are encrypted before storage.

---

🔒 Security

• Client-side encryption:
  Secrets are encrypted in the browser using a password-derived key. The server never sees your plaintext secrets or password.
• PBKDF2:
  Passwords are strengthened with 150,000 iterations and a random salt.
• AES-GCM:
  Modern, authenticated encryption for confidentiality and integrity.

---

📝 Usage

1. Clone the repository

git clone https://github.com/yourusername/envvault.git
cd envvault

2. Install dependencies

npm install

3. Run the development server

npm run dev

Visit http://localhost:3000 in your browser.

---

📦 Key Features in Detail

Secure Storage

• All variables are encrypted before leaving your device.
• Only you can decrypt them with your password.

File Upload

• Upload .env files.
• Variables are parsed and ready for secure storage.

Organization

• Group variables by project or environment.
• Easily manage large sets of secrets.

Access Control

• Authentication required for all sensitive actions.
• Only you can view or modify your data.

---

🛠️ Tech Stack

• Frontend: Next.js, React, Tailwind CSS
• UI: Lucide Icons, Custom UI primitives
• Crypto: Web Crypto API (browser & Node.js compatible)
• TypeScript: Type safety throughout

---

📂 Example Code Snippet

// Encrypt a value before storing
import { encryptValue } from "@/utils/crypto";

const encrypted = await encryptValue("MY_SECRET", "user-password");
// Store `encrypted` object in your backend or local storage

---

🤝 Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

---

📄 License

MIT License

---

👨‍💻 Author

Made for devs by devs.
© All rights reserved. {Current Year}