🛠️ WebUtilBox

A Modern, All-in-One Web Utility Toolbox

WebUtilBox is a comprehensive, web-based developer utility platform designed to streamline and accelerate everyday development tasks. Built with cutting-edge technologies including React, TypeScript, and modern UI frameworks, it provides an intuitive, responsive interface for essential web utilities and developer tools.

✨ Features

🎯 13 Essential Developer Tools

JSON Formatter - Format, validate, and beautify JSON with syntax highlighting
Base64 Encoder/Decoder - Encode and decode Base64 strings with binary support
JWT Decoder - Decode and inspect JSON Web Tokens (headers, payloads, signatures)
Regex Tester - Test regular expressions with real-time matching and group capture
Cron Expression Tester - Validate cron expressions with next execution times
Color Converter - Convert between HEX, RGB, HSL, and other color formats
Timestamp Converter - Convert UNIX timestamps to human-readable dates
UUID Generator - Generate UUID v4 identifiers with batch generation
URL Encoder/Decoder - Encode/decode URLs with query parameter support
Hash Generator - Generate MD5, SHA-1, SHA-256, and other hash values
SQL Formatter - Format and beautify SQL queries with syntax highlighting
Image Converter - Convert images between PNG, JPG, WebP formats with quality control
Code Minifier - Minify JavaScript, CSS, and HTML for production

🎨 Modern UI/UX

Dark/Light Theme - Seamless theme switching with system preference detection
Responsive Design - Optimized for desktop, tablet, and mobile devices
Animated Interactions - Smooth animations powered by Framer Motion
Custom SVG Icons - Hand-crafted icons with gradient effects and animations
Floating Background - Subtle animated patterns for visual appeal

🚀 Advanced Features

Batch Processing - Handle multiple files/inputs simultaneously
Real-time Validation - Instant feedback and error detection
One-click Copy - Copy results to clipboard with visual feedback
Drag & Drop Support - Intuitive file handling for image converter
Progress Tracking - Visual progress indicators for long operations
ZIP Download - Bulk download converted files as compressed archives

🚀 Quick Start

Prerequisites

Node.js (v18 or higher)
npm or yarn package manager
Modern web browser (Chrome, Firefox, Safari, Edge)

Installation

Clone the repository

git clone https://github.com/devaprakashpro/Webutilbox-.git
cd Webutilbox-

Install dependencies
```
npm install
# or
yarn install
```
Start development server
```
npm run dev
# or
yarn dev
```
Open in browser
```
http://localhost:5173
```

Build for Production

npm run build
# or
yarn build

The built files will be in the dist directory, ready for deployment.

🏗️ Project Structure

WebUtilBox/
├── public/                 # Static assets
├── src/
│   ├── components/         # Reusable UI components
│   │   ├── layout/        # Layout components (Navbar, Sidebar, etc.)
│   │   └── ui/            # UI primitives (Button, Card, etc.)
│   ├── pages/             # Page components for each tool
│   ├── providers/         # Context providers (Theme, etc.)
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utility functions
│   └── main.tsx           # Application entry point
├── package.json           # Dependencies and scripts
├── tailwind.config.js     # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
└── vite.config.ts         # Vite build configuration

🛠️ Technology Stack

Frontend Framework

React 18.3.1 - Modern React with hooks and concurrent features
TypeScript 5.5.3 - Type-safe JavaScript with enhanced developer experience
Vite 5.4.8 - Lightning-fast build tool and development server

UI & Styling

Tailwind CSS 3.4.13 - Utility-first CSS framework
Radix UI - Unstyled, accessible UI primitives
shadcn/ui - Beautiful, customizable component library
Framer Motion 12.23.12 - Production-ready motion library

Icons & Graphics

Lucide React 0.446.0 - Beautiful, customizable SVG icons
Custom SVG Icons - Hand-crafted icons with animations
Gradient Effects - CSS gradients and backdrop filters

Routing & Navigation

React Router DOM 7.7.1 - Declarative routing for React
Animated Page Transitions - Smooth page transitions with Framer Motion

State Management

React Hooks - Built-in state management with useState, useEffect
Context API - Global state for theme and notifications

Development Tools

ESLint - Code linting and formatting
TypeScript ESLint - TypeScript-specific linting rules
PostCSS - CSS processing and optimization

📱 Tool Documentation

🔧 JSON Formatter

