dewedev/TODO.md

Developer Tools - To-Do List

Last Updated: October 22, 2025

---

📋 Phase 1: Foundation & Monetization

⭐ Priority 1: Advanced URL Fetch (1-2 days) - ✅ COMPLETED

Design & Planning

• Design UI mockup for simple mode
• Design UI mockup for advanced mode
• Design toggle between modes
• Plan state management structure
• Plan localStorage schema for presets

Component Development

• Create AdvancedURLFetch.jsx component
• Create HTTPMethodSelector.jsx component
• Create HeadersEditor.jsx component (key-value pairs)
• Create RequestBodyEditor.jsx component (CodeMirror)
• Create QueryParamsBuilder.jsx component
• Create AuthPresets.jsx component
• Create RequestPresetManager.jsx component

Simple Mode

• Implement URL input field
• Implement GET request button
• Implement loading state
• Implement error handling
• Add helper text

Advanced Mode

• Implement mode toggle button
• Implement HTTP method selector (GET, POST, PUT, DELETE, PATCH)
• Implement custom headers input
  • Add header button
  • Remove header button
  • Key-value pair inputs
  • Validation
• Implement request body editor
  • CodeMirror integration
  • JSON syntax highlighting
  • JSON validation
  • Format button
• Implement query parameters builder
  • Add param button
  • Remove param button
  • Key-value pair inputs
  • Auto-append to URL
• Implement auth presets
  • Bearer Token preset
  • Basic Auth preset
  • API Key preset
  • Custom preset

Response Display

• Create response tabs (Body, Headers, Status)
• Implement response body display (formatted JSON)
• Implement response headers display
• Implement status code display with color coding
• Add response time display
• Add response size display

Presets Management

• Implement save preset functionality
• Implement load preset functionality
• Implement delete preset functionality
• Implement preset list UI
• Store presets in localStorage
• Add preset name input
• Add preset description (optional)

Integration

• Integrate into Object Editor
  • Replace simple URL input
  • Test with various APIs
  • Update Usage Tips
• Integrate into Table Editor
  • Replace simple URL input
  • Test with various APIs
  • Update Usage Tips
• Integrate into Invoice Editor
  • Replace simple URL input
  • Test with various APIs
  • Update Usage Tips

Testing

• Test with GitHub API (requires auth)
• Test with JSONPlaceholder (public API)
• Test with Telegram Bot API
• Test with GraphQL endpoint
• Test with POST request + body
• Test with custom headers
• Test with query parameters
• Test error scenarios (404, 500, timeout)
• Test loading states
• Test preset save/load
• Test on mobile devices
• Test dark mode

Documentation

• Update EDITOR_TOOL_GUIDE.md with advanced URL pattern
• Add code examples
• Add screenshots
• Update EDITOR_CHECKLIST.md

---

💰 Priority 2: Ad Space Preparation (1 day) - ✅ COMPLETED

Design

• Finalize desktop ad column layout
• Finalize mobile ad banner layout
• Design placeholder ads for testing
• Plan responsive breakpoints

Desktop Ad Column

• Create AdColumn.jsx component
  • 300px fixed width
  • Sticky scroll behavior
  • Space for 3 ad blocks
  • Proper spacing between ads
• Create AdBlock.jsx component
  • Support 300x250 size (all ads use this size for AdSense compliance)
  • Placeholder content for testing
  • Loading state
  • Error state (if ad fails to load)
• Implement responsive behavior
  • Show on screens >= 1200px
  • Hide on screens < 1200px
  • Smooth transition

Mobile Ad Banner

• Create MobileAdBanner.jsx component
  • 320x50 or 320x100 size
  • Sticky bottom position
  • Close button
  • Slide-in animation (optional)
• Implement close functionality
  • Hide banner on close
  • Store preference in localStorage (optional)
  • Respect user choice
• Add padding-bottom to content
  • Ensure content not hidden behind banner
  • Dynamic padding based on banner height

Layout Integration

• Update ToolLayout.jsx to include ad spaces
  • Add ad column container
  • Add mobile banner container
  • Maintain proper spacing
• Update main content width
  • Desktop: calc(100% - 320px)
  • Mobile: 100%
