# Dewe.Dev - Developer Tools

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

## 🚀 Features

### Available Tools

1. **Object Editor** (`/object-editor`) — Visual editor for JSON and PHP serialized objects with mindmap visualization.
2. **Table Editor** (`/table-editor`) — Import, edit, and export tabular data from URLs, files, or paste CSV/JSON.
3. **Markdown Editor** (`/markdown-editor`) — Write and preview markdown with live rendering, syntax highlighting, and export.
4. **Invoice Editor** (`/invoice-editor`) — Create, edit, and export professional invoices with PDF generation.
5. **URL Encoder/Decoder** (`/url`) — Encode and decode URLs and query parameters.
6. **Base64 Encoder/Decoder** (`/base64`) — Convert text to Base64 and back with file support.
7. **Code Beautifier/Minifier** (`/beautifier`) — Format and minify JSON, XML, SQL, CSS, and HTML code.
8. **Text Diff Checker** (`/diff`) — Compare two texts and highlight differences line by line.
9. **Text Length Checker** (`/text-length`) — Analyze text length, word count, and other text statistics.

### Key Features

- ✨ **Modern UI** — Clean, minimalist design with automatic dark/light mode.
- 📱 **Fully Responsive** — Equal experience on desktop and mobile devices.
- ⚡ **Lightning Fast** — Code-splitting with React.lazy for optimal loading performance.
- 🔒 **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.
- 🎯 **SEO Optimized** — Pre-rendered pages with React Snap, meta tags, and sitemap.

## 🛠 Tech Stack

- **Frontend**: React 18, React Router 6
- **Styling**: TailwindCSS 3
- **Editor**: CodeMirror 6 (@uiw/react-codemirror)
- **PDF Generation**: jsPDF, jsPDF-AutoTable
- **Markdown**: marked, DOMPurify, highlight.js
- **Icons**: Lucide React
- **SEO**: react-helmet-async
- **Analytics**: Google Analytics 4 with Consent Mode v2
- **Advertising**: Adsterra
- **Utilities**: 
  - papaparse (CSV parsing)
  - js-beautify (code formatting)
  - serialize-javascript (serialization)
  - diff-match-patch (text comparison)
  - turndown (HTML to Markdown)

## 📦 Installation

1. Clone the repository:
   ```bash
   git clone <repository-url>
   cd developer-tools
   ```

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

3. Configure environment (optional):
   ```bash
   cp .env.example .env
   # Edit .env with your GA measurement ID
   ```

4. Start the development server:
   ```bash
   npm run dev
   # or
   npm start
   ```

5. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

## 🏗 Project Structure

```
src/
├── components/              # Reusable UI components
│   ├── Layout.js            # Main layout with sidebar navigation
│   ├── ToolLayout.js        # Wrapper for tool pages with ad slots
│   ├── ToolCard.js          # Tool card for homepage
│   ├── ToolSidebar.js       # Sidebar navigation
│   ├── AdBlock.js           # Adsterra ad unit wrapper
│   ├── AdColumn.js          # Desktop sidebar ad column
│   ├── MobileAdBanner.js    # Mobile bottom ad banner
│   ├── OfferBlock.js        # Promotional offer slot
│   ├── AffiliateBlock.js    # Affiliate link slot
│   ├── Loading.js           # Loading spinner for Suspense
│   ├── CodeMirrorEditor.js  # Code editor component
│   ├── CodeEditor.js        # Alternative code editor
│   ├── SEO.js / SEOHead.js  # SEO meta tags
│   ├── RelatedTools.js      # Related tools suggestions
│   ├── ErrorBoundary.js     # Error boundary
│   ├── ThemeToggle.js       # Dark/light mode toggle
│   ├── CopyButton.js        # One-click copy
│   ├── ConsentBanner.js     # GDPR consent banner
│   ├── MindmapView.js       # JSON visualization
│   ├── StructuredEditor.js  # Object editor modal
│   └── ProBadge.js          # PRO feature badge
├── pages/                   # Tool pages (lazy-loaded)
│   ├── Home.js
│   ├── ObjectEditor.js
│   ├── TableEditor.js
│   ├── MarkdownEditor.js
│   ├── InvoiceEditor.js
│   ├── InvoicePreview.js
│   ├── InvoicePreviewMinimal.js
│   ├── BeautifierTool.js
│   ├── UrlTool.js
│   ├── Base64Tool.js
│   ├── DiffTool.js
│   ├── TextLengthTool.js
│   ├── ReleaseNotes.js
│   ├── PrivacyPolicy.js
│   ├── TermsOfService.js
│   └── NotFound.js
├── config/                  # App configuration
│   ├── tools.js             # Tool definitions (single source of truth)
│   └── features.js          # Feature flags (FREE/PRO tiers)
├── utils/                   # Utility functions
│   ├── analytics.js         # Google Analytics 4
│   ├── consentManager.js    # GDPR consent management
│   ├── seo.js               # SEO helpers
│   ├── browserCompat.js     # Browser compatibility
│   ├── contentExtractor.js  # Content parsing
│   └── sitemapGenerator.js  # Sitemap utilities
└── hooks/                   # Custom React hooks
    ├── useAnalytics.js      # Analytics hook
    └── useNavigationGuard.js # Unsaved changes protection
```

## 🚀 Available Scripts

- `npm run dev` or `npm start` — Runs the app in development mode.
- `npm run build` — Builds the app for production (with React Snap for pre-rendering).
- `npm run build:no-snap` — Builds the app for production (without pre-rendering).
- `npm test` — Launches the test runner.
- `npm run eject` — Ejects from Create React App (one-way operation).

## 📁 Environment Variables

| Variable | Description | Default |
|----------|-------------|---------|
| `REACT_APP_GA_ID` | Google Analytics Measurement ID | `G-S3K5P2PWV6` |

Create a `.env` file based on `.env.example` to override defaults.

## 🌟 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.