https://github.com/msalahz/password-gen
A simple password generator tool built by React
https://github.com/msalahz/password-gen
eslint gh-pages pnpm prettier react-compiler reactjs tailwindcss typescript vite
Last synced: 2 months ago
JSON representation
A simple password generator tool built by React
- Host: GitHub
- URL: https://github.com/msalahz/password-gen
- Owner: msalahz
- Created: 2025-03-02T13:03:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-15T17:10:04.000Z (11 months ago)
- Last Synced: 2025-05-15T18:22:26.140Z (11 months ago)
- Topics: eslint, gh-pages, pnpm, prettier, react-compiler, reactjs, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://msalahz.github.io/password-gen/
- Size: 1.04 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Password Generator Web Tool
A simple, user-friendly password generator built with React, TypeScript, and Vite.
## 🔗 Live Demo
Try it now: [Password Generator](https://msalahz.github.io/password-gen/)
## ✨ Features
- Generate secure passwords with customizable options
- Adjust password length
- Include/exclude uppercase letters, lowercase letters, numbers, and special characters
- Copy passwords to clipboard with one click
- Modern, responsive UI
## 🚀 Getting Started
### Prerequisites
- Node.js (v14 or higher)
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/msalahz/password-gen.git
cd password-gen
```
2. Install dependencies:
```bash
npm install
# or
yarn install
```
3. Run the development server:
```bash
npm run dev
# or
yarn dev
```
4. Open your browser and navigate to `http://localhost:5173`
## 🛠️ Built With
- [React](https://reactjs.org/) - UI library
- [TypeScript](https://www.typescriptlang.org/) - Type safety
- [Vite](https://vitejs.dev/) - Build tool and development server
## 📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default tseslint.config({
extends: [
// Remove ...tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
],
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
});
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x';
import reactDom from 'eslint-plugin-react-dom';
export default tseslint.config({
plugins: {
// Add the react-x and react-dom plugins
'react-x': reactX,
'react-dom': reactDom,
},
rules: {
// other rules...
// Enable its recommended typescript rules
...reactX.configs['recommended-typescript'].rules,
...reactDom.configs.recommended.rules,
},
});
```