dwindown/dewedev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Adsterra integration, code splitting, cleanup, Onidel affiliate

Browse Source
This commit is contained in:
dwindown
2026-02-18 16:50:45 +07:00
parent 7ba289be5c
commit 9dc3285adb
40 changed files with 352 additions and 2933 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
README.md
View File

@@ -1,116 +1,151 @@
# Web Developer Tools MVP
# Dewe.Dev - Developer Tools
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.
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. **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
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** - 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
- ✨ **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
- **Styling**: TailwindCSS with custom design system
- **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
- **Build Tool**: Create React App
- **Libraries**:
- js-beautify (code formatting)
- **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
```
```bash
git clone <repository-url>
cd developer-tools
```
2. Install dependencies:
```bash
npm install
```
```bash
npm install
```
3. Start the development server:
```bash
npm start
```
3. Configure environment (optional):
```bash
cp .env.example .env
# Edit .env with your GA measurement ID
```
4. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
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 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
├── 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
```
## 🎨 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)
- `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).
## 📱 Usage
## 📁 Environment Variables
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
| Variable | Description | Default |
|----------|-------------|---------|
| `REACT_APP_GA_ID` | Google Analytics Measurement ID | `G-S3K5P2PWV6` |
## 🔧 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
Create a `.env` file based on `.env.example` to override defaults.
## 🌟 Contributing
@@ -123,13 +158,3 @@ The application is built with scalability in mind:
## 📄 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