DevTools Hub

A comprehensive, open-source platform of professional-grade developer utilities for daily development tasks.

🚀 Live Demo • 📖 Documentation • 🤝 Contributing • 📝 License

---

✨ Features

DevTools Hub provides 109 professional-grade tools organized into multiple categories:

📝 Text & String Tools (20 tools)

• JSON Formatter - Format, validate, and beautify JSON with syntax highlighting
• CSV ↔ JSON Converter - Seamlessly convert between CSV and JSON formats
• XML Formatter - Format and validate XML documents
• YAML Validator - Validate and format YAML configuration files
• TOML Validator - Parse and validate TOML files
• Markdown Previewer - Live preview Markdown with real-time rendering
• Code Diff Checker - Compare and highlight differences between code snippets
• Word Counter - Analyze text with character, word, and line counts
• Lorem Ipsum Generator - Generate placeholder text for designs
• Case Converter - Convert text between different cases (camelCase, snake_case, etc.)
• Slug Generator - Create URL-friendly slugs from text
• String Reverse - Reverse strings and text
• Duplicate Remover - Remove duplicate lines from text
• Whitespace Remover - Clean up extra whitespace
• ASCII Art Generator - Create ASCII art from text
• Emoji Picker - Browse and copy emojis
• Text Sorter - Sort lines alphabetically or numerically
• Line Number Adder - Add line numbers to text
• Find & Replace - Advanced find and replace with regex support
• Unicode Inspector - Analyze Unicode characters and properties

🔐 Data & Security Tools (19 tools)

• JWT Decoder - Decode and inspect JWT tokens
• JWT Builder - Create and sign JWT tokens
• Base64 Encoder/Decoder - Encode and decode Base64 strings
• URL Encoder/Decoder - Encode and decode URLs
• HTML Entity Encoder - Encode and decode HTML entities
• MD5 Generator - Generate MD5 hashes
• SHA Generator - Generate SHA-1, SHA-256, SHA-512 hashes
• Bcrypt Generator - Generate and verify bcrypt hashes
• Argon2 Generator - Generate Argon2 password hashes
• HMAC Generator - Generate HMAC signatures
• Base Converter - Convert between different number bases
• Caesar Cipher - Encrypt/decrypt using Caesar cipher
• ROT13 Encoder - Apply ROT13 encoding
• Punycode Converter - Convert between Unicode and Punycode
• AES Encryptor - Encrypt/decrypt using AES
• RSA Key Generator - Generate RSA key pairs
• QR Code Decoder - Decode QR codes from images
• Morse Converter - Convert text to Morse code
• Environment Checker - Validate environment variables

🎨 Design & Color Tools (3 tools)

• Color Palette Generator - Generate harmonious color palettes
• CSS Gradient Generator - Create and customize CSS gradients
• Image to Base64 - Convert images to Base64 encoding
• HTML Color to Hex - Convert HTML color names to hex codes

💻 Development Tools (5 tools)

• API Tester - Test HTTP requests with full request/response inspection
• cURL Generator - Generate cURL commands from HTTP requests
• Regex Tester - Test and debug regular expressions
• Timestamp Converter - Convert between Unix timestamps and dates
• UUID Generator - Generate UUIDs (v1, v4)

🌐 Web & HTML Tools (6 tools)

• HTML Previewer - Live preview HTML with device size toggle
• HTML Minifier - Compress HTML by removing whitespace and comments
• HTML Beautifier - Format HTML with proper indentation
• HTML to Markdown - Convert HTML to clean Markdown syntax
• Markdown to HTML - Convert Markdown to HTML
• HTML to JSX - Convert HTML to React JSX components
• SQL Formatter - Format and beautify SQL queries

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn package manager

Installation

1. Clone the repository

git clone https://github.com/amanullahpy/devtools-hub.git
cd devtools-hub

2. Install dependencies

npm install
# or
yarn install

3. Set up environment variables

cp .env.example .env.local

4. Run the development server

npm run dev
# or
yarn dev

5. Open in browser Navigate to http://localhost:3000

Build for Production

npm run build
npm start

---

📁 Project Structure

devtools-hub/
├── src/
│   ├── app/                    # Next.js app directory
│   │   └── [locale]/          # i18n routing
│   ├── components/            # Reusable React components
│   │   ├── ui/               # shadcn/ui components
│   │   ├── layout/           # Layout components
│   │   └── shared/           # Shared components
│   ├── config/               # Configuration files
│   │   ├── site.ts          # Site metadata
│   │   ├── theme.ts         # Theme configuration
│   │   └── tools-registry.ts # Tool registry
│   ├── constants/            # Application constants
│   ├── features/             # Feature modules (one per tool)
│   │   ├── json-formatter/
│   │   ├── api-tester/
│   │   └── ...
│   ├── i18n/                 # Internationalization
│   ├── lib/                  # Utility functions
│   ├── providers/            # React providers
│   ├── services/             # API services
│   ├── store/                # Redux store
│   └── styles/               # Global styles
├── public/                    # Static assets
├── messages/                  # i18n translations
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.mjs

---

🛠️ Tech Stack

Technology	Purpose
Next.js 16.2.6	React framework with SSR & SSG
React 19.2.4	UI library
TypeScript 5	Type-safe JavaScript
Tailwind CSS 4	Utility-first CSS framework
shadcn/ui	High-quality React components
next-intl	Internationalization (i18n)
Redux Toolkit	State management
React Query	Server state management
Zod	Schema validation
Lucide React	Icon library
Framer Motion	Animation library

---

🌍 Internationalization

DevTools Hub supports multiple languages through next-intl:

• English (en)
• Urdu (ur)

Translation files are located in /messages directory. To add a new language:

