GitHunt
BE

be-a-guptaji/Password-Manager

PassSafe is a lightweight ๐Ÿ” personal password manager built with React, Vite, and TailwindCSS that lets users securely store, view, edit, delete, and copy passwords ๐Ÿ“‹. It features real-time ๐Ÿ”” notifications, password visibility toggling ๐Ÿ‘๏ธ, clipboard support, and a clean ๐ŸŽจ UI ideal for learning and showcasing CRUD-based frontend skills ๐Ÿš€.

๐Ÿ” PassSafe - Personal Password Manager

License
Status
React
Vite
TailwindCSS


๐Ÿ“– About The Project

PassSafe - Personal Password Manager is a modern web-based application that helps users securely store, manage, edit, delete, and copy their passwords from a single dashboard.

Built using React, Vite, and TailwindCSS, PassSafe focuses on simplicity, speed, and user experience with a clean UI and real-time feedback system.


โœจ Key Features

  • ๐Ÿ” Add & Store Passwords โ€“ Save site name, URL, username, and password.
  • ๐Ÿ‘ Show / Hide Password โ€“ Toggle password visibility.
  • ๐Ÿ“‹ One-Click Copy โ€“ Copy username or password to clipboard.
  • โœ๏ธ Edit Passwords โ€“ Modify existing credentials.
  • ๐Ÿ—‘ Delete Passwords โ€“ Secure deletion with confirmation.
  • ๐Ÿ”” Live Popup Notifications โ€“ Real-time alerts.
  • ๐ŸŽจ Modern UI โ€“ Built with TailwindCSS.
  • โšก Fast Performance โ€“ Powered by Vite.

๐Ÿ“ธ Screenshots

Main Dashboard

Main Dashboard


๐Ÿ“ Directory Structure

The project is organized as follows:

Directory structure:
โ””โ”€โ”€ be-a-guptaji-password-manager/
    โ”œโ”€โ”€ README.md
    โ”œโ”€โ”€ index.html
    โ”œโ”€โ”€ package.json
    โ”œโ”€โ”€ postcss.config.js
    โ”œโ”€โ”€ tailwind.config.js
    โ”œโ”€โ”€ vite.config.js
    โ”œโ”€โ”€ .eslintrc.cjs
    โ””โ”€โ”€ src/
        โ”œโ”€โ”€ App.css
        โ”œโ”€โ”€ App.jsx
        โ”œโ”€โ”€ index.css
        โ”œโ”€โ”€ main.jsx
        โ””โ”€โ”€ components/
            โ”œโ”€โ”€ Footer.jsx
            โ”œโ”€โ”€ Manager.jsx
            โ””โ”€โ”€ Navbar.jsx

Key Folders and Files:

  • /components: Contains reusable UI components.
  • Manager.jsx: Core logic for password management.
  • Navbar.jsx: Top navigation branding.
  • Footer.jsx: Application footer.
  • main.jsx: React entry point.

๐Ÿ—๏ธ Architecture

The system follows a simple client-server architecture:

  • Frontend (React + TailwindCSS): Handles UI, state, and interactions.
  • Backend API (Local JSON Server at :3000): Stores and retrieves passwords.
  • UUID: Generates unique IDs for password entries.
  • Clipboard API: Handles copy actions.
graph TD
    U[๐Ÿ‘ค User] --> UI[๐Ÿ’ป React Frontend]
    UI --> API[โš™๏ธ Local API :3000]
    API --> DB[(๐Ÿ—„๏ธ Password Storage)]
Loading

๐Ÿ›  Built With

  • Frontend: React 18, Vite 5, TailwindCSS 3
  • State Management: React Hooks
  • Utilities: UUID
  • Styling: TailwindCSS
  • Linting: ESLint

โš™๏ธ Getting Started

Prerequisites

  • Node.js 18+
  • npm / yarn / pnpm
  • Local API server running at http://localhost:3000

Installation

git clone https://github.com/be-a-guptaji/be-a-guptaji-password-manager.git
cd be-a-guptaji-password-manager
npm install

Run

npm run dev

Visit:

http://localhost:5173

Backend API must run at:

http://localhost:3000

๐Ÿ›ฃ๏ธ Roadmap

  • Add & Store Passwords
  • Copy to Clipboard
  • Edit & Delete Passwords
  • Popup Notifications
  • Encrypted Storage
  • Authentication
  • Cloud Database
  • Mobile App Version

๐Ÿ“œ License

MIT License ยฉ 2025 Aryan Baadlas


๐Ÿ“ฌ Contact

๐Ÿ‘จโ€๐Ÿ’ป Aryan Baadlas
๐Ÿ“ง aryanbaadlas@gmail.com


โญ Show some love!

If you like this project, give it a star โญ on GitHub!