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:

   git clone <repository-url>
   cd developer-tools
   

2. Install dependencies:

   npm install
   

3. Configure environment (optional):

   cp .env.example .env
   # Edit .env with your GA measurement ID
   

4. Start the development server:

   npm run dev
   # or
   npm start
   

5. Open 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.