Otp Generator

vivekhegde2000

A customizable OTP generator built with React, Vite, TypeScript, and Tailwind CSS. Generate secure OTPs with options for length and character types. Features a responsive design and easy GitHub Pages deployment.

Demo Download

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 uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC 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:

Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
Optionally add ...tseslint.configs.stylisticTypeChecked
Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})

OTP Generator

A customizable OTP (One-Time Password) generator built with React, Vite, TypeScript, and Tailwind CSS. This application allows users to generate secure OTPs with configurable options such as length and inclusion of uppercase letters, lowercase letters, and special characters. It features a responsive design, a user-friendly interface, and easy deployment on GitHub Pages.

Features

Tab Interface: Switch between standard 4-digit OTP and custom OTP generation.
Customizable OTP: Configure OTP length (3-10 digits) and character set (uppercase, lowercase, special characters).
Responsive Design: Modern layout using Tailwind CSS.
Real-time OTP Display: Dynamic OTP rendering with styled character boxes.
Reset Functionality: Clear current OTP with a reset button.
Easy Deployment: Simple deployment on GitHub Pages.

Installation

Clone the repository:

git clone https://github.com/vivekhegde2000/otp-generator.git

Navigate to the project directory:
```
cd otp-generator
```
Install dependencies:
```
npm install
```

Usage

Start the development server:
```
npm run dev
```
Open your browser and visit http://localhost:5173 to see the OTP generator in action.

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes or improvements.

Acknowledgements

Contact

If you have any questions or feedback, please feel free to contact me at [vivekhegdehalasarige@gmail.com].

Top categories