diff --git a/.env b/.env new file mode 100644 index 00000000..aaa0a848 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +REACT_APP_GA_ID=G-S3K5P2PWV6 diff --git a/.env.example b/.env.example new file mode 100644 index 00000000..ad6c88b2 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +# Google Analytics Measurement ID +REACT_APP_GA_ID=G-S3K5P2PWV6 diff --git a/ADSENSE_REVISED_STRATEGY.md b/ADSENSE_REVISED_STRATEGY.md deleted file mode 100644 index bc0fb754..00000000 --- a/ADSENSE_REVISED_STRATEGY.md +++ /dev/null @@ -1,436 +0,0 @@ -# AdSense Strategy - Revised (Tool Pages Only) - -## Strategy: Clean Homepage + Monetized Tool Pages - -### ✅ Why This is BETTER: - -1. **Better First Impression**: Clean homepage attracts users without ad clutter -2. **Higher Engagement**: Users explore tools without distraction -3. **Better CTR**: Ads on tool pages have higher relevance (users are actively working) -4. **Lower Bounce Rate**: No ads on homepage = users stay longer -5. **SEO Benefits**: Clean homepage ranks better -6. **Professional Image**: Looks more trustworthy and premium - ---- - -## Ad Placement (Tool Pages Only) - -### Desktop Layout (From PROJECT_ROADMAP.md) - -``` -┌────────────────────────────┬─────────┐ -│ │ [Ad] │ ← 300x250 -│ Main Content │ │ -│ (Tool Editor) │ 300px │ -│ │ │ -│ │ [Ad] │ ← 300x250 -│ │ │ -│ │ [Ad] │ ← 300x250 -└────────────────────────────┴─────────┘ -``` - -**Specifications:** -- **Right Sidebar**: 300px fixed width -- **Sticky Scroll**: Ads stay visible while scrolling -- **3 Ad Blocks Maximum**: - - Ad 1: 300x250 (Medium Rectangle) - - Ad 2: 300x250 (Medium Rectangle) - - Ad 3: 300x250 (Medium Rectangle) -- **Google AdSense Compliance**: All ads fully viewable, no scrollable containers -- **Responsive**: Hide below 1200px viewport width -- **Main Content**: `calc(100% - 320px)` width - -### Mobile Layout - -``` -┌─────────────────────────┐ -│ │ -│ Main Content │ -│ (Scrollable) │ -│ │ -├─────────────────────────┤ -│ [Ad Banner 320x50] │ ← Sticky Bottom -└─────────────────────────┘ -``` - -**Specifications:** -- **Sticky Bottom Banner**: 320x50 or 320x100 -- **Close Button**: Better UX -- **Content Padding**: Add padding-bottom to prevent overlap - ---- - -## Revenue Estimation - -### Traffic Assumptions - -**Current Tools:** 11 tools -- Object Editor -- Table Editor -- Invoice Editor -- Text Length Tool -- Base64 Encoder/Decoder -- URL Encoder/Decoder -- Hash Generator -- JWT Decoder -- Timestamp Converter -- Color Converter -- UUID Generator - -**Traffic Breakdown:** -- **Homepage**: 40% of traffic (no ads) -- **Tool Pages**: 60% of traffic (monetized) - -**Monthly Traffic Estimate:** -- Total visitors: 10,000/month (conservative start) -- Homepage visits: 10,000 (entry point) -- Tool page visits: 15,000 (1.5 pages per user) -- **Monetized page views**: 15,000/month - -### Ad Performance Metrics - -**Desktop (70% of traffic):** -- 10,500 page views/month -- 3 ads per page = 31,500 ad impressions -- Average CPM: $3.00 (developer tools niche) -- **Revenue**: 31,500 × $3.00 / 1000 = **$94.50/month** - -**Mobile (30% of traffic):** -- 4,500 page views/month -- 1 ad per page = 4,500 ad impressions -- Average CPM: $2.00 (mobile typically lower) -- **Revenue**: 4,500 × $2.00 / 1000 = **$9.00/month** - -**Total Monthly Revenue (Conservative):** -``` -Desktop: $94.50 -Mobile: $9.00 -───────────────── -TOTAL: $103.50/month -``` - ---- - -## Scaled Revenue Projections - -### Scenario 1: Moderate Growth (3 months) -**Traffic:** 30,000 visitors/month -- Tool page views: 45,000/month -- Desktop impressions: 94,500 -- Mobile impressions: 13,500 -- **Monthly Revenue**: $310/month - -### Scenario 2: Good Growth (6 months) -**Traffic:** 50,000 visitors/month -- Tool page views: 75,000/month -- Desktop impressions: 157,500 -- Mobile impressions: 22,500 -- **Monthly Revenue**: $517/month - -### Scenario 3: Strong Growth (12 months) -**Traffic:** 100,000 visitors/month -- Tool page views: 150,000/month -- Desktop impressions: 315,000 -- Mobile impressions: 45,000 -- **Monthly Revenue**: $1,035/month - -### Scenario 4: Viral Success (18+ months) -**Traffic:** 250,000 visitors/month -- Tool page views: 375,000/month -- Desktop impressions: 787,500 -- Mobile impressions: 112,500 -- **Monthly Revenue**: $2,587/month - ---- - -## Comparison: Homepage Ads vs No Homepage Ads - -### With Homepage Ads (Your ADSENSE_STRATEGY.md) -``` -Homepage: 2 ads × 10,000 views = 20,000 impressions -Tool Pages: 2 ads × 15,000 views = 30,000 impressions -───────────────────────────────────────────────────── -Total: 50,000 impressions -Revenue: $150/month (at $3 CPM) - -Pros: Higher revenue (+$46.50/month) -Cons: Cluttered homepage, higher bounce rate, worse SEO -``` - -### Without Homepage Ads (Revised Strategy) -``` -Homepage: 0 ads × 10,000 views = 0 impressions -Tool Pages: 3 ads × 15,000 views = 45,000 impressions -───────────────────────────────────────────────────── -Total: 45,000 impressions -Revenue: $103.50/month (at $3 CPM) - -Pros: Clean homepage, better UX, better SEO, higher retention -Cons: Lower initial revenue (-$46.50/month) -``` - -### Long-Term Impact - -**With Clean Homepage:** -- Better SEO → More organic traffic → More tool page views -- Lower bounce rate → More pages per session → More ad impressions -- Professional image → More return visitors → Higher lifetime value - -**Estimated Long-Term Benefit:** -- 20-30% more traffic from better SEO -- 15-20% more pages per session -- **Net result**: Clean homepage strategy wins after 3-6 months - ---- - -## Implementation Plan - -### Phase 1: Ad Space Preparation (1 day) - -**Create Components:** - -```javascript -// src/components/AdColumn.jsx -import React from 'react'; -import AdBlock from './AdBlock'; - -const AdColumn = () => { - return ( - - ); -}; - -export default AdColumn; -``` - -```javascript -// src/components/AdBlock.jsx -import React, { useEffect } from 'react'; - -const AdBlock = ({ slot, size }) => { - useEffect(() => { - try { - (window.adsbygoogle = window.adsbygoogle || []).push({}); - } catch (e) { - console.error('AdSense error:', e); - } - }, []); - - const [width, height] = size.split('x'); - - return ( -
- -
- ); -}; - -export default AdBlock; -``` - -```javascript -// src/components/MobileAdBanner.jsx -import React, { useEffect, useState } from 'react'; -import { X } from 'lucide-react'; - -const MobileAdBanner = () => { - const [visible, setVisible] = useState(true); - - useEffect(() => { - try { - (window.adsbygoogle = window.adsbygoogle || []).push({}); - } catch (e) { - console.error('AdSense error:', e); - } - }, []); - - if (!visible) return null; - - return ( -
- -
- -
-
- ); -}; - -export default MobileAdBanner; -``` - -**Update ToolLayout:** - -```javascript -// src/components/ToolLayout.jsx -import AdColumn from './AdColumn'; -import MobileAdBanner from './MobileAdBanner'; - -const ToolLayout = ({ children }) => { - return ( -
- {/* Main Content */} -
- {children} -
- - {/* Desktop Ad Column */} - - - {/* Mobile Ad Banner */} - -
- ); -}; -``` - -### Phase 2: AdSense Integration (1 day) - -1. **Apply for AdSense** (if not done) -2. **Add script to index.html**: -```html - -``` -3. **Create ad units** in AdSense dashboard -4. **Replace placeholder IDs** in components -5. **Test on all tools** - -### Phase 3: Testing & Optimization (ongoing) - -- Monitor ad viewability -- Test different ad positions -- A/B test ad sizes -- Track CTR and RPM -- Optimize based on data - ---- - -## Success Metrics - -### Month 1 (Launch) -- [ ] Ads live on all 11 tools -- [ ] Ad impressions: 45,000+ -- [ ] Revenue: $100+ -- [ ] No performance issues -- [ ] No user complaints - -### Month 3 (Optimization) -- [ ] Traffic: 30,000 visitors/month -- [ ] Ad impressions: 135,000+ -- [ ] Revenue: $300+ -- [ ] Optimized ad positions -- [ ] Improved CTR - -### Month 6 (Growth) -- [ ] Traffic: 50,000 visitors/month -- [ ] Ad impressions: 225,000+ -- [ ] Revenue: $500+ -- [ ] Consider PRO tier - -### Month 12 (Maturity) -- [ ] Traffic: 100,000 visitors/month -- [ ] Ad impressions: 450,000+ -- [ ] Revenue: $1,000+ -- [ ] PRO tier launched - ---- - -## PRO Tier Strategy - -### When to Launch PRO: -- After 3-6 months of ad revenue -- When traffic is 50,000+/month -- When users request ad-free option -- When revenue is stable - -### PRO Benefits: -- ✅ **Ad-Free Experience** - No ads anywhere -- ✅ **Backend Proxy** - CORS bypass for any API -- ✅ **Saved Work** - Cloud storage for projects -- ✅ **Shareable Links** - Share work with team -- ✅ **Priority Support** - Email support -- ✅ **Export Templates** - Save and reuse configurations - -### Pricing: -- **1 Month**: $2.99 -- **3 Months**: $6.99 (save 22%) -- **6 Months**: $11.99 (save 33%) -- **12 Months**: $19.99 (save 44%) - -### Revenue Mix (After PRO Launch): -``` -Ad Revenue: $800/month (80% of users) -PRO Revenue: $400/month (20 users × $20/year ÷ 12) -────────────────────────────────────── -Total: $1,200/month -``` - ---- - -## Summary - -### Current Strategy (Revised): -✅ **Clean Homepage** - No ads, better UX, better SEO -✅ **Tool Pages Only** - 3 ads on desktop, 1 on mobile -✅ **Conservative Start** - $100/month with 10K visitors -✅ **Growth Potential** - $1,000+/month with 100K visitors -✅ **PRO Tier Later** - Additional revenue stream - -### Revenue Timeline: -``` -Month 1: $100 (10K visitors) -Month 3: $300 (30K visitors) -Month 6: $500 (50K visitors) -Month 12: $1,000 (100K visitors) -Month 18: $1,500 (100K visitors + PRO tier) -``` - -### Why This Works: -1. Clean homepage attracts more users -2. Better SEO = more organic traffic -3. Higher engagement = more tool page views -4. More tool page views = more ad impressions -5. Professional image = higher trust = more return visits - -**This strategy prioritizes long-term growth over short-term revenue!** 🚀 - -Step 1: Create Ad Units in AdSense Dashboard -Go to your AdSense dashboard and create these ad units: - -Desktop Ads (3 units): -1. Name: "Tool Sidebar 1" -- Size: 300x250 (Medium Rectangle) -- Type: Display ads -2. Name: "Tool Sidebar 2" -- Size: 300x250 (Medium Rectangle) -- Type: Display ads -3. Name: "Tool Sidebar 3" -- Size: 300x250 (Medium Rectangle) -- Type: Display ads -Mobile Ad (1 unit): -1. Name: "Mobile Bottom Banner" -- Size: 320x50 (Mobile Banner) -- Type: Display ads -After creating each unit, you'll get an Ad Slot ID like 1234567890. Copy those IDs and give them to me. \ No newline at end of file diff --git a/ADSENSE_SETUP_GUIDE.md b/ADSENSE_SETUP_GUIDE.md deleted file mode 100644 index af32ca01..00000000 --- a/ADSENSE_SETUP_GUIDE.md +++ /dev/null @@ -1,252 +0,0 @@ -# AdSense Setup Guide - Final Steps - -## ✅ What's Already Done: - -1. ✅ **AdSense Script Added** to `public/index.html` -2. ✅ **AdBlock Component** created (`src/components/AdBlock.js`) -3. ✅ **AdColumn Component** created (`src/components/AdColumn.js`) -4. ✅ **MobileAdBanner Component** created (`src/components/MobileAdBanner.js`) -5. ✅ **ToolLayout Updated** to include ads on all tool pages -6. ✅ **Build Successful** - Ready to deploy! - ---- - -## 🎯 What You Need to Do Now: - -### Step 1: Create Ad Units in AdSense Dashboard - -Go to: https://adsense.google.com/ - -**Navigate to:** Ads → By ad unit → Display ads - -**Create 4 Ad Units:** - -#### **Ad Unit 1: Tool Sidebar 1** -- **Name**: `Tool Sidebar 1` -- **Size**: `300x250` (Medium Rectangle) -- **Type**: Display ads -- Click "Create" and **copy the Ad Slot ID** - -#### **Ad Unit 2: Tool Sidebar 2** -- **Name**: `Tool Sidebar 2` -- **Size**: `300x250` (Medium Rectangle) -- **Type**: Display ads -- Click "Create" and **copy the Ad Slot ID** - -#### **Ad Unit 3: Tool Sidebar 3** -- **Name**: `Tool Sidebar 3` -- **Size**: `300x250` (Medium Rectangle) -- **Type**: Display ads -- Click "Create" and **copy the Ad Slot ID** - -#### **Ad Unit 4: Mobile Bottom Banner** -- **Name**: `Mobile Bottom Banner` -- **Size**: `320x50` (Mobile Banner) -- **Type**: Display ads -- Click "Create" and **copy the Ad Slot ID** - ---- - -### Step 2: Update Ad Slot IDs in Code - -After creating the ad units, you'll have 4 slot IDs that look like: `1234567890` - -**Open:** `src/components/AdColumn.js` - -**Replace:** -```javascript -const AdColumn = ({ - slot1 = 'REPLACE_WITH_SLOT_1', // ← Replace with your Slot 1 ID - slot2 = 'REPLACE_WITH_SLOT_2', // ← Replace with your Slot 2 ID - slot3 = 'REPLACE_WITH_SLOT_3' // ← Replace with your Slot 3 ID -}) => { -``` - -**With:** -```javascript -const AdColumn = ({ - slot1 = '1234567890', // ← Your actual Slot 1 ID - slot2 = '0987654321', // ← Your actual Slot 2 ID - slot3 = '1122334455' // ← Your actual Slot 3 ID -}) => { -``` - -**Open:** `src/components/MobileAdBanner.js` - -**Replace:** -```javascript -const MobileAdBanner = ({ slot = 'REPLACE_WITH_MOBILE_SLOT' }) => { -``` - -**With:** -```javascript -const MobileAdBanner = ({ slot = '5544332211' }) => { // ← Your Mobile Slot ID -``` - ---- - -### Step 3: Rebuild and Deploy - -```bash -npm run build:no-snap -``` - -Then deploy to your hosting (Netlify, Vercel, etc.) - ---- - -### Step 4: Test Ads - -**After deployment:** - -1. **Visit any tool page** (not homepage) -2. **Desktop**: You should see 3 ads in the right sidebar -3. **Mobile**: You should see 1 sticky banner at the bottom -4. **Homepage**: Should have NO ads (clean!) - -**Note:** Ads may take 10-30 minutes to start showing after deployment. - ---- - -## 📊 How It Works: - -### **Homepage (Clean - No Ads)** -``` -┌─────────────────────────────┐ -│ Hero Section │ -│ Tool Cards │ -│ Features │ -│ Footer │ -└─────────────────────────────┘ -``` - -### **Tool Pages (Desktop - 3 Ads)** -``` -┌────────────────────────────┬─────────┐ -│ │ [Ad1] │ 300x250 -│ Tool Content │ │ -│ (Object Editor, etc.) │ [Ad2] │ 300x250 -│ │ │ -│ │ [Ad3] │ 300x250 -└────────────────────────────┴─────────┘ -``` - -### **Tool Pages (Mobile - 1 Ad)** -``` -┌─────────────────────────┐ -│ Tool Content │ -│ (Scrollable) │ -│ │ -├─────────────────────────┤ -│ [Ad Banner 320x50] │ ← Sticky -└─────────────────────────┘ -``` - ---- - -## 🎨 Ad Styling: - -Ads are wrapped in: -- Light mode: Gray background (`bg-gray-100`) -- Dark mode: Dark gray background (`bg-gray-800`) -- Rounded corners for modern look -- Proper spacing between ads - ---- - -## 🔧 Troubleshooting: - -### **Ads Not Showing?** - -1. **Wait 10-30 minutes** after deployment -2. **Check AdSense Dashboard** - Make sure account is approved -3. **Check Browser Console** for errors -4. **Disable Ad Blocker** for testing -5. **Verify Slot IDs** are correct in code - -### **Ads Showing Blank Space?** - -- This is normal during testing -- AdSense needs time to fill inventory -- May show blank for first few hours/days -- Will improve as site gets traffic - -### **Mobile Ad Overlapping Content?** - -- There's a `
` at bottom -- This adds padding to prevent overlap -- Adjust height if needed - ---- - -## 📈 Monitoring Performance: - -### **AdSense Dashboard:** -- Go to: https://adsense.google.com/ -- Check: Reports → Overview -- Monitor: - - **Page RPM** (Revenue per 1000 impressions) - - **CTR** (Click-through rate) - - **Impressions** (How many times ads shown) - - **Earnings** (Daily/monthly revenue) - -### **Expected Timeline:** -- **Day 1-7**: Low earnings, AdSense learning -- **Week 2-4**: Earnings stabilize -- **Month 2+**: Optimize based on data - ---- - -## 🚀 Next Steps After Ads Are Live: - -1. **Monitor Performance** (first week) -2. **Optimize Ad Positions** (if needed) -3. **Test Different Ad Sizes** (A/B testing) -4. **Track User Feedback** (any complaints?) -5. **Plan PRO Tier** (ad-free option) - ---- - -## 💰 Revenue Expectations: - -Based on your traffic estimate: - -**Month 1:** $100-150 -- 10,000 visitors -- 15,000 tool page views -- 45,000 ad impressions - -**Month 3:** $300-400 -- 30,000 visitors -- 45,000 tool page views -- 135,000 ad impressions - -**Month 6:** $500-700 -- 50,000 visitors -- 75,000 tool page views -- 225,000 ad impressions - -**Month 12:** $1,000-1,500 -- 100,000 visitors -- 150,000 tool page views -- 450,000 ad impressions - ---- - -## ✅ Checklist: - -- [ ] Create 4 ad units in AdSense dashboard -- [ ] Copy all 4 slot IDs -- [ ] Update `AdColumn.js` with 3 slot IDs -- [ ] Update `MobileAdBanner.js` with 1 slot ID -- [ ] Run `npm run build:no-snap` -- [ ] Deploy to production -- [ ] Test on desktop (should see 3 ads in sidebar) -- [ ] Test on mobile (should see 1 sticky banner) -- [ ] Test homepage (should see NO ads) -- [ ] Wait 30 minutes for ads to start showing -- [ ] Monitor AdSense dashboard for first earnings! - ---- - -**You're almost done! Just need those 4 slot IDs from AdSense!** 🎉 diff --git a/ADSENSE_STRATEGY.md b/ADSENSE_STRATEGY.md deleted file mode 100644 index 05f4e0e0..00000000 --- a/ADSENSE_STRATEGY.md +++ /dev/null @@ -1,446 +0,0 @@ -# Google AdSense Implementation Strategy - -## Overview -Strategic placement of AdSense ads to monetize the developer tools while maintaining excellent user experience. Focus on non-intrusive, contextual ad placements that don't disrupt workflow. - ---- - -## Ad Unit Types & Sizes - -### 1. **Display Ads** -- **Leaderboard (728x90)**: Top of pages, above content -- **Medium Rectangle (300x250)**: Sidebar, between content sections (PRIMARY CHOICE) -- **Large Rectangle (336x280)**: Sidebar, high-visibility areas -- **Note**: For our implementation, we use 300x250 for all desktop sidebar ads to comply with Google AdSense policies (no scrollable containers) - -### 2. **Responsive Ads** -- Auto-adapt to screen size -- Best for mobile compatibility -- Recommended for all placements - -### 3. **In-Feed Ads** -- Native ads that blend with content -- Perfect for tool listings and results - ---- - -## Placement Strategy - -### **Homepage (High Traffic)** - -**Priority: High Revenue Potential** - -``` -┌─────────────────────────────────────┐ -│ Header / Navigation │ -├─────────────────────────────────────┤ -│ Hero Section │ -├─────────────────────────────────────┤ -│ 🟦 AD: Leaderboard (728x90) │ ← Ad #1 -│ Above tool cards │ -├─────────────────────────────────────┤ -│ Tool Cards Grid │ -│ ┌──────┐ ┌──────┐ ┌──────┐ │ -│ │Tool 1│ │Tool 2│ │Tool 3│ │ -│ └──────┘ └──────┘ └──────┘ │ -│ ┌──────┐ ┌──────┐ ┌──────┐ │ -│ │Tool 4│ │Tool 5│ │Tool 6│ │ -│ └──────┘ └──────┘ └──────┘ │ -├─────────────────────────────────────┤ -│ 🟦 AD: Medium Rectangle (300x250) │ ← Ad #2 -│ Between tool sections │ -├─────────────────────────────────────┤ -│ More Tool Cards │ -├─────────────────────────────────────┤ -│ Features Section │ -├─────────────────────────────────────┤ -│ Footer │ -└─────────────────────────────────────┘ -``` - -**Ad Placements:** -- **Ad #1**: Leaderboard above tool cards (high visibility) -- **Ad #2**: Medium Rectangle between tool sections (natural break) - ---- - -### **Tool Pages (Main Revenue Source)** - -**Priority: Balanced UX + Revenue** - -``` -┌─────────────────────────────────────┐ -│ Header / Navigation │ -├──────────────┬──────────────────────┤ -│ │ │ -│ Sidebar │ Main Content Area │ -│ │ │ -│ Tool List │ ┌────────────────┐ │ -│ │ │ Input Section │ │ -│ 🟦 AD Box │ └────────────────┘ │ ← Sidebar Ad -│ (300x250) │ │ -│ │ 🟦 AD: Responsive │ ← Ad #1 -│ │ (Between sections)│ -│ │ │ -│ │ ┌────────────────┐ │ -│ │ │ Editor Section │ │ -│ │ └────────────────┘ │ -│ │ │ -│ │ 🟦 AD: Responsive │ ← Ad #2 -│ │ (Before export) │ -│ │ │ -│ │ ┌────────────────┐ │ -│ │ │ Export Section │ │ -│ │ └────────────────┘ │ -│ │ │ -└──────────────┴──────────────────────┘ -``` - -**Ad Placements:** -- **Sidebar Ad**: Medium Rectangle (300x250) - Always visible on desktop -- **Ad #1**: Responsive ad between Input and Editor sections -- **Ad #2**: Responsive ad between Editor and Export sections - ---- - -### **Mobile Layout** - -**Priority: Non-Intrusive** - -``` -┌─────────────────────┐ -│ Header │ -├─────────────────────┤ -│ Input Section │ -├─────────────────────┤ -│ 🟦 AD: Responsive │ ← Ad #1 (Anchor/Banner) -├─────────────────────┤ -│ Editor Section │ -├─────────────────────┤ -│ 🟦 AD: Responsive │ ← Ad #2 (Between sections) -├─────────────────────┤ -│ Export Section │ -├─────────────────────┤ -│ Footer │ -└─────────────────────┘ -``` - -**Mobile-Specific:** -- Use **Anchor Ads** (sticky bottom banner) -- Responsive ads that adapt to screen width -- Fewer ads to maintain UX - ---- - -## Specific Tool Placements - -### **Table Editor** -``` -Input Section (URL/Paste/Open) -↓ -🟦 AD: Responsive (320x100 mobile, 728x90 desktop) -↓ -Table Editor (Main workspace) -↓ -🟦 AD: Medium Rectangle (300x250) - Right aligned -↓ -Export Section -``` - -### **Object Editor** -``` -Input Section -↓ -🟦 AD: Responsive -↓ -Visual Editor / Mindmap / Table View -↓ -🟦 AD: Responsive (before export) -↓ -Export Results -``` - -### **Invoice Editor** -``` -Invoice Form -↓ -🟦 AD: Sidebar (300x250) - Desktop only -↓ -Preview Section -↓ -🟦 AD: Responsive (before export) -↓ -Export Options -``` - -### **Converter/Formatter Tools** -``` -Input Textarea -↓ -🟦 AD: Responsive -↓ -Convert/Format Button -↓ -Output Textarea -↓ -🟦 AD: Medium Rectangle (if space allows) -``` - ---- - -## Ad Frequency Rules - -### **Maximum Ads Per Page:** -- **Homepage**: 2-3 ads -- **Tool Pages**: 2-3 ads (desktop), 1-2 ads (mobile) -- **Never**: More than 1 ad per viewport height - -### **Minimum Content-to-Ad Ratio:** -- At least 300px of content between ads -- Never place ads immediately adjacent -- Maintain 50% content, 50% white space, minimal ads - ---- - -## PRO User Benefits (Ad-Free) - -### **Free Users:** -- See all ads as described above -- Full tool functionality -- Standard experience - -### **PRO Users ($5-10/month):** -- ✅ **Ad-Free Interface** - No ads anywhere -- ✅ **Backend Proxy** - CORS bypass for any API -- ✅ **Saved Work** - Cloud storage for projects -- ✅ **Shareable Links** - Share work with team -- ✅ **Advanced Features** - Custom HTTP methods, headers, auth -- ✅ **Priority Support** - Email support -- ✅ **Export Templates** - Save and reuse configurations - ---- - -## Implementation Plan - -### **Phase 1: Basic AdSense Setup (Week 1)** -- [ ] Apply for Google AdSense account -- [ ] Get approval (usually 1-2 weeks) -- [ ] Create ad units in AdSense dashboard -- [ ] Get ad unit codes - -### **Phase 2: Homepage Integration (Week 2)** -- [ ] Create `AdSense` component -- [ ] Add Leaderboard ad above tool cards -- [ ] Add Medium Rectangle between sections -- [ ] Test responsive behavior -- [ ] Verify ad display and tracking - -### **Phase 3: Tool Pages Integration (Week 3)** -- [ ] Add sidebar ad component -- [ ] Add responsive ads between sections -- [ ] Implement mobile anchor ads -- [ ] Test on all tools -- [ ] Optimize placement based on CTR - -### **Phase 4: PRO Feature Integration (Week 4)** -- [ ] Create PRO user detection system -- [ ] Hide ads for PRO users -- [ ] Add "Remove Ads" upgrade prompt -- [ ] Implement payment system (Stripe) -- [ ] Test PRO vs FREE experience - ---- - -## Technical Implementation - -### **AdSense Component** - -```javascript -// src/components/AdSense.js -import React, { useEffect } from 'react'; -import { getCurrentUserTier, USER_TIER } from '../config/features'; - -const AdSense = ({ - slot, - format = 'auto', - responsive = true, - style = {} -}) => { - const userTier = getCurrentUserTier(); - - // Don't show ads for PRO users - if (userTier === USER_TIER.PRO) { - return null; - } - - useEffect(() => { - try { - (window.adsbygoogle = window.adsbygoogle || []).push({}); - } catch (e) { - console.error('AdSense error:', e); - } - }, []); - - return ( -
- -
- ); -}; - -export default AdSense; -``` - -### **Usage Example** - -```javascript -// In TableEditor.js -import AdSense from '../components/AdSense'; - -// Between sections - - -// Sidebar - -``` - -### **Add Script to index.html** - -```html - - - - - -``` - ---- - -## Revenue Estimation - -### **Traffic Assumptions:** -- 1,000 daily visitors -- 3 page views per visitor = 3,000 page views/day -- 90,000 page views/month - -### **AdSense Metrics:** -- Average CPM: $2-5 (developer tools niche) -- Average CTR: 1-2% -- Average CPC: $0.50-2.00 - -### **Monthly Revenue Estimate:** - -**Conservative (Low End):** -- 90,000 page views × $2 CPM = $180/month -- Or: 90,000 × 1% CTR × $0.50 CPC = $450/month - -**Optimistic (High End):** -- 90,000 page views × $5 CPM = $450/month -- Or: 90,000 × 2% CTR × $2.00 CPC = $3,600/month - -**Realistic Target:** $300-800/month with optimization - ---- - -## Best Practices - -### **Do's:** -✅ Place ads in natural content breaks -✅ Use responsive ad units -✅ Test different placements and track CTR -✅ Maintain good content-to-ad ratio -✅ Respect user experience -✅ Offer ad-free PRO option - -### **Don'ts:** -❌ Place ads in middle of forms or editors -❌ Use too many ads per page -❌ Hide ads with CSS (against policy) -❌ Click own ads (instant ban) -❌ Encourage clicks ("Click here!") -❌ Place ads too close together - ---- - -## Monitoring & Optimization - -### **Key Metrics to Track:** -1. **Page RPM** (Revenue per 1000 impressions) -2. **CTR** (Click-through rate) -3. **CPC** (Cost per click) -4. **Viewability** (% of ads actually seen) -5. **User Engagement** (bounce rate, time on site) - -### **A/B Testing:** -- Test different ad positions -- Test ad sizes and formats -- Monitor which tools generate most revenue -- Optimize based on data - -### **Monthly Review:** -- Analyze AdSense reports -- Identify top-performing placements -- Remove low-performing ads -- Test new positions - ---- - -## Compliance & Policy - -### **Google AdSense Policies:** -- No invalid clicks or impressions -- No prohibited content -- Proper ad placement (not deceptive) -- Privacy policy must mention ads -- Cookie consent for EU users (already implemented) - -### **Privacy Policy Update:** -```markdown -## Advertising - -We use Google AdSense to display advertisements on our website. -Google AdSense uses cookies to serve ads based on your prior visits -to our website or other websites. You may opt out of personalized -advertising by visiting Google's Ads Settings. - -Third-party vendors, including Google, use cookies to serve ads -based on a user's prior visits to our website. Users may opt out -of Google's use of cookies by visiting the Google advertising -opt-out page. -``` - ---- - -## Summary - -### **Immediate Actions:** -1. ✅ Hide Advanced Options (Done) -2. 📝 Apply for Google AdSense -3. 📝 Create AdSense component -4. 📝 Implement homepage ads first -5. 📝 Test and optimize - -### **Future Enhancements:** -- PRO subscription system -- Backend proxy for CORS -- Saved work and templates -- Team collaboration features -- Analytics dashboard - -**Goal:** Generate $500-1000/month from ads while maintaining excellent UX, then offer PRO tier for ad-free experience + premium features. diff --git a/README.md b/README.md index 5d7f15d1..6e3fa680 100644 --- a/README.md +++ b/README.md @@ -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 -cd developer-tools -``` + ```bash + git clone + 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 diff --git a/SEO_IMPROVEMENT_PLAN.md b/SEO_IMPROVEMENT_PLAN.md index 7ddbe5c3..1c2b4719 100644 --- a/SEO_IMPROVEMENT_PLAN.md +++ b/SEO_IMPROVEMENT_PLAN.md @@ -19,12 +19,10 @@ ### 1. **Add Missing Tools to Sitemap** -**Current Issue:** Sitemap is missing several tools: -- ❌ Markdown Editor -- ❌ JSON Tool -- ❌ CSV/JSON Converter -- ❌ Serialize Tool -- ❌ Release Notes page +**Current Issue:** Sitemap was missing the Markdown Editor and Release Notes pages. + +> **Note:** `/json`, `/csv-json`, and `/serialize` routes were planned but never implemented. +> These tools are now consolidated into the Object Editor (`/object-editor`). **Action:** Update `public/sitemap.xml` @@ -36,24 +34,6 @@ monthly 0.9 - - https://dewe.dev/json - 2025-10-22 - monthly - 0.8 - - - https://dewe.dev/csv-json - 2025-10-22 - monthly - 0.8 - - - https://dewe.dev/serialize - 2025-10-22 - monthly - 0.8 - https://dewe.dev/release-notes 2025-10-22 @@ -296,8 +276,8 @@ Write and preview markdown with live rendering **Add to `index.html`:** ```html - - + + ``` --- diff --git a/package-lock.json b/package-lock.json index 6c3bfea4..01050357 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,7 +45,6 @@ "react-dom": "18.3.1", "react-helmet-async": "^2.0.5", "react-router-dom": "6.26.2", - "react-scripts": "5.0.1", "react-snap": "^1.23.0", "reactflow": "^11.11.4", "serialize-javascript": "^6.0.0", diff --git a/package.json b/package.json index d3a9d295..e3a93f1f 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "description": "Web Developer Tools MVP - Utilities Toolkit", "private": true, "dependencies": { - "@codemirror/basic-setup": "^0.20.0", "@codemirror/commands": "^6.8.1", "@codemirror/lang-css": "^6.3.1", "@codemirror/lang-html": "^6.4.9", @@ -41,7 +40,6 @@ "react-dom": "18.3.1", "react-helmet-async": "^2.0.5", "react-router-dom": "6.26.2", - "react-scripts": "5.0.1", "react-snap": "^1.23.0", "reactflow": "^11.11.4", "serialize-javascript": "^6.0.0", @@ -56,6 +54,7 @@ "tailwindcss": "^3.3.0" }, "scripts": { + "dev": "react-scripts start", "start": "react-scripts start", "start:prod": "serve -s build -l 3000", "build": "react-scripts build && react-snap", @@ -83,7 +82,7 @@ "/beautifier", "/diff", "/text-length", - "/whats-new", + "/markdown-editor", "/privacy", "/terms" ] diff --git a/public/images/onidel-banner.webp b/public/images/onidel-banner.webp new file mode 100644 index 00000000..b1285429 Binary files /dev/null and b/public/images/onidel-banner.webp differ diff --git a/public/index.html b/public/index.html index df99a2a6..f003055e 100644 --- a/public/index.html +++ b/public/index.html @@ -14,9 +14,7 @@ Developer Tools - Web Developer Utilities - - + diff --git a/public/manifest.json b/public/manifest.json index a6adb688..5734231e 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -6,6 +6,18 @@ "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" + }, + { + "src": "icon-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any maskable" + }, + { + "src": "icon-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "any maskable" } ], "start_url": ".", diff --git a/public/sitemap.xml b/public/sitemap.xml index ba56e80e..7247c47d 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -72,12 +72,6 @@ - - https://dewe.dev/whats-new - 2025-10-22 - weekly - 0.7 - https://dewe.dev/release-notes 2025-10-22 diff --git a/src/App.js b/src/App.js index 100514ea..72e321e6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,28 +1,30 @@ -import React, { useEffect } from 'react'; -import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import React, { useEffect, Suspense, lazy } from 'react'; +import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; import { HelmetProvider } from 'react-helmet-async'; import Layout from './components/Layout'; import ErrorBoundary from './components/ErrorBoundary'; -import Home from './pages/Home'; -import UrlTool from './pages/UrlTool'; -import Base64Tool from './pages/Base64Tool'; -import BeautifierTool from './pages/BeautifierTool'; -import DiffTool from './pages/DiffTool'; -import TextLengthTool from './pages/TextLengthTool'; -import ObjectEditor from './pages/ObjectEditor'; -import TableEditor from './pages/TableEditor'; -import InvoiceEditor from './pages/InvoiceEditor'; -import MarkdownEditor from './pages/MarkdownEditor'; -import InvoicePreview from './pages/InvoicePreview'; -import InvoicePreviewMinimal from './pages/InvoicePreviewMinimal'; -import ReleaseNotes from './pages/ReleaseNotes'; -import TermsOfService from './pages/TermsOfService'; -import PrivacyPolicy from './pages/PrivacyPolicy'; -import NotFound from './pages/NotFound'; +import Loading from './components/Loading'; import { initGA } from './utils/analytics'; import './index.css'; +const Home = lazy(() => import('./pages/Home')); +const UrlTool = lazy(() => import('./pages/UrlTool')); +const Base64Tool = lazy(() => import('./pages/Base64Tool')); +const BeautifierTool = lazy(() => import('./pages/BeautifierTool')); +const DiffTool = lazy(() => import('./pages/DiffTool')); +const TextLengthTool = lazy(() => import('./pages/TextLengthTool')); +const ObjectEditor = lazy(() => import('./pages/ObjectEditor')); +const TableEditor = lazy(() => import('./pages/TableEditor')); +const InvoiceEditor = lazy(() => import('./pages/InvoiceEditor')); +const MarkdownEditor = lazy(() => import('./pages/MarkdownEditor')); +const InvoicePreview = lazy(() => import('./pages/InvoicePreview')); +const InvoicePreviewMinimal = lazy(() => import('./pages/InvoicePreviewMinimal')); +const ReleaseNotes = lazy(() => import('./pages/ReleaseNotes')); +const TermsOfService = lazy(() => import('./pages/TermsOfService')); +const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy')); +const NotFound = lazy(() => import('./pages/NotFound')); + function App() { // Initialize Google Analytics on app startup useEffect(() => { @@ -34,6 +36,7 @@ function App() { + }> } /> } /> @@ -47,12 +50,13 @@ function App() { } /> } /> } /> - } /> + } /> } /> } /> } /> } /> + diff --git a/src/components/AdBlock.js b/src/components/AdBlock.js index e9748e6a..5ed96b52 100644 --- a/src/components/AdBlock.js +++ b/src/components/AdBlock.js @@ -1,35 +1,48 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; + +const AdBlock = ({ className = '', adKey = 'e0ca7c61c83457f093bbc2e261b43d31' }) => { + const iframeRef = useRef(null); -/** - * AdBlock Component - Individual ad unit - * Displays a single Google AdSense ad - */ -const AdBlock = ({ slot, size = '300x250', className = '' }) => { useEffect(() => { - try { - // Push ad to AdSense queue - (window.adsbygoogle = window.adsbygoogle || []).push({}); - } catch (e) { - console.error('AdSense error:', e); - } - }, []); + if (!iframeRef.current) return; - const [width, height] = size.split('x'); + const iframe = iframeRef.current; + const doc = iframe.contentDocument || iframe.contentWindow.document; + + doc.open(); + doc.write(` + + + + + + + + + + + `); + doc.close(); + }, [adKey]); return ( -
- -
+