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/proposal.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

3.9 KiB
Raw Blame History

Migration to Next.js with Launch UI Template

Why

The current Angular 20 application requires a complete UI overhaul and framework migration to leverage modern landing page components optimized for conversion. Launch UI provides production-ready, conversion-optimized components built specifically for SaaS products and developer tools, which aligns perfectly with the portfolio hosting platform's needs. Additionally, migrating to Next.js enables server-side rendering, improved SEO, and better performance for the public-facing landing pages.

The current stack (Angular + custom Tailwind components) requires significant manual UI development effort, while Launch UI offers battle-tested components (Hero, CTA, FAQ, Stats, Social Proof, Testimonials) that can be integrated immediately.

What Changes

BREAKING CHANGES:

  • BREAKING: Complete framework migration from Angular 20 to Next.js 15
  • BREAKING: Replacement of all existing Angular components with Next.js + Launch UI equivalents
  • BREAKING: Migration from Angular Router to Next.js App Router
  • BREAKING: Conversion of Angular services to Next.js API routes and React hooks
  • BREAKING: Replacement of RxJS-based state management with React state patterns (Context API, hooks)

Non-Breaking Enhancements:

  • Integration of Launch UI component library (shadcn/ui + Tailwind CSS 4.0)
  • Adoption of TypeScript 5.0 (from TypeScript 5.8)
  • Implementation of Launch UI components: Navbar, Hero, Items, Logos, FAQ, Stats, CTA, Footer
  • Server-side rendering for public pages (Landing, Login, Register)
  • Enhanced UI/UX with pre-built, conversion-optimized components
  • Improved SEO capabilities through Next.js metadata API
  • Maintained API compatibility with existing backend (no backend changes required)

Impact

Affected Specs

  • frontend - Complete rewrite from Angular to Next.js architecture
  • ui-components - New capability for Launch UI component integration
  • authentication - Migration from Angular services to Next.js API routes + React hooks
  • routing - Conversion from Angular Router to Next.js App Router
  • state-management - Transition from RxJS to React patterns

Affected Code

  • Complete Rewrite Required:

    • /src/app/ - All Angular components → Next.js pages/components
    • /src/main.ts - Angular bootstrap → Next.js app entry
    • /src/app/app.routes.ts - Angular routes → Next.js app directory structure
    • /src/app/services/ - Angular services → Next.js API routes + React hooks
    • /src/app/auth-interceptor.ts - Angular interceptor → Next.js middleware

  • New Files:

    • /app/ - Next.js App Router pages
    • /components/ - Launch UI components + custom components
    • /lib/ - Utility functions and API client
    • /middleware.ts - Authentication middleware
    • next.config.js - Next.js configuration

  • Modified Files:

    • package.json - Complete dependency replacement
    • tsconfig.json - Next.js TypeScript configuration
    • tailwind.config.ts - Tailwind CSS 4.0 configuration
    • .env.local - Environment variables for Next.js

  • Removed Files:

    • angular.json - No longer needed
    • All /src/ Angular-specific files
    • karma.conf.js - Replaced with Jest/Vitest

Migration Risks

  • High Complexity: Complete framework replacement requiring full regression testing
  • Learning Curve: Team must learn Next.js patterns, React hooks, and Launch UI conventions
  • Data Migration: Ensure seamless transition without losing user sessions or data
  • API Compatibility: Must maintain backward compatibility with existing backend API
  • Performance: Validate that SSR improves performance without introducing latency

User Impact

  • Zero Downtime Target: Deploy as parallel version, then cutover
  • Session Preservation: Users may need to re-authenticate during migration
  • Improved UX: Better UI/UX with professional Launch UI components
  • Faster Load Times: SSR should improve initial page load performance