A modern, responsive web application containing essential utility tools for web developers and programmers. Built with React and TailwindCSS for a clean, fast, and user-friendly experience.

🚀 Features

Available Tools

JSON Encoder/Decoder - Format, validate, and minify JSON data with syntax highlighting
Serialize Encoder/Decoder - Encode and decode PHP serialized data
URL Encoder/Decoder - Encode and decode URLs and query parameters
Base64 Encoder/Decoder - Convert text to Base64 and back with file support
CSV ↔ JSON Converter - Convert between CSV and JSON formats with custom delimiters
Code Beautifier/Minifier - Format and minify JSON, XML, SQL, CSS, and HTML code
Text Diff Checker - Compare two texts and highlight differences line by line

Key Features

✨ Modern UI - Clean, minimalist design with automatic dark/light mode
📱 Fully Responsive - Equal experience on desktop and mobile devices
⚡ Lightning Fast - All processing happens locally in the browser
🔒 Privacy First - No server dependencies, no data collection
📋 Easy Copy-Paste - One-click copy functionality for all outputs
📁 File Support - Upload files directly for processing
🔍 Searchable - Quick search through available tools

🛠 Tech Stack

Frontend: React 18, React Router
Styling: TailwindCSS with custom design system
Icons: Lucide React
Build Tool: Create React App
Libraries:
- js-beautify (code formatting)
- papaparse (CSV parsing)
- serialize-javascript (serialization)

📦 Installation

Clone the repository:

git clone <repository-url>
cd developer-tools

Install dependencies:

npm install

Start the development server:

npm start

Open http://localhost:3000 to view it in the browser.

🏗 Project Structure

src/
├── components/           # Reusable UI components
│   ├── Layout.js        # Main layout wrapper
│   ├── ToolCard.js      # Tool card component for home page
│   ├── ToolLayout.js    # Layout for individual tools
│   └── CopyButton.js    # Copy to clipboard button
├── pages/               # Individual tool pages
│   ├── Home.js          # Homepage with tool listing
│   ├── JsonTool.js      # JSON encoder/decoder
│   ├── SerializeTool.js # Serialize encoder/decoder
│   ├── UrlTool.js       # URL encoder/decoder
│   ├── Base64Tool.js    # Base64 encoder/decoder
│   ├── CsvJsonTool.js   # CSV/JSON converter
│   ├── BeautifierTool.js# Code beautifier/minifier
│   └── DiffTool.js      # Text diff checker
├── App.js               # Main app component with routing
├── index.js             # React app entry point
└── index.css            # Global styles and Tailwind imports

🎨 Design System

The application uses a consistent design system built with TailwindCSS:

Colors: Primary blue theme with automatic dark/light mode
Typography: System fonts with JetBrains Mono for code
Components: Reusable utility classes for consistent styling
Responsive: Mobile-first design approach

🚀 Available Scripts

npm start - Runs the app in development mode
npm build - Builds the app for production
npm test - Launches the test runner
npm run eject - Ejects from Create React App (one-way operation)

📱 Usage

Home Page: Browse and search through available tools
Individual Tools: Each tool has a dedicated page with:
- Input area for your data
- Processing controls (encode/decode, beautify/minify, etc.)
- Output area with copy functionality
- File upload support where applicable
- Usage tips and examples

🔧 Customization

The application is built with scalability in mind:

Adding New Tools: Create a new page component and add it to the routing
Styling: Modify tailwind.config.js for theme customization
Components: All components are modular and reusable

🌟 Contributing

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

📄 License

This project is open source and available under the MIT License.

🎯 Roadmap

Future enhancements could include:

More encoding/decoding formats
Advanced diff algorithms
Syntax highlighting for code
Export functionality
Keyboard shortcuts
Tool favorites/bookmarks