🔐 Password Generator – React + Vite

A modern, customizable password generator built with React Hooks and Tailwind CSS, focused on clean state management, controlled components, and optimized re-renders.

🌐 Live Demo: https://dhruv-gupta-dev.github.io/Password_Generator/

---

📌 Project Overview

This project generates secure, customizable passwords with dynamic configuration options. It was built to strengthen understanding of:

• React Hooks lifecycle
• Controlled vs uncontrolled inputs
• Random generation logic
• Clipboard API integration
• Static deployment with GitHub Pages

The goal was not just to build a UI — but to implement clean, scalable React patterns.

---

🚀 Features

• Adjustable password length (6–100)

• Toggle inclusion of:

  • Numbers
  • Special characters

• Instant password regeneration on configuration change

• Copy-to-clipboard functionality

• Responsive UI using Tailwind CSS

• Fully controlled React components

• Optimized logic using useCallback

---

🧠 Technical Highlights

✅ Hook Optimization

Used:

• useState for state management
• useEffect for automatic password regeneration
• useCallback to memoize generation and copy logic
• useRef for direct DOM selection control

✅ Clean Dependency Management

Carefully structured dependency arrays to prevent unnecessary re-renders.

✅ Edge Case Handling

• Fixed off-by-one random index bug
• Converted range input to numeric type explicitly
• Converted checkboxes to controlled components

---

🛠 Tech Stack

• React (Functional Components)
• Vite
• Tailwind CSS
• JavaScript (ES6+)
• GitHub Pages (Deployment)

---

📂 Project Setup

Install & Run Locally

git clone https://github.com/dhruv-gupta-dev/Password_Generator.git
cd Password_Generator
npm install
npm run dev

Open:

http://localhost:5173

---

🏗 Production Build

npm run build

The optimized static files are generated inside the dist/ folder.

---

🚀 Deployment Strategy

Deployed using:

• Vite production build
• gh-pages package
• GitHub Pages hosting

This project demonstrates understanding of static site deployment workflows.

---

🔒 Future Improvements

• Implement crypto.getRandomValues() for cryptographically secure randomness
• Add password strength indicator
• Add visual copy success feedback
• Add accessibility improvements (ARIA attributes)
• Refactor into reusable component structure

---

📈 What This Project Demonstrates

• Strong understanding of React fundamentals
• Clean state-driven UI logic
• Awareness of performance considerations
• Ability to deploy production builds
• Attention to small but important implementation details

---

👨‍💻 Author

Dhruv Gupta @dhruv-gupta-dev

---

⭐ If you found this project interesting, feel free to star the repository.