🔐 Secure Password Generator

🎯 The Learning Goal

This project was built with a specific objective: to master React Hooks and State Management.

While the output is a simple password generator, the engineering challenge was to understand how to synchronize multiple independent states (length, numbers, special characters) to trigger a unified output (the password) efficiently. It was an exercise in analyzing UI structure and connecting disparate elements into a cohesive logic flow.

🔗 Live Demo

Click here to generate a Password

⚡ Features

• Customizable Length: A slide rule to adjust password complexity from short to ultra-secure.
• Character Control: Granular control to include or exclude Numbers and Special Characters.
• Instant Feedback: The password regenerates automatically whenever parameters are tweaked.
• Clipboard Integration: A one-click "Copy" feature that writes the generated password directly to the user's clipboard.

🧠 Technical Deep Dive (What I Learned)

Building this project pushed my understanding of React's core philosophy:

1. State Synchronization: using useState to track checkbox toggles and slider values.
2. Side Effects (useEffect): I learned how to trigger the password generation logic only when specific dependencies (length, numberAllowed, charAllowed) changed.
3. Optimization (useCallback): Instead of recreating the generation function on every render, I utilized useCallback to cache the function, improving performance.
4. Ref Hooks (useRef): Used to create a reference to the password input field, enabling the "Copy to Clipboard" functionality to select the text programmatically.

🛠️ Tech Stack

• Framework: React.js (Vite)
• Styling: Tailwind CSS (for rapid UI development and responsiveness)

🏃‍♂️ How to Run Locally

1. Clone the repository:

   git clone https://github.com/tsdebug/password-generator_proj

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

---

Coded with curiosity and a focus on optimization.