Web Developer Tools MVP

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

1. JSON Encoder/Decoder - Format, validate, and minify JSON data with syntax highlighting
2. Serialize Encoder/Decoder - Encode and decode PHP serialized data
3. URL Encoder/Decoder - Encode and decode URLs and query parameters
4. Base64 Encoder/Decoder - Convert text to Base64 and back with file support
5. CSV ↔ JSON Converter - Convert between CSV and JSON formats with custom delimiters
6. Code Beautifier/Minifier - Format and minify JSON, XML, SQL, CSS, and HTML code
7. 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

1. Clone the repository:

git clone <repository-url>
cd developer-tools

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. 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

1. Home Page: Browse and search through available tools
2. 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

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. 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