Skip to content

Latest commit

 

History

History
79 lines (66 loc) · 6.31 KB

code-review.md

File metadata and controls

79 lines (66 loc) · 6.31 KB

Code Review Action Plan

Completed Remediation Tasks

  • Removed unused particle background modules (SimpleDither, fluid-particles, enhanced-fluid-particles) and their Three.js/Lottie dependencies to shrink the bundle and eliminate dead code paths.
  • Added reusable neobrutal design primitives (card, toggle pill, toggle switch, progress bar) to consolidate repeated Tailwind recipes and prepare the UI for a component-driven system.
  • Refactored blog discovery screens to adopt the new primitives, improving accessibility (switch semantics, progress bar ARIA) and reducing prop drilling within filter controls.
  • Updated QA documentation to reflect the removals and provide guidance for any future animation reintroduction.

Prioritized Recommendations

High Priority

  1. Adopt Centralized Fetching & Caching for Blog Lists
    Reuse the filtering/sorting logic introduced in NewBlogsPage inside API routes or shared data utilities so both server and client components rely on the same transforms. Promote the memoized derivations into @/lib/blogs and cover them with unit tests to prevent regressions.
  2. Replace Alert/Clipboard Fallbacks with Toast Notifications
    The NewBlogCard still depends on alert() for share feedback. Swap in a toast system (e.g., Radix UI Toast or custom neobrutal banner) to avoid blocking dialogs and to align with the overall design system.
  3. Backfill Analytics for Filter Engagement
    Instrument the new toggle pill controls with tracking to understand which topics and sort modes readers use most often. Capture the derived filter payload before executing Supabase queries.

Medium Priority

  1. Promote NeobrutalCard Usage Across Sidebar/Newsletter Widgets
    Replace the bespoke border-4 border-black wrappers in NewSidebar, NewFollowSection, and NewsletterSection with NeobrutalCard to reduce duplication and ensure consistent elevation/rotation behaviour.
  2. Consolidate Share Menu Logic
    Extract the navigator.share + clipboard fallback into a useShare hook or ShareMenu component so video embeds and other cards can reuse it without redefining menu state.
  3. Introduce Chart Components for Admin Metrics
    The admin dashboard (AdminDashboard) surfaces list data without trends. Incorporate neobrutal-styled charts (e.g., sparkline of views, stacked bar for categories) using a lightweight charting lib (visx, chart.js) to visualise Supabase analytics.

Low Priority

  1. Theme Token Extraction
    Move recurring color constants (purple, yellow, coral) into a Tailwind plugin or CSS custom properties so neobrutal components read tokens rather than hard-coded hex values.
  2. Declarative State Machines for Forms
    Wrap complex multi-step flows (newsletter signup, admin forms) in XState or custom reducers to clarify error/idle/success states and improve maintainability.
  3. Progressive Enhancement for Motion
    If future background effects are desired, ship them behind a prefers-reduced-motion check and expose a NeobrutalMotionCanvas wrapper that handles cleanup automatically.

Unused Modules & Dependency Cleanup

  • Removed: @react-three/fiber, @react-three/postprocessing, postprocessing, three, lottie-react (no live imports after dropping particle modules).
    Actionable next step: rerun dependency analysis quarterly to catch any new drift.

Reusable Component Guidance

// Example: Wrap any neobrutal callout in the shared card component
<NeobrutalCard tone="primary" rotate="left" className="max-w-md">
  <h3 className="text-xl font-black">Shipping Update</h3>
  <p className="mt-2 text-sm">
    Deployments now run with database migrations automatically, so remember to
    add rollback scripts to PRs.
  </p>
</NeobrutalCard>
  • Use NeobrutalTogglePill for any pill-style multi-select list (topics, tags, skill chips).
  • Prefer NeobrutalToggleSwitch when flipping between two modes (e.g., latest vs. popular, light vs. dark view).
  • NeobrutalProgressBar can surface onboarding/completion states or API request batching progress; set value/max to track actual numbers.

Utility Extraction Opportunities

  • Create @/lib/blogs.ts with helpers like deriveCategories(posts) and paginate(posts, page, size) so API routes and server components reuse the same transformations as NewBlogsPage.
  • Abstract share/clipboard fallbacks into @/utils/share.ts with SSR-safe guards.
  • Centralize Supabase data normalization (normalizePost, normalizeCategory) to reduce scattered optional chaining.

Neobrutalism Integration Steps

  1. Co-locate neobrutal primitives under src/components/neobrutal (already seeded) and export them from a barrel file for ergonomic imports.
  2. Update Tailwind config with CSS variables or plugin tokens (--neo-card-bg, --neo-shadow) to drive consistent theming.
  3. Replace legacy buttons/cards in hero/newsletter/sidebars with the shared primitives, ensuring focus styles and keyboard navigation are preserved.
  4. When introducing ProgressBar or ToggleSwitch elsewhere, wrap them in motion-safe containers and respect prefers-reduced-motion for animations.

Chart & Data Visualisation Opportunities

  • Blogs Overview: Add a mini bar chart of views per category in the sidebar using the neobrutal palette to highlight reader interests.
  • Admin Dashboard: Surface publication cadence (posts per month) via progress bars or stacked columns, powered by Supabase analytics queries.
  • Newsletter Metrics: When integrating email analytics, use the progress bar to show subscriber growth against quarterly targets.

Performance & Security Follow-ups

  • Benchmark the updated blog page after removing heavy Three.js dependencies; record bundle size improvements and LCP/INP metrics.
  • Harden share/menu actions with try/catch logging to capture clipboard API failures in production monitoring.
  • Add rate limiting (Supabase or middleware) around share-triggered API endpoints before enabling server-side share counts.

Refactoring Priorities

  1. Extend neobrutal primitive adoption (cards, toggles, progress bar) across all feature modules.
  2. Extract reusable hooks (useShareMenu, useTopicFilters) to collapse repeated state management patterns.
  3. Introduce Storybook or Ladle to document neobrutal components, enabling visual regression testing and design collaboration.