Purpose: Format, validate, and beautify JSON data
Features:
- Syntax highlighting with error detection
- Pretty print with proper indentation
- JSON validation with detailed error messages
- Copy formatted JSON to clipboard
Use Cases: API response formatting, configuration file validation

🔐 Base64 Encoder/Decoder

Purpose: Encode and decode Base64 strings
Features:
- Text to Base64 encoding
- Base64 to text decoding
- Binary data support
- Real-time conversion
Use Cases: Data transmission, API authentication, file encoding

🛡️ JWT Decoder

Purpose: Decode and inspect JSON Web Tokens
Features:
- Header, payload, and signature extraction
- Claims visualization
- Expiration time checking
- Algorithm identification
Use Cases: Token debugging, authentication troubleshooting

🔍 Regex Tester

Purpose: Test regular expressions against text
Features:
- Real-time pattern matching
- Group capture highlighting
- Match count and positions
- Common regex patterns library
Use Cases: Pattern validation, text parsing, data extraction

⏰ Cron Expression Tester

Purpose: Validate and test cron expressions
Features:
- Next execution time calculation
- Human-readable descriptions
- Multiple timezone support
- Common cron patterns
Use Cases: Task scheduling, automation setup

🎨 Color Converter

Purpose: Convert between color formats
Features:
- HEX, RGB, HSL, CMYK support
- Color picker integration
- Live preview
- Accessibility contrast checking
Use Cases: Design systems, CSS development, brand guidelines

📅 Timestamp Converter

Purpose: Convert UNIX timestamps to readable dates
Features:
- Multiple timezone support
- Various date formats
- Current timestamp generation
- Batch conversion
Use Cases: Log analysis, database queries, API development

🆔 UUID Generator

Purpose: Generate unique identifiers
Features:
- UUID v4 generation
- Batch generation (up to 100)
- One-click copy
- Format validation
Use Cases: Database keys, API identifiers, unique references

🔗 URL Encoder/Decoder

Purpose: Encode and decode URLs
Features:
- Query parameter handling
- Special character encoding
- Component-wise encoding
- Validation and formatting
Use Cases: API requests, form submissions, link generation

#️⃣ Hash Generator

Purpose: Generate cryptographic hashes
Features:
- MD5, SHA-1, SHA-256, SHA-512 support
- File and text hashing
- Batch processing
- Hash comparison
Use Cases: Data integrity, password hashing, file verification

🗄️ SQL Formatter

Purpose: Format and beautify SQL queries
Features:
- Syntax highlighting
- Proper indentation
- Keyword capitalization
- Query validation
Use Cases: Database development, query optimization, documentation

🖼️ Image Converter

Purpose: Convert images between formats
Features:
- PNG, JPG, WebP, BMP support
- Quality adjustment for JPEG
- Batch processing
- Drag & drop interface
- ZIP download for multiple files
- Real-time preview
Use Cases: Web optimization, format compatibility, batch processing

⚡ Code Minifier

Purpose: Minify code for production
Features:
- JavaScript, CSS, HTML support
- Whitespace removal
- Comment stripping
- Size reduction statistics
Use Cases: Performance optimization, deployment preparation

🎨 UI Components & Design System

Layout Components

Navbar - Fixed header with navigation and theme toggle
Sidebar - Collapsible navigation with tool categories
Animated Background - Floating shapes and code patterns
Floating Chat - Interactive help and feedback system

UI Primitives

Cards - Content containers with hover effects
Buttons - Multiple variants (primary, secondary, ghost, outline)
Forms - Input fields, selectors, sliders with validation
Modals - Dialogs, sheets, and popover components
Notifications - Toast messages with action buttons

Custom Icons

DevTools Logo - Animated layered logo with gradients
Tool Icons - Custom SVG icons for each utility
Loading Spinners - Animated loading states
Status Indicators - Visual feedback for operations

Animations

Page Transitions - Smooth route changes
Hover Effects - Interactive element responses
Loading States - Progress indicators and spinners
Micro-interactions - Button clicks, form submissions

🔧 Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linting
npm run lint

Environment Setup

Clone and install

git clone https://github.com/devaprakashpro/Webutilbox-.git
cd Webutilbox-
npm install

Development workflow

npm run dev    # Start dev server
# Make changes
npm run lint   # Check code quality
npm run build  # Test production build

Code Style

TypeScript - Strict type checking enabled
ESLint - Code linting with React and TypeScript rules
Prettier - Code formatting (configured in ESLint)
Tailwind CSS - Utility-first styling approach

