🔐 Crazy Passwords

A modern, secure password generator built with React and TypeScript that creates strong, memorable passwords using phrases and words.

✨ Features

• 🎯 Generate strong, memorable passwords using phrases
• 📏 Flexible password lengths (8-24 characters)
• 🔄 Two password generation modes:
  • Easy to Remember (phrase-based)
  • Maximum Security (complex combinations)
• 📊 Real-time password strength indicator
• 📋 One-click copy to clipboard
• 🎨 Modern, responsive UI
• ♿ Accessibility-focused design
• 📱 Mobile-friendly interface

🚀 Live Demo

View Live Demo

🛠️ Installation

1. Clone the repository:

git clone https://github.com/yourusername/crazy-passwords.git
cd crazy-passwords

2. Install dependencies:

npm install

3. Start the development server:

npm start

The app will open in your default browser at http://localhost:3000.

🏗️ Build

To create a production build:

npm run build

The build files will be created in the build/ directory.

🧪 Testing

Run the test suite:

npm test

🔧 Technology Stack

• React 19.1 - UI framework
• TypeScript 4.9 - Type safety and better developer experience
• CSS3 - Modern styling with flexbox and CSS Grid
• React Testing Library - Component testing
• Create React App - Project bootstrapping and build configuration

📖 Password Generation Logic

The app uses two main strategies for generating passwords:

1. Easy to Remember Mode

• Combines 3-4 common words or phrases
• Adds numbers for extra security
• Uses simple separators between words
• Maintains readability while ensuring security

2. Maximum Security Mode

• Uses 4-5 words or phrases
• Adds random symbols and numbers
• Implements random case variations
• Creates highly secure, complex passwords

🔐 Password Strength Calculation

The strength indicator evaluates passwords based on:

• Length (8-24 characters)
• Character variety (uppercase, lowercase, numbers, symbols)
• Word count in phrase-based passwords
• Overall complexity and uniqueness

🎨 UI/UX Features

• Intuitive button groups for options
• Real-time strength progress bar
• Smooth animations and transitions
• Responsive design for all screen sizes
• Clear visual feedback for actions
• Accessible color schemes
• Modern glassmorphism effects

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

📱 Mobile Responsiveness

The app is fully responsive and optimized for:

• Desktop screens
• Tablets
• Mobile phones
• Different orientations

🤝 Contributing

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

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Word list compilation
• React community
• Open-source contributors

📞 Support

For support, please open an issue in the GitHub repository.

---

Made with ❤️ by Vishal