b83c7a7d6d
Some checks failed
Build and Deploy to k3s / build-and-deploy (push) Failing after 1m31s
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>
74 lines
3.9 KiB
Markdown
74 lines
3.9 KiB
Markdown
# 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
|