161 lines
6.4 KiB
Markdown
161 lines
6.4 KiB
Markdown
# 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.
|