• Test layout on all tool pages
  • Object Editor
  • Table Editor
  • Invoice Editor

Testing

• Test desktop layout (1200px+)
• Test tablet layout (768px - 1199px)
• Test mobile layout (<768px)
• Test sticky scroll behavior
• Test sticky bottom banner
• Test close button functionality
• Test with placeholder ads
• Test dark mode compatibility
• Test on various screen sizes
• Test on actual devices (iOS, Android)

Performance

• Ensure no layout shift
• Optimize rendering performance
• Test scroll performance
• Measure impact on page load time

---

💵 Priority 3: AdSense Integration (1 day) - ⏳ IN PROGRESS

AdSense Setup

• Apply for Google AdSense account
• Provide website URL
• Provide contact information
• Wait for approval (can take 1-3 days)
• Verify site ownership (add verification code)

Ad Units Creation

• Log in to AdSense dashboard
• Create ad unit: Desktop Sidebar 1 (300x250)
• Create ad unit: Desktop Sidebar 2 (300x250)
• Create ad unit: Desktop Sidebar 3 (300x250)
• Create ad unit: Mobile Bottom Banner (320x50)
• Copy ad unit codes

Implementation

• Add AdSense script to public/index.html

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXX"
       crossorigin="anonymous"></script>
  

• Update AdBlock.jsx with AdSense code

  <ins className="adsbygoogle"
       style={{ display: 'block' }}
       data-ad-client="ca-pub-XXXXXXXX"
       data-ad-slot="XXXXXXXXXX"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  

• Update MobileAdBanner.jsx with AdSense code
• Initialize ads: (adsbygoogle = window.adsbygoogle || []).push({});

Testing

• Test ad display on desktop
• Test ad display on mobile
• Verify ads load correctly
• Check for console errors
• Test with ad blocker (should show message)
• Test on different browsers (Chrome, Firefox, Safari)
• Test on different devices

Monitoring

• Set up AdSense reporting
• Monitor ad impressions
• Monitor ad clicks
• Monitor ad revenue
• Track CTR (Click-Through Rate)
• Identify best-performing ad units

Compliance

• Create Privacy Policy page
  • Data collection disclosure
  • Cookie usage disclosure
  • Third-party services (AdSense)
  • User rights (GDPR)
• Create Terms of Service page
  • Acceptable use policy
  • Disclaimer
  • Limitation of liability
• Add cookie consent banner (if required)
  • Show on first visit
  • Allow accept/decline
  • Store preference
• Add "About Ads" link in footer
• Add "Privacy Policy" link in footer
• Add "Terms of Service" link in footer

Optimization

• Test different ad placements
• Test different ad sizes
• Monitor ad viewability
• Optimize for higher CTR
• A/B test ad positions (optional)

---

📋 Phase 2: Content Expansion

📝 Markdown Editor - MVP (1-2 weeks) - ✅ COMPLETED (Oct 22, 2025)

Planning

• Finalize feature list for MVP
• Design UI mockup (split view)
• Plan component structure
• Choose markdown parser (marked vs markdown-it)
• Plan export formats

Project Setup

• Create MarkdownEditor.jsx page
• Set up routing (/markdown-editor)
• Add to navigation menu
• Add to homepage tools list

Input Section

• Implement Create New tab
  • Start Empty button
  • Load Sample button (with example markdown)
  • Tip box
• Implement URL tab
  • Use AdvancedURLFetch component
  • Support GitHub raw URLs
  • Support Gist URLs
  • Test with various markdown sources
• Implement Paste tab
  • CodeMirror editor
  • Markdown syntax highlighting
  • Auto-detect markdown
  • Parse button
  • Collapse after parse
• Implement Open tab
  • Support .md files
  • Support .txt files
  • Support .html files (convert to markdown)
  • Support .docx files (convert to markdown)
  • Auto-load on file selection

Editor Section

• Set up CodeMirror for markdown
  • Install @codemirror/lang-markdown
  • Configure markdown mode
  • Add syntax highlighting
  • Add line numbers
  • Add line wrapping
• Implement split view layout
  • Editor pane (left)
  • Preview pane (right)
  • Resizable divider (optional)
• Implement view mode toggle
  • Split view (default)
  • Editor only
  • Preview only
  • Fullscreen mode