1. Create a new translation file: messages/[locale].json
2. Add the locale to src/i18n/routing.ts
3. Translate all keys from existing language files

---

📖 Documentation

Adding a New Tool

1. Create feature directory

mkdir -p src/features/my-tool/components

2. Create tool component

// src/features/my-tool/components/my-tool-client.tsx
'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { ToolNavigation } from '@/components/tool-navigation';

export function MyToolClient() {
  const t = useTranslations('tools.my-tool');
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');

  return (
    <div className="space-y-12">
      {/* Your tool UI */}
      <ToolNavigation currentToolId="my-tool" />
    </div>
  );
}

3. Register in tools registry

// src/config/tools-registry.ts
'my-tool': {
  component: dynamic(() => import('@/features/my-tool/components/my-tool-client').then(m => m.MyToolClient)),
},

4. Add to tools list

// src/constants/tools.ts
{ id: 'my-tool', icon: Code, category: 'text' },

5. Add translations

// messages/en.json
{
  "tools": {
    "my-tool": {
      "title": "My Tool",
      "description": "Tool description",
      "input": "Input",
      "output": "Output",
      "article": "Detailed article about the tool..."
    }
  }
}

Component Patterns

All tools follow a consistent UI pattern:

┌─────────────────────────────────────────────────┐
│  Input (9 cols)  │  Output (9 cols)  │ Settings │
│                  │                    │ (3 cols) │
│  ┌────────────┐  │  ┌────────────┐   │          │
│  │            │  │  │            │   │ Options  │
│  │   Input    │  │  │   Output   │   │ Buttons  │
│  │   Area     │  │  │   Area     │   │ Stats    │
│  │            │  │  │            │   │          │
│  └────────────┘  │  └────────────┘   │          │
└─────────────────────────────────────────────────┘

---

🎨 Customization

Theme Configuration

Edit src/config/theme.ts to customize colors and styling:

export const themeConfig = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    // ...
  },
};

Site Configuration

Update src/config/site.ts for site metadata:

export const siteConfig = {
  name: 'DevTools Hub',
  description: 'Your description',
  url: 'https://devtools-hub-taupe.vercel.app',
  links: {
    github: 'https://github.com/amanullahpy/devtools-hub',
  },
};

---

🚀 Deployment

Deploy to Vercel (Recommended)

1. Push to GitHub

git push origin main

2. Connect to Vercel

   • Go to vercel.com
   • Import your GitHub repository
   • Vercel will auto-detect Next.js configuration
   • Click Deploy

3. Environment Variables

   • Add any required .env variables in Vercel dashboard

Deploy to Other Platforms

Docker:

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

Build and run:

docker build -t devtools-hub .
docker run -p 3000:3000 devtools-hub

---

🤝 Contributing

We welcome contributions! Here's how to get started:

Development Workflow

1. Fork the repository

git clone https://github.com/your-username/devtools-hub.git
cd devtools-hub

2. Create a feature branch

git checkout -b feature/amazing-feature

3. Make your changes

   • Follow the existing code style
   • Add tests if applicable
   • Update documentation

4. Commit your changes

git commit -m 'Add amazing feature'

5. Push to your fork

git push origin feature/amazing-feature

6. Open a Pull Request
   • Describe your changes clearly
   • Reference any related issues
   • Wait for review and feedback

Code Style Guidelines

• Use TypeScript for type safety
• Follow ESLint configuration
• Use Prettier for code formatting
• Write meaningful commit messages
• Add comments for complex logic

Running Tests

npm run test
npm run lint

---

📋 Roadmap

Phase 1 ✅ (Complete)

• Core infrastructure setup
• 40 essential developer tools
• Multi-language support (EN, UR)
• Dark/Light theme toggle
• Responsive design

Phase 2 🚀 (In Progress)

• HTML Processing Tools (6 tools)
  • HTML Previewer
  • HTML Minifier
  • HTML Beautifier
  • HTML to Markdown
  • Markdown to HTML
  • HTML to JSX

Phase 3 (Planned)

• Advanced API tools
• Database utilities
• Code generation tools
• Performance analysis tools
• Browser extensions
• CLI tool
• Mobile app

---

🐛 Bug Reports & Feature Requests

Found a bug or have a feature idea?

• GitHub Issues: Create an issue
• Email: support@devtools-hub.com
• Twitter: @devtoolshub

---

📄 License

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

What you can do:

• ✅ Use commercially
• ✅ Modify the code
• ✅ Distribute
• ✅ Use privately

What you must do:

• ✅ Include license and copyright notice

---

👥 Authors & Contributors

Core Team

• Amanullah - Creator & Lead Developer
  • GitHub: @amanullahpy
  • Twitter: @amanullah

Contributors

We appreciate all contributions! See CONTRIBUTORS.md for a list of all contributors.

---

🙏 Acknowledgments

• Next.js - React framework
• Tailwind CSS - CSS framework
• shadcn/ui - UI components
• Vercel - Hosting platform
• All open-source contributors

---

📞 Support

Getting Help

1. Documentation: Check docs
2. GitHub Discussions: Ask questions
3. Issues: Report bugs

Community

• Discord: Join our server
• Twitter: @devtoolshub
• Email: hello@devtools-hub.com

---

📊 Project Stats

• Total Tools: 109
• Languages Supported: 2 (English, Urdu)
• Code Lines: ~25,000+
• Components: 109+
• Test Coverage: TBD

---

🔗 Links

Link	URL
Live Demo	https://devtools-hub-taupe.vercel.app
GitHub	https://github.com/amanullahpy/devtools-hub
Issues	https://github.com/amanullahpy/devtools-hub/issues
Discussions	https://github.com/amanullahpy/devtools-hub/discussions

---

Made with ❤️ by the DevTools Hub Team

⬆ Back to top