Useful Dev Tools

A collection of useful, client-side tools for developers

🌐 Live Demo | 📱 Report Bug | ✨ Request Feature

🚀 Features

Useful Dev Tools provides a comprehensive suite of developer utilities, all running client-side for privacy and speed:

• Hash Generator - Generate MD5, SHA-256, SHA-512, bcrypt, and xxHash hashes
• Base64 Converter - Encode/decode text and files to/from Base64
• UUID Generator - Generate UUIDs in multiple versions (v1, v4, v6, v7)
• Regex Tester - Test regular expressions with real-time validation and character analysis
• CSV/JSON Converter - Convert between CSV and JSON formats with customizable options
• JSON Formatter & Validator - Validate, pretty-print, and minify JSON with configurable options
• Markdown Converter - Convert between Markdown and HTML with live preview
• URL Encoder/Decoder - Encode and decode URLs with component-level encoding options
• Color Converter - Convert and compare colors across HSL, OKLCH, and RGB; copy HEX/RGB/RGBA/HSL/OKLCH with live preview and alpha support

🛠️ Tech Stack

• Framework: Next.js 15.4.4 with App Router
• Language: TypeScript 5.8.3
• Styling: Tailwind CSS 4.1.11
• UI Components: Shadcn/ui + Custom components
• Icons: Lucide React
• Internationalization: next-intl
• Theme: next-themes (Dark/Light mode)
• Testing: Vitest
• Linting: ESLint + Prettier
• Package Manager: pnpm

📦 Installation

Prerequisites

• Node.js version 18 or higher (latest LTS recommended)
• pnpm package manager (recommended)

Getting Started

1. Clone the repository

   git clone https://github.com/nitodeco/usefuldev.tools.git
   cd usefuldev.tools

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm dev

4. Open your browser

   Navigate to http://localhost:3000 to see the application running.

🏗️ Project Structure

usefuldev.tools/
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router pages
│ ├── components/ # React components
│ │ ├── atoms/ # Basic UI components
│ │ ├── molecules/ # Composed components
│ │ ├── organisms/ # Complex components
│ │ ├── pages/ # Page-specific components
│ │ ├── providers/ # Context providers
│ │ └── ui/ # Shadcn/ui components
│ ├── config/ # Configuration files
│ ├── hooks/ # Custom React hooks
│ ├── i18n/ # Internationalization
│ ├── lib/ # Utility functions
│ ├── messages/ # Translation files
│ └── types/ # Type definitions
├── package.json
└── ...config files

🚀 Available Scripts

• pnpm dev - Start development server with Turbopack
• pnpm build - Build the application for production
• pnpm start - Start the production server
• pnpm lint - Run ESLint
• pnpm lint:fix - Run ESLint with auto-fix
• pnpm format - Format code with Prettier
• pnpm test - Run tests with Vitest
• pnpm test:watch - Run tests in watch mode
• pnpm reset - Clean install (removes node_modules, .next, dist)

🔧 Development

Code Quality

• ESLint with Next.js, TypeScript, and Tailwind CSS rules
• Prettier for consistent code formatting
• Husky for Git hooks
• Commitlint for enforcing conventional commit messages

Testing

Tests are written using Vitest and are configured to run in different environments:

• Node.js environment for utility functions (.test.ts)
• jsdom environment for React components (.test.tsx)

Internationalization

The project uses next-intl for internationalization. Currently supports:

• English (en) - Default language

Translation files are located in src/messages/. Contributions are welcome!

🌐 Deployment

The application is designed to be deployed as a static site and can be hosted on any static hosting service. Although I recommend using Vercel for its ease of use and integration with the Next.js ecosystem.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Development Guidelines

1. Follow the existing code style and architecture
2. Write tests for new features
3. Update documentation as needed
4. Use conventional commit messages
5. Ensure all linting and tests pass

📝 License

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

---

Made with ❤️ for the developer community