I've read the detailed requirements. This is a comprehensive request to transform your Bolt project into a production-ready Next.js application with advanced features including admin panel, video processing, analytics, and A/B testing.
Plan Overview
This is a large-scale project that requires systematic implementation. Before proceeding, let me outline the approach:
Phase 1: Analysis & Foundation
- Analyze existing Bolt project - Parse CSS variables, components, animations, and design tokens
- Set up Next.js 14 App Router structure with TypeScript, Tailwind, shadcn/ui
- Configure Prisma with the schema (User, Media, Block, BlockMedia, EventLog, FeatureFlag)
- Set up NextAuth with credentials provider
Phase 2: Core Components Migration
- Port all visual components pixel-perfect from Bolt (Hero, TrustBar, MarketplaceProof, TopProducts, FactoryTour, HeroCapsules3D, VideoCard, VideoLightbox, etc.)
- Preserve all design tokens - colors, fonts, spacing, animations, transitions
- Implement responsive layouts matching original breakpoints
Phase 3: Admin & Media System
- Admin authentication at /login with role-based access
- Video upload system at /admin/videos with drag-&-drop
- FFmpeg pipeline for poster/preview generation
- Media storage abstraction (UploadThing/Vercel Blob adapters)
- Block manager at /admin/blocks for content management
Phase 4: Analytics & Feature Flags
- GA4 integration with custom events
- Internal BI endpoint at /api/events
- Feature flag system with admin UI
- A/B test variants for hero_layout and trustbar_density
Phase 5: Optimization & Documentation
- Performance optimization (Lighthouse 90+)
- SEO & accessibility improvements
- Complete README with setup instructions
- Deployment guide
Estimated Scope: This is a multi-day, production-grade project with ~50+ files to create/modify.
Do you approve this plan, or would you like me to adjust the scope/priorities before I begin implementation?