net/PACKAGE_OPTIMIZATION_PLAN.md

📦 PACKAGE OPTIMIZATION PLAN

Goal: Optimize packages for best performance, load time, and user experience
Strategy: Admin (all bells & whistles) vs. Public Site (lightweight & fast)

---

🎯 SPLIT STRATEGY

Admin Dashboard (/admin/*)

• Philosophy: All features, rich UX, animations, tools
• Priority: Functionality > Performance
• Bundle Size: Can be larger (~500KB-1MB)
• Users: Internal team only

Public Site (/ and /posts/*)

• Philosophy: Minimal, fast, SEO-optimized
• Priority: Performance > Features
• Bundle Size: Tiny (~50-100KB)
• Users: Public visitors

---

📋 PACKAGE DECISIONS

✅ KEEP FOR ADMIN ONLY (35 packages)

Core Admin Features:

1. @tanstack/react-table - Data tables
2. @tanstack/react-query - Server state
3. @tanstack/react-virtual - Virtual scrolling
4. @dnd-kit/core + @dnd-kit/sortable - Kanban drag-drop
5. react-hook-form + zod + @hookform/resolvers - Forms
6. @radix-ui/* (8 packages) - UI primitives
7. framer-motion - Animations ✨
8. recharts + @tremor/react - Analytics dashboards
9. @tiptap/* (3 packages) - Rich text editor
10. react-markdown + remark-gfm - Markdown rendering
11. react-syntax-highlighter - Code highlighting
12. @craftjs/core + @craftjs/utils - Visual editor (future)
13. reactflow + react-flow-renderer - Workflow builder (future)
14. leaflet + react-leaflet + @turf/turf - Maps
15. papaparse - CSV import/export
16. pdfmake - PDF generation
17. html-to-image - Screenshot exports
18. react-dropzone - File uploads
19. react-diff-viewer-continued - Version comparison
20. bullmq + @bull-board/* - Queue management
21. cmdk - Command palette
22. sonner - Toast notifications
23. lucide-react - Icons
24. tailwindcss-animate - Animation utilities

State & Utils:

25. zustand + immer - Complex state
26. nanostores + @nanostores/react - Global state
27. lodash-es - Utilities
28. date-fns - Date formatting
29. nanoid - ID generation
30. lzutf8 - Compression

---

✅ KEEP FOR PUBLIC SITE (Minimal - 15 packages)

Essential Only:

1. astro - SSR framework
2. react + react-dom - UI (only where needed)
3. @directus/sdk - Data fetching
4. tailwindcss + tailwind-merge - Styling
5. clsx - Class names
6. @astrojs/node - SSR adapter
7. @astrojs/tailwind - Tailwind integration
8. @astrojs/sitemap - SEO sitemap
9. @astrojs/partytown - Analytics (off main thread)
10. @vite-pwa/astro - PWA/offline
11. sharp - Image optimization
12. autoprefixer + postcss - CSS processing

Public Site Bundle: ~50-100KB (gzipped)

---

❌ REMOVE COMPLETELY (Not Used - 8 packages)

1. react-contenteditable - Not using inline editing
2. @types/papaparse - Only needed if using papaparse
3. @types/react-syntax-highlighter - Only for admin
4. ioredis - Only if using queues (move to backend)
5. astro-imagetools - Redundant with sharp
6. rollup-plugin-visualizer - Dev tool only
7. vite-plugin-inspect - Dev tool only
8. @tanstack/react-query-devtools - Dev tool only

Savings: ~20MB in node_modules

---

🏗️ IMPLEMENTATION PLAN

Phase 1: Code Splitting (Immediate)

Goal: Separate admin and public bundles

Step 1: Create Entry Points

// src/lib/admin-only.ts
export { default as Kanban } from '@/components/factory/KanbanBoard';
export { default as DataTable } from '@/components/ui/DataTable';
export { default as RichTextEditor } from '@/components/ui/RichTextEditor';
// ... all admin components

Step 2: Lazy Load Admin Components

---
// Admin pages only
const AdminComponent = (await import('@/lib/admin-only')).Kanban;
---
<AdminComponent client:load />

Step 3: Configure Vite Chunking

// astro.config.ts
export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            'admin-core': [
              '@tanstack/react-table',
              '@tanstack/react-query',
              'react-hook-form',
              'zod'
            ],
            'admin-ui': [
              '@radix-ui/react-dialog',
              '@radix-ui/react-dropdown-menu',
              'framer-motion'
            ],
            'admin-viz': [
              'recharts',
              '@tremor/react',
              'leaflet'
            ]
          }
        }
      }
    }
  }
});

---

Phase 2: Public Site Optimization (This Week)

Remove Heavy Packages from Public Pages:

---
// ❌ Don't do this on public pages
import { DataTable } from '@tanstack/react-table';

// ✅ Do this instead
// Use static HTML tables or minimal client-side JS
---

Implement Static Generation:

// astro.config.ts
export default defineConfig({
  output: 'hybrid', // SSR for admin, static for public
  adapter: node({
    mode: 'middleware'
  })
});

Add Route-Based Rendering:

---
// src/pages/[...slug].astro
export const prerender = true; // Static for public posts
---

---
// src/pages/admin/[...admin].astro
export const prerender = false; // SSR for admin
---

---

Phase 3: Animation Strategy (Next Week)

Admin Animations (Rich):

// Use framer-motion for admin
import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>
  {content}
</motion.div>

Public Animations (Lightweight):

/* Use CSS animations for public */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

Intersection Observer for Scroll Animations:

// Lightweight scroll animations
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
    }
  });
});

