Skip to content

README.md

Latest commit

 

History

History
170 lines (132 loc) · 4.96 KB

README.md

File metadata and controls

170 lines (132 loc) · 4.96 KB

Password Manager with MongoDB

A full-stack password manager application built with React, Node.js, and MongoDB.

🏗️ Project Structure

password_manager_mongodb/
├── frontend/          # React frontend application
│   ├── src/
│   │   ├── components/
│   │   │   ├── Manager.jsx    # Main password manager component
│   │   │   └── Navbar.jsx     # Navigation component
│   │   ├── App.jsx           # Main App component
│   │   └── main.jsx         # React entry point
│   ├── package.json         # Frontend dependencies
│   ├── vite.config.js      # Vite configuration
│   └── index.html          # HTML template
├── backend/           # Node.js backend server
│   ├── server.js      # Express server with MongoDB integration
│   ├── package.json   # Backend dependencies
│   └── .env          # Environment variables
└── README.md         # This file

🚀 Features

  • ✅ Add Passwords: Store website, username, and password combinations
  • ✅ View Passwords: Display all saved passwords in a clean table
  • ✅ Edit Passwords: Modify existing password entries
  • ✅ Delete Passwords: Remove unwanted password entries
  • ✅ Copy to Clipboard: One-click password copying
  • ✅ Show/Hide Password: Toggle password visibility
  • ✅ Responsive Design: Works on desktop and mobile devices
  • ✅ Toast Notifications: User feedback for all actions
  • ✅ MongoDB Integration: Persistent data storage

🛠️ Tech Stack

Frontend

  • React - UI framework
  • Vite - Build tool and dev server
  • Tailwind CSS - Styling framework
  • React Toastify - Toast notifications
  • Lord Icon - Animated icons

Backend

  • Node.js - Runtime environment
  • Express - Web framework
  • MongoDB - Database
  • CORS - Cross-origin resource sharing
  • dotenv - Environment variable management

📦 Installation

Prerequisites

  • Node.js (v14 or higher)
  • MongoDB (local installation or MongoDB Atlas)

Setup

  1. Clone the repository

    git clone <repository-url>
cd password_manager_mongodb

  2. Install Backend Dependencies

    cd backend
npm install

  3. Install Frontend Dependencies

    cd ../frontend
npm install

  4. Configure Environment Variables Create a .env file in the backend directory:

    MONGO_URI=mongodb://localhost:27017

    For MongoDB Atlas, use your connection string:

    MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net

  5. Start MongoDB

    • Local MongoDB: Ensure MongoDB service is running
    • MongoDB Atlas: Ensure your cluster is running and accessible

🚀 Running the Application

Start Backend Server

cd backend
node server.js

The backend will start on http://localhost:3000

Start Frontend Development Server

cd frontend
npm run dev

The frontend will start on http://localhost:5173

Access the Application

Open your browser and navigate to http://localhost:5173

📡 API Endpoints

  • GET / - Retrieve all passwords
  • POST / - Save a new password
  • DELETE / - Delete a password by ID

🔒 Security Note

⚠️ Important: This is a demonstration project. For production use, consider implementing:

  • Password encryption/hashing
  • User authentication and authorization
  • HTTPS/SSL encryption
  • Input validation and sanitization
  • Rate limiting
  • Security headers

📝 Usage

  1. Add a Password: Fill in the website, username, and password fields, then click "Add"
  2. View Passwords: All saved passwords are displayed in the table below the form
  3. Copy Password: Click the copy icon next to any password to copy it to clipboard
  4. Edit Password: Click the "Edit" button to modify an existing entry
  5. Delete Password: Click the "Delete" button to remove an entry
  6. Show/Hide Password: Click the "Show" button to toggle password visibility in the form

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

🐛 Troubleshooting

Common Issues

  1. Connection Refused Error

    • Ensure MongoDB is running
    • Check the MONGO_URI in your .env file
    • Verify the backend server is running on port 3000

  2. CORS Issues

    • Ensure the backend CORS middleware is properly configured
    • Check that frontend is making requests to the correct backend URL

  3. Dependencies Issues

    • Delete node_modules and package-lock.json
    • Run npm install again in both frontend and backend directories

📞 Support

If you encounter any issues or have questions, please create an issue in the repository.