PassOP – Password Manager

A MERN stack password manager with secure storage, clipboard copy, and full CRUD — built to learn full-stack development end to end.

MongoDB

Express.js

React.js

Node.js

Tailwind CSS Vite

Vite

Source Code Live Site

MERN

Stack

MongoDB + LocalStorage

Storage

CRUD + Clipboard

Features

Why I built this

I wanted a project that would force me to wire together a complete full-stack application from scratch — no tutorials, no starters. Password management is a relatable problem with real security considerations, which made it a better learning ground than a to-do list. Building something I'd actually use kept me motivated throughout.

How it works

The React frontend talks to an Express API that performs CRUD operations on a MongoDB collection. Passwords are stored in MongoDB for persistence, with localStorage as a fallback for offline access. The UI lets users add a site name, username, and password, then copy any field to clipboard with a single click. Edit and delete operations are handled in-place without page reloads. Tailwind CSS keeps the interface clean and responsive.

Key decisions

Design choices

Dual storage: MongoDB + localStorage

Relying solely on a cloud database means the app breaks when the server is down. Syncing to localStorage as well gives offline resilience — the user can still access their passwords even when the backend isn't reachable.

Clipboard API over form copying

Selecting and copying a password manually is error-prone. Using the Clipboard API to copy with a button click improves usability significantly, especially for long generated passwords.

Challenges

Problems solved

Deciding how much security to implement

A real password manager needs end-to-end encryption. For this learning project, I made a deliberate call to focus on the full-stack architecture first and document the security limitations clearly. Understanding where the security gaps are is itself a valuable learning outcome.

What I learned

This was the project that made me confident in the MERN stack. Wiring a React frontend to an Express backend with MongoDB for the first time demystified a lot of concepts I'd only read about. I also learned that even small UX details — like a clipboard copy button — have a big impact on how usable an app feels.

Ezi Website

TextUtils