7f2dd5260f
- Complete React app with 7 developer tools - JSON Tool with visual structured editor - Serialize Tool with visual structured editor - URL, Base64, CSV/JSON, Beautifier, Diff tools - Responsive navigation with dropdown menu - Dark/light mode toggle - Mobile-responsive design with sticky header - All tools working with copy/paste functionality
136 lines
4.5 KiB
Markdown
136 lines
4.5 KiB
Markdown
# 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
|