---

Phase 4: Backend Enhancements (Ongoing)

Enable All Directus Features:

1. Flows - Automation workflows
2. Webhooks - Real-time notifications
3. Insights - Analytics dashboards
4. Translations - Multi-language support
5. Revisions - Version history
6. Activity Log - Audit trail
7. File Library - Media management
8. Custom Extensions - Spark-specific tools

Add Backend Services:

1. Redis - Caching layer
2. BullMQ - Job queues
3. Elasticsearch - Full-text search (future)
4. S3 - Cloud storage (future)

---

📊 EXPECTED RESULTS

Before Optimization:

• Admin Bundle: ~800KB (unoptimized)
• Public Bundle: ~800KB (same as admin)
• Total node_modules: ~500MB
• Build Time: ~60 seconds

After Optimization:

• Admin Bundle: ~500KB (all features)
• Public Bundle: ~50KB (minimal)
• Total node_modules: ~480MB (-20MB)
• Build Time: ~45 seconds (-25%)

Performance Gains:

• Public Site Load Time: 3s → 0.8s (73% faster)
• Admin Load Time: 3s → 2s (33% faster)
• Lighthouse Score: 75 → 95 (public)
• First Contentful Paint: 1.5s → 0.4s

---

🎨 ANIMATION IMPLEMENTATION

Admin Dashboard Animations:

1. Page Transitions:

// Smooth page transitions
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.2 }}
>

2. List Animations:

// Stagger children
<motion.div
  variants={{
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  }}
>

3. Hover Effects:

// Interactive hover
<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>

4. Loading States:

// Skeleton loading
<motion.div
  animate={{
    opacity: [0.5, 1, 0.5],
  }}
  transition={{
    duration: 1.5,
    repeat: Infinity
  }}
/>

Public Site Animations (CSS):

/* Fade in on scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Smooth hover */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

---

✅ ACTION ITEMS

Immediate (Today):

• Fix deployment errors
• Archive obsolete docs
• Add .dockerignore
• Test deployment succeeds

This Week:

• Implement code splitting
• Configure manual chunks
• Add route-based rendering
• Test bundle sizes

Next Week:

• Add admin animations (framer-motion)
• Add public animations (CSS)
• Implement scroll animations
• Performance audit

Ongoing:

• Enable all Directus features
• Add backend services
• Monitor bundle sizes
• Optimize as needed

---

Result: Fast public site + Feature-rich admin dashboard! 🚀