# 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: Adsterra Integration (1 day) - ✅ COMPLETED

#### Adsterra Setup
- [x] Apply for Adsterra publisher account
- [x] Add website URL
- [x] Receive approval

#### Ad Units Creation
- [x] Create ad unit: Desktop Sidebar 1 (300x250)
- [x] Create ad unit: Desktop Sidebar 2 (300x250)
- [x] Create ad unit: Mobile Bottom Banner (320x50)
- [x] Copy ad unit codes
- [x] Request Anti-Adblock custom domain

#### Implementation
- [x] Update `AdBlock.jsx` with Adsterra iframe code
- [x] Update `MobileAdBanner.jsx` with Adsterra iframe code
- [x] Update custom Anti-Adblock domain (`downconvenientmagnetic.com`)

#### Testing
- [x] Test ad display on desktop
- [x] Test ad display on mobile
- [x] Verify ads load correctly
- [x] Check for console errors
- [x] Test on different devices

#### Monitoring
- [x] Monitor ad impressions
- [x] Monitor ad clicks
- [x] Track CTR (Click-Through Rate)

#### Compliance
- [x] Create Privacy Policy page
  - [x] Data collection disclosure
  - [x] Cookie usage disclosure
  - [x] Third-party services (Adsterra)
  - [x] User rights (GDPR)
- [x] Create Terms of Service page
  - [x] Acceptable use policy
  - [x] Disclaimer
  - [x] Limitation of liability
- [x] Add cookie consent banner
- [x] Add "Privacy Policy" link in footer
- [x] Add "Terms of Service" link in footer

---

## 📋 Phase 2: Content Expansion

### 📝 Markdown Editor - MVP (1-2 weeks) - ✅ COMPLETED

#### Planning
- [x] Finalize feature list for MVP
- [x] Design UI mockup (WYSIWYG layout)
- [x] Plan component structure
- [x] Implement Tiptap integration
- [x] Plan export formats

#### Project Setup
- [x] Create `MarkdownEditor.jsx` page
- [x] Create `RichMarkdownEditor.js` component
- [x] Set up routing (`/markdown-editor`)
- [x] Add to navigation menu
- [x] Add to homepage tools list

#### Input Section
- [x] Implement Create New tab
  - [x] Start Empty button
  - [x] Load Sample button (with example markdown)
  - [x] Tip box
- [x] Implement URL tab
  - [x] Use AdvancedURLFetch component
  - [x] Support GitHub raw URLs
  - [x] Support Gist URLs
  - [x] Test with various markdown sources
- [x] Implement Paste tab
  - [x] CodeMirror editor
  - [x] Markdown syntax highlighting
  - [x] Parse button
- [x] Implement Open tab
  - [x] Support .md files
  - [x] Support .txt files
  - [x] Auto-load on file selection

#### Editor Section
- [x] Implement WYSIWYG Editor (Tiptap)
  - [x] Install `@tiptap/react` and `tiptap-markdown`
  - [x] Add standard text formatting (bold, italic, strike)
  - [x] Add block formatting (headers, quotes, lists)
  - [x] Add inline code and code block extensions
  - [x] Set up Lowlight syntax highlighting
- [x] Implement view mode toggle
  - [x] Read mode (Clean preview default)
  - [x] Edit mode (WYSIWYG Tiptap)
  - [x] Markdown mode (Raw CodeMirror)
  - [x] Fullscreen mode
- [x] Add editor features
  - [x] Word count
  - [x] Character count
  - [x] Line count
  - [x] Reading time estimate

#### Preview Section
- [x] Build robust HTML to Markdown / Markdown to HTML sync
- [x] Set up markdown fallback parser (marked)
- [x] GitHub Flavored Markdown support (Tables, task lists)
- [x] Custom code block rendering with Copy button in Read mode

#### Export Section
- [x] Create collapsible export section
- [x] Implement Markdown export
  - [x] Copy to clipboard
  - [x] Download as .md file
- [x] Implement HTML export
  - [x] Standalone HTML with CSS
  - [x] Download as .html file
- [x] Implement HTML Content export
  - [x] Strip React/Tailwind wrapper classes
  - [x] Download body HTML only
- [x] Implement Plain Text export
  - [x] Strip markdown syntax via regex
  - [x] Download as .txt file
- [x] Implement PDF export
  - [x] Install html2pdf.js
  - [x] Inject CSS print media rules to prevent pre overflow
  - [x] Download as .pdf file

#### Data Loss Prevention
- [x] Implement `hasUserData()` function
- [x] Implement `hasModifiedData()` function
- [x] Add confirmation modal for tab changes
- [x] Add confirmation for Create New buttons

#### Testing
- [x] Test all input methods
- [x] Test Tiptap to Markdown serialization
- [x] Test all export formats
- [x] Test code syntax highlighting
- [x] Test view mode toggle
- [x] Test toolbar buttons
- [x] Test responsive design
- [x] Test dark mode

---

### 📝 Markdown Editor - Post-MVP (Future)

#### Advanced Markdown Features
- [ ] Add footnotes support
- [ ] Add emoji support (WYSIWYG picker)
- [ ] Add math equations (KaTeX)
- [ ] Add mermaid diagram rendering
- [ ] Implement Table of Contents auto-generation

#### Utilities
- [ ] Add markdown linter
- [ ] Add format beautifier
- [ ] Add image optimizer

#### Enhanced Features
- [ ] Add auto-save (localStorage)
- [ ] Add version history

---

### 🎨 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**