• Add markdown toolbar
  • Bold button (Ctrl+B)
  • Italic button (Ctrl+I)
  • H1 button
  • H2 button
  • H3 button
  • Link button (Ctrl+K)
  • Image button
  • Code button (Ctrl+`)
  • Quote button
  • Unordered list button
  • Ordered list button
  • Table button
• Add editor features
  • Word count
  • Character count
  • Line count
  • Reading time estimate

Preview Section

• Set up markdown parser (marked)
  • Install marked
  • Install DOMPurify
  • Configure marked options
• Implement live preview
  • Real-time rendering
  • Debounce for performance
  • Scroll sync (optional)
• Add syntax highlighting for code blocks
  • Install highlight.js
  • Configure languages
  • Apply highlighting
• Add GitHub Flavored Markdown support
  • Tables
  • Strikethrough
  • Task lists
  • Autolinks
• Implement Table of Contents
  • Auto-generate from headers
  • Clickable links
  • Collapsible (optional)
• Add mermaid diagram rendering
  • Install mermaid
  • Detect mermaid code blocks
  • Render diagrams
  • Error handling

Export Section

• Create collapsible export section
• Implement Markdown export
  • Standard Markdown
  • GitHub Flavored Markdown
  • CommonMark
  • Copy to clipboard
  • Download as .md file
• Implement HTML export
  • Standalone HTML with CSS
  • Inline styles
  • Include syntax highlighting CSS
  • Copy to clipboard
  • Download as .html file
• Implement Plain Text export
  • Strip all formatting
  • Copy to clipboard
  • Download as .txt file
• Implement PDF export
  • Install html2pdf.js
  • Convert HTML to PDF
  • Maintain formatting
  • Download as .pdf file
• Implement DOCX export
  • Install docx library
  • Convert markdown to DOCX
  • Maintain formatting
  • Download as .docx file

Conversion Features

• HTML to Markdown conversion
  • Install turndown
  • Convert on paste (if HTML detected)
  • Convert on file open (.html)
• DOCX to Markdown conversion
  • Install mammoth.js
  • Convert on file open (.docx)
  • Extract text and formatting

Usage Tips

• Create collapsible Usage Tips section
• Add Input Methods tips
• Add Editor Features tips
• Add Markdown Syntax tips
• Add Export Options tips
• Add Data Privacy tips

Data Loss Prevention

• Implement hasUserData() function
• Implement hasModifiedData() function
• Add confirmation modal for tab changes
• Add confirmation for Create New buttons

Testing

• Test all input methods
• Test markdown rendering
• Test all export formats
• Test HTML to Markdown conversion
• Test DOCX import
• Test mermaid diagrams
• Test code syntax highlighting
• Test Table of Contents
• Test view mode toggle
• Test toolbar buttons
• Test keyboard shortcuts
• Test responsive design
• Test dark mode
• Test on mobile devices

Documentation

• Add to EDITOR_TOOL_GUIDE.md
• Create user guide
• Add screenshots
• Create tutorial video (optional)

---

📝 Markdown Editor - Post-MVP (Future)

Advanced Markdown Features

• Add table support (GitHub-style)
• Add task lists (checkboxes)
• Add footnotes support
• Add emoji support (😄)
• Add math equations (KaTeX)
  • Install katex
  • Detect math blocks
  • Render equations

Templates

• Create README.md template
• Create Documentation template
• Create Blog post template
• Create Meeting notes template
• Create Project proposal template
• Add template selector UI
• Allow custom templates

Utilities

• Add markdown linter
  • Check for common issues
  • Suggest improvements
  • Show warnings
• Add link checker
  • Validate URLs
  • Check for broken links
  • Show status
• Add format beautifier
  • Clean up markdown
  • Consistent formatting
  • Fix indentation
• Add image optimizer
  • Compress images
  • Convert to base64
  • Optimize for web

Enhanced Features

• Add keyboard shortcuts
• Add auto-save (localStorage)
• Add export history
• Add version history
• Add collaborative editing (future)

---

🎨 Diagram Tool - MVP (1-2 weeks)

Planning

• Finalize feature list for MVP
• Design UI mockup
• Plan component structure
• Research mermaid.js capabilities

Project Setup

• Create DiagramEditor.jsx page
• Set up routing (/diagram-editor)
• Add to navigation menu
• Add to homepage tools list

Input Section

• Implement Create New tab
  • Start Empty button
  • Load Sample button (with example diagrams)
  • Diagram type selector
• Implement URL tab
  • Use AdvancedURLFetch component
  • Support mermaid code URLs
  • Support PlantUML URLs (future)
• Implement Paste tab
  • CodeMirror editor
  • Mermaid syntax highlighting
  • Parse button
  • Collapse after parse
• Implement Open tab
  • Support .mmd files
  • Support .mermaid files
  • Support .txt files
  • Auto-load on file selection

Editor Section

• Set up CodeMirror for mermaid
  • Configure mermaid mode
  • Add syntax highlighting
  • Add line numbers
• Implement diagram type selector
  • Flowchart
  • Sequence Diagram
  • Class Diagram
  • State Diagram
  • Entity Relationship Diagram
  • Gantt Chart
  • Pie Chart
  • Git Graph
• Add code templates for each diagram type
• Add error detection
  • Syntax errors
  • Invalid diagram type
  • Show error messages

Preview Section

• Set up mermaid.js
  • Install mermaid
  • Configure mermaid
  • Initialize mermaid
• Implement live preview
  • Real-time rendering
  • Debounce for performance
  • Error handling
• Add zoom controls
  • Zoom in button
  • Zoom out button
  • Reset zoom button
  • Fit to screen button
• Add pan controls
  • Drag to pan
  • Pan with mouse wheel
• Add fullscreen mode

Export Section

• Create collapsible export section
• Implement PNG export
  • Install html2canvas
  • Convert SVG to PNG
  • Download as .png file
• Implement SVG export
  • Extract SVG from preview
  • Download as .svg file
• Implement PDF export
  • Convert SVG to PDF
  • Download as .pdf file
• Implement Mermaid Code export
  • Copy to clipboard
  • Download as .mmd file

Usage Tips

• Create collapsible Usage Tips section
• Add Input Methods tips
• Add Diagram Types tips
• Add Mermaid Syntax tips
• Add Export Options tips
• Add Data Privacy tips

Data Loss Prevention

• Implement hasUserData() function
• Implement hasModifiedData() function
• Add confirmation modal for tab changes
• Add confirmation for Create New buttons

Testing

• Test all input methods
• Test all diagram types
• Test diagram rendering
• Test all export formats
• Test zoom controls
• Test pan controls
• Test fullscreen mode
• Test error handling
• Test responsive design
• Test dark mode
• Test on mobile devices

Documentation

• Add to EDITOR_TOOL_GUIDE.md
• Create user guide
• Add screenshots
• Create tutorial video (optional)

---

🎨 Diagram Tool - Post-MVP (Future)

Visual Editor

• Design drag-and-drop interface
• Implement node library (shapes, icons)
• Implement connection tools
• Implement styling options (colors, fonts, borders)
• Add Excalidraw-style drawing
• Add auto-layout options

Advanced Features

• Add PlantUML import
• Add custom themes
• Add diagram templates
• Add collaboration features (future)
• Add version history

---

📋 Phase 3: Monetization Backend

💳 Payment Integration (1 week)

Planning

• Choose payment provider (Stripe recommended)
• Plan payment flow
• Plan database schema
• Plan backend architecture

Stripe Setup

• Create Stripe account
• Verify business information
• Set up pricing plans in Stripe
  • 1 month: $2.99
  • 3 months: $6.99
  • 6 months: $11.99
  • 12 months: $19.99
• Get API keys (test and live)

Backend Setup

• Choose backend (Node.js + Express or serverless)
• Set up backend project
• Set up database (PostgreSQL or MongoDB)
• Create database schema
  • Users table
  • Purchases table
  • Ad-free status table
• Set up environment variables

API Development

• Create payment intent endpoint
• Create payment confirmation endpoint
• Create purchase history endpoint
• Create ad-free status endpoint
• Add error handling
• Add logging

Frontend Integration

• Design payment flow UI
• Create checkout page
• Integrate Stripe Elements
• Implement payment form
• Implement payment success handling
• Implement payment failure handling
• Add loading states
• Add error messages

Email Integration

• Choose email service (SendGrid recommended)
• Set up email service account
• Create email templates
  • Purchase confirmation
  • Receipt
  • Expiry reminder
• Implement email sending

Testing

• Test payment flow (test mode)
• Test with test cards
• Test payment success
• Test payment failure
• Test email sending
• Test with real payment (small amount)
• Test on different browsers
• Test on mobile devices

Deployment

• Deploy backend
• Set up production database
• Configure environment variables
• Test in production
• Monitor transactions

Legal & Compliance

• Add refund policy
• Add customer support email
• Update Terms of Service
• Update Privacy Policy

---

👤 User Accounts (1 week)

Planning

• Choose auth provider (Firebase Auth or Auth0)
• Plan auth flow
• Plan user data structure

Auth Setup

• Create auth provider account
• Configure auth provider
• Get API keys
• Set up authentication methods
  • Email + password
  • Google OAuth (optional)
  • GitHub OAuth (optional)

UI Development

• Design login page
• Design signup page
• Design profile page
• Create login form
• Create signup form
• Create profile page
• Add form validation

Auth Implementation

• Implement email + password auth
• Implement OAuth (optional)
• Implement logout functionality
• Implement password reset flow
• Implement email verification
• Add session management

User Profile

• Display user information
• Display ad-free status
• Display purchase history
• Add edit profile functionality
• Add change password functionality

Integration

• Connect auth to payment system
• Store user ID with purchases
• Track ad-free status
• Update UI based on auth state

Testing

• Test signup flow
• Test login flow
• Test logout flow
• Test password reset
• Test email verification
• Test on different browsers
• Test on mobile devices

Security

• Add rate limiting
• Add CSRF protection
• Add XSS protection
• Add SQL injection protection
• Implement secure session handling

---

🚫 Ad-Free Experience (3 days)

UI Development

• Design ad-free badge
• Design expiry reminder
• Design renewal flow
• Create ad-free badge component
• Create expiry reminder component

Implementation

• Check ad-free status on page load
• Hide ads for ad-free users
• Show ad-free badge in UI
• Implement expiry reminder (7 days before)
• Implement grace period (3 days after expiry)
• Add renewal flow

Testing

• Test ad-free status check
• Test ad hiding
• Test ad-free badge display
• Test expiry reminder
• Test grace period
• Test renewal flow
• Test on different browsers
• Test on mobile devices

Monitoring

• Track ad-free user count
• Monitor expiry dates
• Send expiry reminders
• Collect feedback from ad-free users

---

🎯 Quick Wins (Can Do Anytime)

SEO & Marketing

• Optimize page titles
• Optimize meta descriptions
• Add Open Graph tags
• Add Twitter Card tags
• Create sitemap.xml
• Submit to Google Search Console
• Create robots.txt

Content

• Write blog post: "How to use Object Editor"
• Write blog post: "How to use Table Editor"
• Write blog post: "How to use Invoice Editor"
• Create tutorial videos
• Share on Reddit
• Share on Hacker News
• Share on Twitter/X

UX Improvements

• Add loading skeletons
• Add empty states
• Add success messages
• Add error messages
• Improve error handling
• Add tooltips
• Add keyboard shortcuts

Performance

• Implement code splitting
• Lazy load components
• Optimize images
• Minify CSS/JS
• Add caching headers
• Implement service worker (PWA)

---

📊 Metrics to Track

User Metrics

• Daily active users (DAU)
• Weekly active users (WAU)
• Monthly active users (MAU)
• New users per day
• Returning users
• User retention rate

Tool Usage

• Object Editor usage
• Table Editor usage
• Invoice Editor usage
• Markdown Editor usage (when launched)
• Diagram Tool usage (when launched)
• Most popular features

Monetization

• Ad impressions per day
• Ad clicks per day
• Ad CTR (Click-Through Rate)
• Ad revenue per day
• Ad-free purchases per month
• Ad-free revenue per month
• Total revenue per month

Performance

• Page load time
• Time to interactive
• First contentful paint
• Largest contentful paint
• Cumulative layout shift

---

End of To-Do List