string-tools

String Tools 🔧

Privacy-first string transformation and generation tools for developers

A fast, secure, and privacy-focused web application for string manipulation, transformation, and generation. All processing happens entirely in your browser - no data ever leaves your device.

✨ Features

🔤 Text Case Transformations

• lowercase - Convert text to all lowercase
• UPPERCASE - Convert text to all uppercase
• Title Case - Capitalize first letter of each word
• Sentence case - Capitalize only the first letter

🏷️ Naming Style Conversions

• camelCase - Convert to camelCase format
• PascalCase - Convert to PascalCase format
• snake_case - Convert to snake_case format
• kebab-case - Convert to kebab-case format
• CONST_CASE - Convert to CONSTANT_CASE format

🔄 Text Manipulation

• Reverse - Reverse text character by character
• Shuffle - Randomly shuffle characters (with optional seed)
• Trim - Remove leading and trailing whitespace
• Collapse Whitespace - Replace multiple spaces with single space
• Slugify - Convert text to URL-friendly slug

🔐 Encode & Decode

• Base64 - Encode/decode Base64 strings
• URL Encoding - Encode/decode URL parameters
• HTML Entities - Encode/decode HTML special characters

🔍 Extract & Validate

• Email Addresses - Extract valid email addresses from text
• URLs - Extract HTTP/HTTPS URLs from text
• Phone Numbers - Extract phone numbers in various formats
• UUIDs - Extract UUID patterns from text

🎲 Generators

• UUIDs - Generate Version 4 UUIDs (with bulk generation)
• NanoIDs - Generate URL-safe unique string IDs
• Random Strings - Generate random strings with customizable character sets
• Secure Passwords - Generate strong passwords with advanced options

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd string-fly-ui
   

2. Install dependencies

   npm install
   # or
   yarn install
   # or  
   pnpm install
   # or
   bun install
   

3. Start development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev
   

4. Open your browser Navigate to http://localhost:3000

🏗️ Built With

• Next.js 15 - React framework with App Router
• React 18 - UI library with modern hooks
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Beautifully designed components
• Zustand - Lightweight state management
• Lucide React - Beautiful & consistent icons

📁 Project Structure

src/
├── app/                      # Next.js App Router pages
│   ├── generate/            # Generation tools
│   │   ├── uuid/           # UUID generator
│   │   ├── nanoid/         # NanoID generator  
│   │   ├── random/         # Random string generator
│   │   └── password/       # Password generator
│   ├── transform/          # Transformation tools
│   │   ├── case/           # Case transformations
│   │   ├── style/          # Naming style conversions
│   │   ├── manipulate/     # Text manipulation
│   │   ├── encode/         # Encode/decode operations
│   │   └── extract/        # Pattern extraction
│   └── layout.tsx          # Root layout with metadata
├── components/             # Reusable React components
│   ├── ui/                # shadcn/ui components
│   ├── navigation.tsx     # Main navigation
│   ├── operation-shell.tsx # Generic operation wrapper
│   └── password-strength-meter.tsx # Password analysis
├── lib/                   # Utility functions & logic
│   ├── operations.ts     # Core transformation functions
│   ├── password-strength.ts # Password analysis logic
│   ├── store.ts         # Zustand state management
│   └── utils.ts         # General utilities
└── styles/
    └── globals.css      # Global Tailwind styles

🔒 Privacy & Security

• 100% Client-Side - All processing happens in your browser
• No Server Calls - Your data never leaves your device
• No Analytics - We don’t track or store any user data
• Secure Generation - Uses crypto.getRandomValues() for secure randomness
• Open Source - Full transparency in how your data is handled

🌟 Key Features

⚡ Performance

• Instant results with optimized algorithms
• Most operations complete in milliseconds
• Performance metrics displayed for each operation

🔗 Shareable URLs

• Share configurations and results via URL
• Perfect for team collaboration
• Bookmarkable operation states

📱 Responsive Design

• Works seamlessly on desktop, tablet, and mobile
• Touch-friendly interface
• Consistent experience across devices

🎨 Modern UI

• Clean, intuitive interface built with shadcn/ui
• Dark/light mode support
• Accessible design following WCAG guidelines

🛠️ Development

Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production  
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript checks

Adding New Operations

1. Add function to src/lib/operations.ts

   export const yourOperation = (input: string): OperationResult => {
     const start = performance.now()
     const result = input.yourTransformation()
     return { result, perfMs: performance.now() - start }
   }
   

2. Register in operations registry

   export const operations = {
     // ... existing operations
     'your-operation': yourOperation,
   }
   

3. Add to transform pages in src/app/transform/page.tsx

🚀 Deployment

GitHub Pages

This app is configured for automatic deployment to GitHub Pages. See DEPLOYMENT.md for detailed instructions.

Quick setup:

1. Push to GitHub repository
2. Enable GitHub Pages with “GitHub Actions” source
3. The app will automatically deploy on push to main branch

Manual Deployment

npm run build    # Creates static export in 'out' directory

📄 License

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

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
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

🙏 Acknowledgments

• Next.js for the amazing React framework
• shadcn/ui for the beautiful component library
• Tailwind CSS for the utility-first CSS framework
• Lucide for the consistent icon set

---

Made with ❤️ for developers who value privacy and performance