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/specs/frontend/spec.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

5.7 KiB
Raw Permalink Blame History

Frontend Capability - Delta Specification

ADDED Requirements

Requirement: Next.js App Router Architecture

The frontend application SHALL be built using Next.js 15 with the App Router pattern, supporting both React Server Components and Client Components.

Scenario: Server-side rendering for public pages

  • WHEN a user navigates to the landing page
  • THEN the page SHALL be server-side rendered with Launch UI components
  • AND the initial HTML SHALL contain fully rendered content for SEO

Scenario: Client-side interactivity for forms

  • WHEN a user interacts with login or registration forms
  • THEN the form components SHALL be client components with React state management
  • AND form validation SHALL occur in real-time on the client

Scenario: Static generation for unchanged content

  • WHEN building the application for production
  • THEN static pages SHALL be pre-generated where possible
  • AND metadata SHALL be statically optimized for search engines

Requirement: Launch UI Component Integration

The frontend application SHALL integrate Launch UI components for all public-facing pages, including Navbar, Hero, Items, Logos, FAQ, Stats, CTA, and Footer.

Scenario: Landing page composition

  • WHEN the landing page is rendered
  • THEN it SHALL include Hero, Items, Logos, FAQ, Stats, and CTA components from Launch UI
  • AND components SHALL be styled consistently with Tailwind CSS 4.0

Scenario: Global navigation and footer

  • WHEN any page is rendered
  • THEN it SHALL include the Navbar component at the top
  • AND the Footer component at the bottom
  • AND navigation links SHALL route correctly using Next.js Link components

Scenario: Component customization

  • WHEN Launch UI components require customization
  • THEN the components SHALL be copied to the local /components/launch-ui/ directory
  • AND customizations SHALL preserve the core shadcn/ui patterns

Requirement: TypeScript 5.0 Type Safety

The application SHALL use TypeScript 5.0 with strict mode enabled for comprehensive type checking across all components and utilities.

Scenario: Type-safe API responses

  • WHEN making API requests
  • THEN all response types SHALL be explicitly defined with TypeScript interfaces
  • AND the compiler SHALL enforce type safety at compile time

Scenario: Component prop validation

  • WHEN passing props to React components
  • THEN prop types SHALL be validated by TypeScript
  • AND invalid prop combinations SHALL produce compile-time errors

MODIFIED Requirements

Requirement: Responsive Layout and Styling

The application SHALL provide a fully responsive user interface using Tailwind CSS 4.0 utility classes, optimized for mobile, tablet, and desktop viewports.

(Modified from Angular implementation to Next.js + Launch UI implementation)

Scenario: Mobile-first responsive design

  • WHEN the application is viewed on a mobile device
  • THEN all Launch UI components SHALL render in mobile-optimized layouts
  • AND navigation SHALL collapse to a mobile menu
  • AND forms SHALL stack vertically for narrow viewports

Scenario: Desktop layout expansion

  • WHEN the application is viewed on desktop screens
  • THEN content SHALL expand to utilize available width
  • AND grid layouts SHALL display multiple columns
  • AND the Navbar SHALL display full navigation links

Scenario: Tailwind CSS 4.0 utilities

  • WHEN styling components
  • THEN Tailwind CSS 4.0 utility classes SHALL be used exclusively
  • AND custom CSS SHALL be minimized in favor of utility classes
  • AND the Tailwind configuration SHALL extend Launch UI defaults

Requirement: Client-Side Routing

The application SHALL provide client-side navigation between pages using Next.js App Router with optimized prefetching and smooth transitions.

(Modified from Angular Router to Next.js App Router)

Scenario: Navigation between public pages

  • WHEN a user clicks a navigation link
  • THEN the Next.js Link component SHALL perform client-side navigation
  • AND the page SHALL transition without full-page reload
  • AND the browser history SHALL be updated correctly

Scenario: Protected route access

  • WHEN an unauthenticated user attempts to access the dashboard
  • THEN the middleware SHALL intercept the request
  • AND the user SHALL be redirected to the login page
  • AND the original destination SHALL be preserved for post-login redirect

Scenario: Programmatic navigation

  • WHEN a component needs to navigate programmatically (e.g., after login)
  • THEN the useRouter hook SHALL be used for navigation
  • AND navigation SHALL support query parameters and hash fragments

REMOVED Requirements

Requirement: Angular-Specific Dependency Injection

Reason: Next.js does not use Angular's dependency injection system; React Context API and hooks replace this pattern.

Migration: Convert all Angular services to React hooks or API client utility functions. Replace providedIn: 'root' services with Context Providers or singleton modules.

Requirement: RxJS Observable State Management

Reason: React's built-in state management (useState, useContext) is more idiomatic and sufficient for the application's state complexity.

Migration: Replace RxJS BehaviorSubjects with React Context API. Convert Observable subscriptions to useEffect hooks with state updates.

Requirement: Angular Reactive Forms Module

Reason: Next.js applications use React-based form libraries. Launch UI patterns align with React Hook Form.

Migration: Replace Angular ReactiveFormsModule with React Hook Form. Convert FormControl/FormGroup to React Hook Form's useForm hook and register pattern.