# SUB-4 Task Dependency Tree ## Visual Planning for SUB-4: Homepage & Project Onboarding ``` SUB-4: WebCrawlers Homepage & Project Onboarding ├─ PHASE 1: Foundation & Navigation (Weeks 1-2) │ ├─ 1.1 Design Dashboard Layout │ │ └─ Creates base homepage template │ ├─ 1.2 Build Left Navigation Menu │ │ ├─ Depends on: 1.1 │ │ ├─ Links to: Home, Audit, AI Visibility, Content, Keywords, Reports, Authority │ │ ├─ Features: Submenus, Active highlighting, Mobile hamburger │ │ └─ Creates: Nav component reused across dashboard │ └─ 1.3 Create Route & Controller │ ├─ Depends on: 1.1 │ ├─ Route: GET /dashboard → Dashboard::index │ ├─ Load: User data, websites list │ └─ Filter: Auth required │ ├─ PHASE 2: Global Search & AI Assistant (Weeks 2-3) │ ├─ 2.1 Design Global Search Bar ⌘K │ │ ├─ Depends on: 1.2 (navigation visible) │ │ ├─ Features: Categories, keyboard shortcuts, responsive │ │ └─ Creates: Search component │ ├─ 2.2 Create Search API Endpoint │ │ ├─ Depends on: 2.1 │ │ ├─ Route: POST /api/v1/search │ │ ├─ Search: Websites, keywords, audits, reports │ │ ├─ Pagination: 10 items per category │ │ └─ Filters: By user_id │ ├─ 2.3 Build AI Assistant Prompt Box │ │ ├─ Depends on: 1.1 │ │ ├─ Features: Input, suggested prompts, response display │ │ ├─ Suggested: "Audit website", "Fix issues", "Discover content" │ │ └─ Creates: AI prompt component │ └─ 2.4 Create AI Assistant API Endpoint │ ├─ Depends on: 2.3 │ ├─ Route: POST /api/v1/ai/chat │ ├─ Routes prompts to: Crawl, Issues page, Opportunities │ └─ Returns: Contextual response │ ├─ PHASE 3: Recommended Playbooks (Weeks 3-4) │ ├─ 3.1 Design Playbooks Section │ │ ├─ Depends on: 1.1 │ │ ├─ 3 Cards: Technical Audit, Fix Issues, Discover Content │ │ ├─ Features: Icon, title, description, CTA, difficulty badge │ │ └─ Creates: Playbooks grid component │ └─ 3.2 Link Playbooks to Workflows │ ├─ Depends on: 3.1 │ ├─ Links: │ │ ├─ Tech Audit → Crawl creation │ │ ├─ Fix Issues → Issues page (filtered) │ │ └─ Discover Content → Opportunities page │ ├─ Add: Analytics tracking │ └─ Add: Hover effects │ ├─ PHASE 4: Active Projects Section (Weeks 4-6) │ ├─ 4.1 Design Projects Grid/Table │ │ ├─ Depends on: 1.1 │ │ ├─ Display: Domain, status, last audit, score, actions │ │ ├─ Features: View toggle (grid/table), responsive, loading skeleton │ │ ├─ Empty state: "No projects" │ │ └─ Creates: Projects list component │ ├─ 4.2 Implement Search & Filter │ │ ├─ Depends on: 4.1 │ │ ├─ Search: By domain name │ │ ├─ Filters: │ │ │ ├─ Status: All, Active, Paused, Onboarding │ │ │ └─ Score: Excellent (90+), Good (70-89), Fair (50-69), Poor (<50) │ │ ├─ Sort: Recency, A-Z, Highest score, Lowest score │ │ ├─ Pagination: 10/25/50 per page │ │ └─ Creates: Filter UI controls │ ├─ 4.3 Build Projects API Endpoint │ │ ├─ Depends on: 4.2 │ │ ├─ Route: GET /api/v1/websites (enhance existing) │ │ ├─ Returns: id, domain, status, score, last_audit_date, favicon, connections │ │ ├─ Supports: search_query, status filter, score filter, sort, pagination │ │ └─ Performance: < 200ms response time │ ├─ 4.4 Add Project Actions │ │ ├─ Depends on: 4.1 │ │ ├─ Actions dropdown: │ │ │ ├─ Scan/Audit Now → Queue audit │ │ │ ├─ View Reports → Open reports page │ │ │ ├─ Settings → Project settings modal │ │ │ ├─ Pause → Disable automated audits │ │ │ └─ Delete → Confirmation → Delete │ │ ├─ Features: Toast notifications, permission checks │ │ └─ Creates: Action dropdown component │ └─ 4.5 Implement "Create Project" CTA │ ├─ Depends on: 4.1 │ ├─ Button: In header or projects empty state │ ├─ Action: Opens create modal (Task 5) │ └─ Creates: Create button UI │ ├─ PHASE 5: Project Creation Modal (Weeks 6-8) │ ├─ 5.1 Design Modal - Step 1: Domain Selection │ │ ├─ Depends on: 4.5 │ │ ├─ Layout: Modal with step indicator "1/3" │ │ ├─ Input: Domain URL field │ │ ├─ Validation feedback: │ │ │ ├─ Valid checkmark / error icon │ │ │ ├─ Messages: "Valid", "Invalid format", "Already owned", "Unreachable" │ │ │ └─ Loading state during validation │ │ ├─ Buttons: Next (enabled if valid), Cancel │ │ └─ Creates: Step 1 form component │ ├─ 5.2 Create Domain Validation API │ │ ├─ Depends on: 5.1 │ │ ├─ Route: POST /api/v1/websites/validate │ │ ├─ Input: domain URL │ │ ├─ Checks: │ │ │ ├─ Format validation │ │ │ ├─ User ownership (not duplicate) │ │ │ ├─ Domain reachability (HTTP HEAD) │ │ │ └─ Extract metadata if available │ │ ├─ Returns: {valid, message, available, metadata} │ │ └─ Performance: Rate-limited │ ├─ 5.3 Design Modal - Step 2: Configuration │ │ ├─ Depends on: 5.2 │ │ ├─ Layout: Step indicator "2/3" │ │ ├─ Sections: │ │ │ ├─ Crawl Configuration: │ │ │ │ ├─ Max pages to crawl (selector, based on plan) │ │ │ │ ├─ Crawl frequency: Daily, Weekly, Monthly │ │ │ │ └─ Estimated quota preview │ │ │ ├─ Data Connections: │ │ │ │ ├─ Google Search Console (Connect / Connected) │ │ │ │ ├─ Google Analytics 4 (Connect / Connected) │ │ │ │ └─ Google Business Profile (Connect / Connected) │ │ │ └─ Business Information: │ │ │ ├─ Business name │ │ │ ├─ Description │ │ │ ├─ Service category │ │ │ └─ Target locations (multi-select) │ │ ├─ Features: │ │ │ ├─ Prefilled fields from domain detection │ │ │ ├─ Form validation │ │ │ └─ Back & Next buttons │ │ └─ Creates: Step 2 form component │ ├─ 5.4 Create Configuration API │ │ ├─ Depends on: 5.3 │ │ ├─ Route: POST /api/v1/websites/configure │ │ ├─ Input: domain, crawl_limit, crawl_frequency, integrations, business_info │ │ ├─ Actions: │ │ │ ├─ Create WebsiteModel record (status: "configuring") │ │ │ ├─ Store configuration │ │ │ └─ Validate user quota │ │ ├─ Returns: {website_id, status} │ │ └─ Returns website_id for Step 3 │ ├─ 5.5 Design Modal - Step 3: Pixel Installation │ │ ├─ Depends on: 5.4 │ │ ├─ Layout: Step indicator "3/3" │ │ ├─ Header: "Install WebCrawlers Pixel" │ │ ├─ Method Selector: │ │ │ ├─ Manual (paste in header) │ │ │ ├─ WordPress Plugin (if detected) │ │ │ └─ Google Tag Manager │ │ ├─ Display: │ │ │ ├─ Copy-to-clipboard code snippet │ │ │ ├─ Visual guide (screenshots) │ │ │ ├─ "Verify Installation" button │ │ │ └─ Loading state during verification │ │ ├─ Success State: │ │ │ ├─ Success message │ │ │ ├─ Pixel installation confirmed │ │ │ ├─ "Complete" button │ │ │ └─ "Go to Dashboard" redirect button │ │ ├─ Fallback: Allow completion without pixel │ │ └─ Creates: Step 3 form component │ ├─ 5.6 Create Pixel Installation APIs │ │ ├─ Depends on: 5.5 │ │ ├─ Routes: │ │ │ ├─ POST /api/v1/websites/{id}/generate-pixel │ │ │ │ ├─ Input: website_id │ │ │ │ ├─ Returns: {pixel_code, pixel_id, install_instructions} │ │ │ │ └─ Generate unique code per website │ │ │ │ │ │ │ ├─ POST /api/v1/websites/{id}/verify-pixel │ │ │ │ ├─ Input: website_id │ │ │ │ ├─ Check: Pixel event logs │ │ │ │ └─ Returns: {pixel_detected, last_seen_at} │ │ │ │ │ │ │ └─ POST /api/v1/websites/{id}/complete-onboarding │ │ │ ├─ Input: website_id │ │ │ ├─ Actions: │ │ │ │ ├─ Update status: "configuring" → "active" │ │ │ │ ├─ Queue initial crawl job │ │ │ │ ├─ Queue integration sync jobs │ │ │ │ └─ Create audit record │ │ │ └─ Returns: {success, next_steps} │ │ └─ Creates: 3 API endpoints │ └─ 5.7 Wire Modal Steps Together │ ├─ Depends on: 5.1, 5.3, 5.5, 5.6 │ ├─ Implement: Modal state management │ ├─ Features: │ │ ├─ Step navigation (back/next) │ │ ├─ Persist data across steps │ │ ├─ Pass data between steps │ │ ├─ Modal close on completion │ │ ├─ Redirect after completion │ │ ├─ Error handling & retry logic │ │ └─ Loading states for API calls │ └─ Creates: Modal orchestration logic │ ├─ PHASE 6: Integration & Testing (Weeks 8-10) │ ├─ 6.1 Implement Project Onboarding Jobs │ │ ├─ Depends on: 5.6 │ │ ├─ Queue jobs after project completion: │ │ │ ├─ Initial crawl job │ │ │ │ ├─ Queue with configured max_pages │ │ │ │ └─ Update project status to "crawling" │ │ │ ├─ Integration sync jobs │ │ │ │ ├─ Google Search Console sync │ │ │ │ ├─ Google Analytics sync │ │ │ │ └─ Google Business Profile sync │ │ │ └─ Analysis & scoring jobs │ │ │ ├─ Run technical audit │ │ │ ├─ Calculate scores │ │ │ └─ Generate summary │ │ ├─ Features: │ │ │ ├─ Job queuing system │ │ │ ├─ Failure handling & retries │ │ │ ├─ User notifications on completion │ │ │ └─ Status tracking │ │ └─ Creates: Job handlers for crawl, sync, analysis │ ├─ 6.2 Test All Workflows │ │ ├─ Depends on: 6.1 │ │ ├─ Test coverage: │ │ │ ├─ Unit tests: API endpoints │ │ │ ├─ Integration tests: Modal flow │ │ │ ├─ E2E tests: │ │ │ │ ├─ Create new project │ │ │ │ ├─ Search projects │ │ │ │ ├─ Filter projects │ │ │ │ ├─ Project actions │ │ │ │ ├─ Playbook workflows │ │ │ │ └─ AI assistant │ │ │ ├─ Browser testing: Chrome, Firefox, Safari, Edge │ │ │ ├─ Mobile responsive testing │ │ │ ├─ Performance testing │ │ │ └─ Security testing: SQL injection, XSS │ │ └─ Criteria: All tests passing, no broken workflows │ ├─ 6.3 Performance Optimization │ │ ├─ Depends on: 6.2 │ │ ├─ Optimizations: │ │ │ ├─ Profile page load times │ │ │ ├─ Optimize DB queries: │ │ │ │ ├─ Eager load relationships │ │ │ │ ├─ Add missing indexes │ │ │ │ └─ Cache frequently accessed data │ │ │ ├─ Optimize API responses: │ │ │ │ ├─ Pagination defaults │ │ │ │ ├─ Return only needed fields │ │ │ │ └─ Compress responses │ │ │ ├─ Frontend optimization: │ │ │ │ ├─ Code splitting │ │ │ │ ├─ Lazy load images │ │ │ │ └─ Minify CSS/JS │ │ │ ├─ Caching strategy: │ │ │ │ ├─ Website list: 5 min TTL │ │ │ │ └─ Scores: 1 hour TTL │ │ │ └─ Monitoring & logging │ │ └─ Targets: <2s page load, <500ms API │ └─ 6.4 Documentation & Handoff │ ├─ Depends on: 6.3 │ ├─ Documentation: │ │ ├─ API documentation (endpoints, parameters) │ │ ├─ User documentation │ │ ├─ Architecture documentation │ │ ├─ Code comments │ │ ├─ Database schema updates │ │ ├─ Configuration requirements │ │ └─ Deployment instructions │ └─ Criteria: Complete, accurate, examples provided │ └─ DELIVERABLES ├─ Controllers │ ├─ app/Controllers/DashboardController.php │ ├─ app/Controllers/Api/V1/SearchController.php │ └─ app/Controllers/Api/V1/AiAssistantController.php ├─ Views │ ├─ app/Views/dashboard/home.php │ ├─ app/Views/dashboard/components/nav.php │ ├─ app/Views/dashboard/components/search.php │ └─ app/Views/dashboard/components/projects.php ├─ Models │ └─ app/Models/WebsiteModel.php (extended) ├─ APIs (Routes in app/Config/Routes.php) │ ├─ GET /dashboard │ ├─ GET /api/v1/websites │ ├─ POST /api/v1/websites/validate │ ├─ POST /api/v1/websites/configure │ ├─ POST /api/v1/websites/{id}/generate-pixel │ ├─ POST /api/v1/websites/{id}/verify-pixel │ ├─ POST /api/v1/websites/{id}/complete-onboarding │ ├─ POST /api/v1/search │ └─ POST /api/v1/ai/chat ├─ Jobs │ ├─ app/Libraries/Jobs/CrawlJob.php │ ├─ app/Libraries/Jobs/SyncJob.php │ └─ app/Libraries/Jobs/AnalysisJob.php ├─ Tests │ ├─ tests/unit/* │ ├─ tests/integration/* │ └─ tests/feature/* └─ Documentation └─ Documentation files and API specs ``` --- ## 🎯 Critical Path The **critical path** (longest sequence of dependent tasks) is: ``` 1.1 → 1.2 → 2.1 → 2.2 ─┐ ├→ 4.1 → 4.2 → 4.3 ─┐ │ ├→ 5.1 → 5.2 → 5.3 → 5.4 → 5.5 → 5.6 → 5.7 → 6.1 → 6.2 → 6.3 → 6.4 1.3 (runs parallel) ─────┘ │ ├→ 4.4 → 4.5 ──────────┘ 3.1 (runs parallel) ─────────────────────────→ 3.2 ``` **Total Critical Path Duration: 10 weeks** --- ## 👥 Team Allocation (Suggested) **Team Size: 3-4 developers** | Developer | Phase 1-2 | Phase 3 | Phase 4 | Phase 5 | Phase 6 | |-----------|-----------|---------|---------|---------|---------| | **Dev 1 (Lead)** | 1.1-1.3, 2.1-2.2 | - | 4.1-4.3 | 5.1-5.2 | 6.1-6.4 | | **Dev 2** | 2.3-2.4 | 3.1-3.2 | 4.4-4.5 | 5.3-5.4 | Testing | | **Dev 3** | - | - | - | 5.5-5.7 | Optimization | | **QA** | - | - | - | - | 6.2 (Testing) | --- ## 📅 Gantt-Style Timeline ``` Week: 1 2 3 4 5 6 7 8 9 10 Task: 1.1 ████ 1.2 ████ 1.3 ████ 2.1 ████ 2.2 ████ 2.3 ████ 2.4 ████ 3.1 ████ 3.2 ████ 4.1 ████ 4.2 ████ 4.3 ████ 4.4 ████ 4.5 ████ 5.1 ████ 5.2 ████ 5.3 ████ 5.4 ████ 5.5 ████ 5.6 ████ 5.7 ████ 6.1 ████ 6.2 ████ 6.3 ████ 6.4 ████ ``` --- ## ✅ Sign-Off Checklist Before marking tasks complete: - [ ] Code reviewed and approved - [ ] All unit tests passing - [ ] Integration tests passing - [ ] E2E tests passing - [ ] No console errors - [ ] Mobile responsive verified - [ ] Performance targets met - [ ] Documentation updated - [ ] Security review passed - [ ] Ready for QA