Component Structure

// Example component structure
interface ComponentProps {
  title: string;
  description?: string;
  children?: React.ReactNode;
}

export function Component({ title, description, children }: ComponentProps) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="p-4 rounded-lg bg-card"
    >
      <h2 className="text-xl font-semibold">{title}</h2>
      {description && <p className="text-muted-foreground">{description}</p>}
      {children}
    </motion.div>
  );
}

📦 Dependencies

Core Dependencies

{
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-router-dom": "^7.7.1",
  "typescript": "^5.5.3",
  "vite": "^5.4.8"
}

UI & Styling

{
  "tailwindcss": "^3.4.13",
  "@radix-ui/react-*": "^1.x.x",
  "framer-motion": "^12.23.12",
  "lucide-react": "^0.446.0",
  "class-variance-authority": "^0.7.0"
}

Utilities

{
  "jszip": "^3.10.1",
  "date-fns": "^4.1.0",
  "uuid": "^11.1.0",
  "zod": "^3.23.8"
}

🚀 Deployment

Vercel (Recommended)

Connect your GitHub repository to Vercel
Configure build settings:
- Build Command: npm run build
- Output Directory: dist
Deploy automatically on push to main branch

Netlify

Connect repository to Netlify
Set build command: npm run build
Set publish directory: dist
Enable automatic deploys

GitHub Pages

npm run build
# Deploy dist folder to gh-pages branch

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]

🤝 Contributing

We welcome contributions! Please follow these steps:

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Make your changes

Commit with conventional commits

git commit -m "feat: add amazing feature"

Push to your branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Contribution Guidelines

Follow TypeScript best practices
Add tests for new features
Update documentation
Follow existing code style
Write clear commit messages

📄 License

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

👨‍💻 Author

Devaprakash

GitHub: @devaprakashpro
Website: Your Website

🙏 Acknowledgments

Radix UI - For accessible UI primitives
shadcn/ui - For beautiful component designs
Tailwind CSS - For utility-first styling
Framer Motion - For smooth animations
Lucide - For beautiful icons
Vite - For lightning-fast development

📊 Project Stats

13 Developer Tools - Comprehensive utility collection
50+ UI Components - Reusable component library
100% TypeScript - Type-safe development
Mobile Responsive - Works on all devices
Dark/Light Theme - Accessible design
Zero Backend - Pure frontend application

🔮 Roadmap

Upcoming Features

API Testing Tool - HTTP request testing
Markdown Editor - Live preview markdown editor
QR Code Generator - Generate QR codes for text/URLs
Password Generator - Secure password generation
Text Diff Tool - Compare text differences
CSV to JSON Converter - Data format conversion
Lorem Ipsum Generator - Placeholder text generation
Favicon Generator - Generate favicons from images

Enhancements

Offline Support - PWA capabilities
Export/Import Settings - User preferences backup
Keyboard Shortcuts - Power user features
Plugin System - Extensible architecture
Multi-language Support - Internationalization

⭐ Star this repository if you find it helpful!

Report Bug • Request Feature • Documentation

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🛠️ WebUtilBox

✨ Features

🎯 13 Essential Developer Tools

🎨 Modern UI/UX

🚀 Advanced Features

🚀 Quick Start

Prerequisites

Installation

Build for Production

🏗️ Project Structure

🛠️ Technology Stack

Frontend Framework

UI & Styling

Icons & Graphics

Routing & Navigation

State Management

Development Tools

📱 Tool Documentation

🔧 JSON Formatter

🔐 Base64 Encoder/Decoder

🛡️ JWT Decoder

🔍 Regex Tester

⏰ Cron Expression Tester

🎨 Color Converter

📅 Timestamp Converter

🆔 UUID Generator

🔗 URL Encoder/Decoder

#️⃣ Hash Generator

🗄️ SQL Formatter

🖼️ Image Converter

⚡ Code Minifier

🎨 UI Components & Design System

Layout Components

UI Primitives

Custom Icons

Animations

🔧 Development

Available Scripts

Environment Setup

Code Style

Component Structure

📦 Dependencies

Core Dependencies

UI & Styling

Utilities

🚀 Deployment

Vercel (Recommended)

Netlify

GitHub Pages

Docker

🤝 Contributing

Contribution Guidelines

📄 License

👨‍💻 Author

🙏 Acknowledgments

📊 Project Stats

🔮 Roadmap

Upcoming Features

Enhancements