sortifal/hosting-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
hosting-frontend/openspec/changes/migrate-to-nextjs-launchui/tasks.md
Alexis Bruneteau b83c7a7d6d
Some checks failed
Build and Deploy to k3s / build-and-deploy (push) Failing after 1m31s
Details
feat(migration): migrate from Angular 20 to Next.js 15 
Complete framework migration from Angular to Next.js with full feature parity.

## What Changed
- Migrated from Angular 20 to Next.js 15 with App Router
- Replaced Angular components with React functional components
- Implemented React Context API for state management (replacing RxJS)
- Integrated React Hook Form for form handling
- Added shadcn/ui component library
- Configured Tailwind CSS 4.1 with @tailwindcss/postcss
- Implemented JWT authentication with middleware protection

## Core Features Implemented
- ✅ User registration and login with validation
- ✅ JWT token authentication with localStorage
- ✅ Protected dashboard route with middleware
- ✅ Portfolio listing with status indicators
- ✅ Create portfolio functionality
- ✅ ZIP file upload with progress tracking
- ✅ Portfolio deployment
- ✅ Responsive design with Tailwind CSS

## Technical Stack
- Framework: Next.js 15 (App Router)
- Language: TypeScript 5.8
- Styling: Tailwind CSS 4.1
- UI Components: shadcn/ui + Lucide icons
- State: React Context API + hooks
- Forms: React Hook Form
- API Client: Native fetch with custom wrapper

## File Structure
- /app - Next.js pages (landing, login, register, dashboard)
- /components - React components (ui primitives, auth provider)
- /lib - API client, types, utilities
- /hooks - Custom hooks (useAuth, usePortfolios)
- /middleware.ts - Route protection
- /angular-backup - Preserved Angular source code

## API Compatibility
- All backend endpoints remain unchanged
- JWT Bearer token authentication preserved
- API response format maintained

## Build Output
- Production build: 7 routes compiled successfully
- Bundle size: ~102kB shared JS (optimized)
- First Load JS: 103-126kB per route

## Documentation
- Updated README.md with Next.js setup guide
- Created OpenSpec proposal in openspec/changes/migrate-to-nextjs-launchui/
- Added project context in openspec/project.md

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-17 00:34:43 +02:00

8.5 KiB
Raw Blame History

Implementation Tasks: Next.js + Launch UI Migration

1. Project Foundation Setup

  • 1.1 Initialize Next.js 15 project with App Router and TypeScript 5.0
  • 1.2 Install core dependencies (next, react, react-dom)
  • 1.3 Configure Tailwind CSS 4.0 with PostCSS
  • 1.4 Install Launch UI components (shadcn/ui CLI)
  • 1.5 Install Lucide React icons
  • 1.6 Set up TypeScript strict mode configuration
  • 1.7 Configure Next.js config for production builds
  • 1.8 Set up environment variables (.env.local, .env.production)
  • 1.9 Create directory structure (/app, /components, /lib, /hooks)

2. API Client & Authentication Context

  • 2.1 Create API client wrapper (/lib/api-client.ts) using fetch
  • 2.2 Implement generic request methods (get, post, put, delete) with TypeScript generics
  • 2.3 Add Bearer token injection to API client
  • 2.4 Create ApiResponse and Portfolio interfaces (/lib/types.ts)
  • 2.5 Implement AuthContext with React Context API (/components/auth/auth-provider.tsx)
  • 2.6 Create useAuth() custom hook (/hooks/use-auth.ts)
  • 2.7 Implement login, logout, and token refresh functions in AuthContext
  • 2.8 Add localStorage token persistence
  • 2.9 Implement automatic logout on 401 responses

3. Launch UI Component Setup

  • 3.1 Install shadcn/ui components: Button, Input, Card, Label, Textarea
  • 3.2 Copy Launch UI Navbar component to /components/launch-ui/navbar.tsx
  • 3.3 Copy Launch UI Hero component to /components/launch-ui/hero.tsx
  • 3.4 Copy Launch UI Items component to /components/launch-ui/items.tsx
  • 3.5 Copy Launch UI Logos component to /components/launch-ui/logos.tsx
  • 3.6 Copy Launch UI FAQ component to /components/launch-ui/faq.tsx
  • 3.7 Copy Launch UI Stats component to /components/launch-ui/stats.tsx
  • 3.8 Copy Launch UI CTA component to /components/launch-ui/cta.tsx
  • 3.9 Copy Launch UI Footer component to /components/launch-ui/footer.tsx
  • 3.10 Customize Navbar with app-specific navigation links
  • 3.11 Configure Tailwind theme to match branding (colors, fonts)

4. Root Layout & Global Components

  • 4.1 Create root layout (/app/layout.tsx) with metadata
  • 4.2 Integrate AuthProvider in root layout
  • 4.3 Add Navbar to root layout
  • 4.4 Add Footer to root layout
  • 4.5 Configure global styles (/app/globals.css)
  • 4.6 Set up font optimization (next/font)
  • 4.7 Configure SEO metadata (title, description, Open Graph)

5. Landing Page Migration

  • 5.1 Create landing page component (/app/page.tsx)
  • 5.2 Integrate Hero component with value proposition
  • 5.3 Add Items component showcasing features
  • 5.4 Add Logos component (if applicable for partner/client logos)
  • 5.5 Integrate FAQ component with portfolio hosting questions
  • 5.6 Add Stats component for platform metrics
  • 5.7 Integrate CTA component with "Get Started" action
  • 5.8 Implement "View Example" button with random portfolio API call
  • 5.9 Add loading states and error handling for example portfolio

