You are browsing as a guest. Sign up (or log in) to start making projects!

CompVault

By @Ved

  • 1 Devlogs
  • 1 Total hours

CompVault is a simple password manager built with HTML, CSS, and JavaScript.
Ship #1

@Ved on CompVault

πŸ” CompVault

CompVault is a browser-based password manager built with HTML, CSS, and JavaScript.

The project started as a simple login screen and evolved into a feature-rich password management application. It provides a clean interface for storing, managing, searching, importing, and exporting passwords directly in the browser.

> ⚠️ This project is intended for learning and educational purposes.

✨ Features

Password Management

- βž• Add passwords
- ✏️ Edit passwords
- πŸ—‘οΈ Delete passwords
- πŸ” Search passwords

Security & Access

-πŸ”‘ Master password protection
- πŸ‘οΈ Show / Hide passwords
- πŸ“‹ Copy passwords to clipboard

Productivity

- 🎲 Random password generator
- πŸ“€ Export vault to JSON
- πŸ“₯ Import vault from JSON

User Experience

- πŸŒ™ Dark / Light theme
- πŸ’Ύ Local Storage persistence
- πŸ“± Responsive interface

πŸ› οΈ Built With

- HTML5
- CSS3
- JavaScript (Vanilla)

No frameworks or external libraries were used.

πŸ§ͺ Testing

1. Master Password
* Open https://compvault.netlify.app
* Create a master password
* Refresh the page
* Verify the same password unlocks the vault

2. Password Management

* Add a password
* Edit a password
* Delete a password

3. Search

* Search by website name
* Search by username

4. Password Generator

* Generate a random password
* Verify it appears in the password field

5. Show / Hide

* Reveal a password
* Hide it again

6. Copy Password

* Copy a password
* Paste it elsewhere to verify

7. Theme Switching

* Switch themes
* Refresh the page
* Verify the selected theme persists

8. Import / Export

* Export the vault
* Delete entries
* Import the exported file
* Verify data restoration

9. Persistence

* Add several passwords
* Refresh the page
* Verify all entries remain

Expected Result

All features should function correctly and data should persist between browser sessions.

πŸ€– AI Usage Declaration

Artificial intelligence tools were used during the development of this project as learning and productivity aids.

AI was primarily used to:

* Explain programming concepts
* Assist with debugging
* Suggest improvements and features
* Review code and provide feedback
* Help draft documentation

Made with ❀️ by Ved.

  • 1 devlog
  • 1h
Try project β†’ See source code β†’
Open comments for this post

@Ved on CompVault

1h 26m 23s logged

CompVault Development Log

I completed the first full version of CompVault, a password manager built using HTML, CSS, and JavaScript.
The project started as a simple login page with a fixed master password. Once the basic vault was functional, I gradually expanded the application by adding new features and enhancing the user experience.

Features Implemented

  • Master password protection
  • Ability to add passwords
  • Option to edit passwords
  • Capability to delete passwords
  • Search functionality
  • Show / Hide passwords
  • Option to copy passwords to the clipboard
  • Random password generator
  • Dark / Light theme switcher
  • Export the vault to JSON format
  • Import the vault from JSON format
  • Data persistence using Local Storage

Challenges Faced
One of the first challenges was figuring out how to display saved passwords on the page dynamically.
Initially, passwords were stored in a JavaScript array. I learned how to render data into HTML using template literals and update the page whenever changes were made.

Another challenge was ensuring that data was same between sessions.
I used Local Storage to solve this issue, which allowed the vault to retain saved passwords even after refreshing the page.

As more features were added, organizing the code became increasingly important.
Creating reusable functions like renderPasswords() and saveVault() made the application easier to manage and extend.

What I Learned
Through this project, I gained hands-on experience with:

  • Manipulating the Document Object Model (DOM)
  • Handling user events
  • Using Local Storage for data persistence
  • Rendering dynamic user interfaces
  • Performing Create, Read, Update, and Delete (CRUD) operations
  • Importing and exporting files
  • Creating responsive and visually appealing designs
  • Organizing and structuring a project effectively

Project Status
CompVault v1 is now complete and fully functional as a local, browser-based password manager.

Future Improvements
Although the application works well, I plan to add several features in future versions:

  • Password encryption using the Web Crypto API
  • Password strength analysis
  • Cloud synchronization
  • Support for multiple user accounts
  • Auto-lock functionality
  • Enhanced mobile experience

Reflection
This project began as a simple experiment and quickly evolved into one of the most comprehensive web applications I have ever built.
It was an excellent opportunity to practice JavaScript, improve my problem-solving abilities, and understand how various components of a web application work together. Overall, CompVault was both an enjoyable and educational experience, and it has significantly strengthened my ability to build more complex software projects in the future.

@Ved

CompVault Development Log

I completed the first full version of CompVault, a password manager built using HTML, CSS, and JavaScript.
The project started as a simple login page with a fixed master password. Once the basic vault was functional, I gradually expanded the application by adding new features and enhancing the user experience.

Features Implemented

  • Master password protection
  • Ability to add passwords
  • Option to edit passwords
  • Capability to delete passwords
  • Search functionality
  • Show / Hide passwords
  • Option to copy passwords to the clipboard
  • Random password generator
  • Dark / Light theme switcher
  • Export the vault to JSON format
  • Import the vault from JSON format
  • Data persistence using Local Storage

Challenges Faced
One of the first challenges was figuring out how to display saved passwords on the page dynamically.
Initially, passwords were stored in a JavaScript array. I learned how to render data into HTML using template literals and update the page whenever changes were made.

Another challenge was ensuring that data was same between sessions.
I used Local Storage to solve this issue, which allowed the vault to retain saved passwords even after refreshing the page.

As more features were added, organizing the code became increasingly important.
Creating reusable functions like renderPasswords() and saveVault() made the application easier to manage and extend.

What I Learned
Through this project, I gained hands-on experience with:

  • Manipulating the Document Object Model (DOM)
  • Handling user events
  • Using Local Storage for data persistence
  • Rendering dynamic user interfaces
  • Performing Create, Read, Update, and Delete (CRUD) operations
  • Importing and exporting files
  • Creating responsive and visually appealing designs
  • Organizing and structuring a project effectively

Project Status
CompVault v1 is now complete and fully functional as a local, browser-based password manager.

Future Improvements
Although the application works well, I plan to add several features in future versions:

  • Password encryption using the Web Crypto API
  • Password strength analysis
  • Cloud synchronization
  • Support for multiple user accounts
  • Auto-lock functionality
  • Enhanced mobile experience

Reflection
This project began as a simple experiment and quickly evolved into one of the most comprehensive web applications I have ever built.
It was an excellent opportunity to practice JavaScript, improve my problem-solving abilities, and understand how various components of a web application work together. Overall, CompVault was both an enjoyable and educational experience, and it has significantly strengthened my ability to build more complex software projects in the future.

Replying to @Ved
0

Followers

Loading…