--- client: Hypercart / 4x4Sys Network repo: https://github.com/Hypercart-Dev-Tools/wp-syndicated-footer-poc last_edit: 2026-02-16 week_of: 2026-02-16 source_pr_number: N/A (main branch development) sprint: v1.1.0 Release --- # 4x4 Dashboard - Syndicated Footer Project A simple, actionable framework to prioritize and track engineering tasks. Focus on alignment, transparency, continuous improvement, and increasing clarity for everyone. This document does not replace your project management tools. It is meant to be a simple, actionable checklist to help you focus on the most important tasks for the week. # About the Current Project **Hypercart / 4x4Sys Network Footer** — A syndicated footer component for the 4x4Sys network that works across multiple platforms (HTML, React/Lovable, WordPress). The footer displays network branding, product pills (4x4Clarity, Love2Hug, GetDashboard), and legal links with a dark theme and lime accent. **Current Status:** v1.1.0 released with config-based customization for React/Lovable implementations. --- ## 1. Strategic Backlog **Maximum of 4 items. Focus on long-term goals and impactful improvements.** Update/Reminder: If these are new projects without a clear scope, consider using the [Project Scope Outline](#bonus-project-scope-outline) below. 1. - [ ] **Link URL/Label Overrides** - Allow sites to customize link URLs, labels, and tooltips via local config (v1.3.0 - see ROADMAP.md) 2. - [ ] **Custom Links Support** - Enable sites to add new links not in default set (v1.4.0 - see ROADMAP.md) 3. - [ ] **WordPress Config UI** - Add admin panel for WordPress plugin to configure links without editing JSON 4. - [ ] **Multi-framework Expansion** - Create Vue, Svelte, Angular versions with shared config schema --- ## 2. Current Week **Active tasks for the week. Maximum of 4 items.** > **Tip:** If your team frequently handles urgent issues, consider reserving 1-2 slots for hotfixes. Otherwise, use all 4 slots for planned work. - [x] **v1.1.0 Release** - Config-based customization for React/Lovable (tokenized link toggles, tooltip control) - [x] **Apache 2.0 License** - Add LICENSE.md and update all references in README, WordPress plugin - [x] **Documentation Updates** - Update lovable-footer-guide.md with verified implementation patterns from REFERENCES/LOVABLE.md - [x] **v1.2.0 Release** - HTML syndication via footer-data.json (link URLs, labels, tooltips from CDN) --- ## 3. Previous Week **Review completed, deferred, or blocked tasks from the prior week.** - [x] **v1.0.0 Release** - Initial syndicated footer component (HTML, CSS, WordPress plugin, React/Lovable guide) - [x] **Multi-platform Support** - Created implementations for static HTML, WordPress, and React/Lovable - [x] **CDN Syndication** - Set up jsDelivr CDN hosting via GitHub for automatic updates - [x] **Documentation Audit** - Created AUDIT.md with issue tracking and verification checklists --- ## 4. Recent Lessons Learned **Capture insights to improve processes and avoid repeating mistakes.** 1. **MVP First, Iterate Later** - Started with simple boolean toggles for links instead of complex override system. This allowed rapid deployment across multiple sites. Future enhancements tracked in ROADMAP.md. 2. **Simple State Management Wins** - Used basic `useState`/`useEffect` for config loading instead of Zustand or service layers. Footer is self-contained and doesn't need complex architecture. Keep it simple. 3. **Intelligent Separator Rendering** - Conditional logic for separators (`{linkA && linkB && ·}`) prevents orphan separators when links are hidden. This was a key UX improvement discovered during implementation. 4. **Runtime Config > Build-time Config** - Using `public/footer-config.json` (fetched at runtime) allows updates without rebuilding React apps. This is crucial for syndicated components that need to be customized per-site. 5. **Syndicated Content Strategy** - Created `footer-data.json` with all link data (URLs, labels, tooltips) that's fetched from CDN. This enables true HTML syndication for React/Lovable sites. WordPress already had this via HTML fetch; now React has it via JSON fetch. Update once, deploy everywhere. --- ## Bonus: Project Scope Outline > **Note:** This section is a work-in-progress and is being developed as a natural extension of the 4x4 methodology. It is not yet a core part of the framework but is included here as a supplementary tool for teams who want to add more context to their planning. ### 1. Goals **Primary Objective:** Create a syndicated footer component that can be deployed across multiple 4x4Sys network sites (Hypercart, 4x4Clarity, Love2Hug, GetDashboard) with consistent branding and minimal maintenance overhead. **Success Criteria:** - ✅ Single source of truth for footer markup and styles - ✅ Works across HTML, React/Lovable, and WordPress platforms - ✅ CDN-hosted for automatic updates - ✅ Per-site customization without forking the component - ✅ Responsive design (desktop + mobile) ### 2. Assumptions **Time Estimates:** - v1.0.0 (MVP): 4-6 hours (HTML/CSS, WordPress plugin, basic guides) - v1.1.0 (Config): 2-3 hours (React config system, documentation updates) - v1.2.0 (Link overrides): 3-4 hours (enhanced config schema, validation) - v1.3.0 (Custom links): 2-3 hours (custom link array support) **Technical Assumptions:** - Sites can load external CSS from jsDelivr CDN - React/Lovable sites use modern React (hooks support) - WordPress sites have WPCode or similar snippet plugin - Sites are okay with Apache 2.0 license terms ### 3. Potential Risks **CDN Availability:** jsDelivr could go down or be blocked by corporate firewalls. - **Mitigation:** WordPress plugin has fallback HTML. React component has default config fallback. **Breaking Changes:** Future updates could break existing implementations. - **Mitigation:** Semantic versioning with locked version tags (`@v1.0.0`). Breaking changes only in major versions. **Z-index Conflicts:** Tooltips may conflict with existing site UI. - **Mitigation:** Added `showTooltips: false` config option in v1.1.0. **Maintenance Burden:** Multiple platform implementations could diverge over time. - **Mitigation:** All implementations use same CSS. HTML structure is canonical. Regular audits. ### 4. Long-Term Maintainability **Sustainability Concerns:** - **CSS Bloat:** Keep CSS minimal and namespaced (`.hc-*` prefix). Avoid adding features that require significant CSS changes. - **Config Schema Growth:** Limit config options to prevent complexity. Document all options clearly. - **Platform Parity:** Ensure all platforms (HTML, React, WordPress) support same features. Don't let one platform fall behind. **Technical Debt:** - **WordPress Plugin:** Currently uses simple transient caching. May need more robust caching strategy for high-traffic sites. - **React Component:** No TypeScript types yet. Consider adding in v2.0.0. - **Testing:** No automated tests. Consider adding visual regression tests for CSS changes. **Maintenance Strategy:** - Monthly review of ROADMAP.md to prioritize enhancements - Quarterly audit of all platform implementations for parity - Version bumps follow semantic versioning strictly - All breaking changes documented in CHANGELOG.md with migration guides --- ## How to Use This Template For detailed guidance on the 4x4 framework, see the [README](README.md). **Quick tips:** - Update this document weekly (move "Current Week" to "Previous Week" and plan your new week) - Limit each section to 4 items maximum to maintain focus - Capture lessons learned immediately while they're fresh - Link to detailed tasks in your project management tools (GitHub, Jira, etc.) --- ## License This work is licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License. To view a copy of this license, visit [https://creativecommons.org/licenses/by/4.0/](https://creativecommons.org/licenses/by/4.0/). Copyright © 2026 Hypercart DBA Neochrome, Inc. | 4x4Clarity.com