6. Login Page Migration

  • 6.1 Create login page (/app/login/page.tsx)
  • 6.2 Install and configure React Hook Form
  • 6.3 Build login form with email and password inputs (shadcn/ui Input)
  • 6.4 Add form validation (email format, password min length)
  • 6.5 Implement password visibility toggle
  • 6.6 Add "Remember Me" checkbox
  • 6.7 Implement form submission handler calling /api/auth/login
  • 6.8 Handle server-side validation errors (422 responses)
  • 6.9 Store JWT token on successful login
  • 6.10 Redirect to dashboard after login
  • 6.11 Add redirect to dashboard if already authenticated

7. Register Page Migration

  • 7.1 Create register page (/app/register/page.tsx)
  • 7.2 Build registration form with name, email, password, password confirmation
  • 7.3 Add form validation with React Hook Form
  • 7.4 Implement custom password confirmation validator
  • 7.5 Add real-time validation feedback
  • 7.6 Implement form submission handler calling /api/auth/register
  • 7.7 Handle server-side validation errors
  • 7.8 Redirect to login page after successful registration
  • 7.9 Add "Already have an account?" link to login page

8. Dashboard Page Migration

  • 8.1 Create dashboard page (/app/dashboard/page.tsx) as protected route
  • 8.2 Create usePortfolios() custom hook for fetching portfolio data
  • 8.3 Implement portfolio listing with Card components
  • 8.4 Add portfolio status badges (Pending Payment, Pending Upload, Uploaded)
  • 8.5 Implement file upload functionality for ZIP files
  • 8.6 Add upload progress indicator
  • 8.7 Implement deploy button for uploaded portfolios
  • 8.8 Create "New Portfolio" form with name and domain inputs
  • 8.9 Integrate Stats component for user metrics (total portfolios, active, etc.)
  • 8.10 Add loading states and skeleton loaders
  • 8.11 Implement error handling for API failures

9. Authentication Middleware

  • 9.1 Create middleware.ts for route protection
  • 9.2 Define protected routes (matcher for /dashboard/*)
  • 9.3 Implement JWT token validation in middleware
  • 9.4 Redirect unauthenticated users to /login
  • 9.5 Preserve intended destination for post-login redirect
  • 9.6 Handle token expiration and refresh logic

10. Responsive Design & Mobile Optimization

  • 10.1 Test all pages on mobile viewports (375px, 768px, 1024px, 1440px)
  • 10.2 Ensure Launch UI components adapt to mobile layouts
  • 10.3 Implement mobile menu toggle for Navbar
  • 10.4 Verify form usability on mobile devices
  • 10.5 Test card layouts stack correctly on small screens
  • 10.6 Ensure touch targets meet minimum size (44x44px)

11. SEO & Metadata Optimization

  • 11.1 Configure metadata for each page (title, description, Open Graph)
  • 11.2 Add JSON-LD structured data for landing page
  • 11.3 Implement robots.txt and sitemap.xml
  • 11.4 Optimize images with next/image component
  • 11.5 Configure canonical URLs
  • 11.6 Add Twitter Card metadata

12. Performance Optimization

  • 12.1 Implement static generation for landing page
  • 12.2 Enable React Server Components where appropriate
  • 12.3 Optimize bundle size (analyze with @next/bundle-analyzer)
  • 12.4 Implement lazy loading for non-critical components
  • 12.5 Configure caching headers for static assets
  • 12.6 Optimize font loading with next/font
  • 12.7 Run Lighthouse audit and address performance issues

13. Testing & Quality Assurance

  • 13.1 Set up testing framework (Jest + React Testing Library)
  • 13.2 Write unit tests for API client functions
  • 13.3 Write integration tests for authentication flow
  • 13.4 Write component tests for forms (login, register, portfolio creation)
  • 13.5 Test error handling and edge cases (network failures, 401, 422)
  • 13.6 Perform end-to-end testing of complete user flows
  • 13.7 Test browser compatibility (Chrome, Firefox, Safari, Edge)
  • 13.8 Validate accessibility with axe-core or similar tool
  • 13.9 Test with screen reader (NVDA or VoiceOver)

14. Build & Deployment Configuration

  • 14.1 Update Dockerfile for Next.js production build
  • 14.2 Configure Next.js build optimization (standalone output)
  • 14.3 Set up environment variable management for production
  • 14.4 Configure reverse proxy/CDN for Next.js deployment
  • 14.5 Test production build locally
  • 14.6 Create deployment scripts or CI/CD pipeline updates
  • 14.7 Deploy to staging environment

15. Migration Validation & Cutover

  • 15.1 Feature parity checklist: verify all Angular features replicated
  • 15.2 User acceptance testing (UAT) with stakeholders
  • 15.3 Performance comparison: validate targets met (FCP, LCP, TTI)
  • 15.4 Load testing to ensure scalability under traffic
  • 15.5 Set up monitoring and error tracking (Sentry, LogRocket, etc.)
  • 15.6 Prepare rollback plan and documentation
  • 15.7 Deploy to production (parallel deployment)
  • 15.8 Gradual traffic rollout (10% → 50% → 100%)
  • 15.9 Monitor metrics for 48 hours post-cutover
  • 15.10 Complete cutover and deprecate Angular version

16. Documentation & Handoff

  • 16.1 Update README.md with Next.js setup instructions
  • 16.2 Document component usage patterns
  • 16.3 Create developer guide for Launch UI customization
  • 16.4 Document API client usage and authentication flow
  • 16.5 Update deployment documentation
  • 16.6 Archive Angular codebase for reference
  • 16.7 Update project.md in openspec/ with new conventions