# 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:
```bash
git clone <repository-url>
cd developer-tools
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm start
```

4. Open [http://localhost:3000](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