Senior Full-Stack Engineer Entwicklungsplan Generator

**Executive Summary** This plan enhances the existing web application by prioritizing a mobile-first responsive overhaul, performance optimization aligned with Core Web Vitals, and a cohesive design system built on scalable tokens. We will adopt a utility-first CSS approach (Tailwind) with CSS modules for legacy components, implement a phased rollout starting with critical UX fixes and ending with advanced performance tuning. The strategy leverages current user data (predominantly mobile traffic) to justify breakpoint adjustments and touch-target improvements, ensuring seamless cross-device experiences without disrupting existing workflows. --- **1. Responsive Strategy** - **Breakpoints**: Keep current breakpoints (mobile 320px, tablet 768px, desktop 1024px, large 1440px) but adjust to `sm:640px`, `md:768px`, `lg:1024px`, `xl:1280px`, `2xl:1536px` for finer control. Rationale: Current gaps at 640-767px cause layout jumps; new breakpoints align with common device widths. - **Approach**: Mobile-first (existing data shows 70% mobile sessions). Build base styles for mobile, then enhance with `min-width` media queries. - **Layout System**: Use CSS Grid for page structure (12-column grid) and Flexbox for component-level alignment. Replace fixed-width containers with `clamp()` for fluid scaling (e.g., `max-width: clamp(320px, 90vw, 1200px)`). - **Touch & Interaction**: - Touch targets: Minimum 44x44px for all interactive elements (buttons, links). - Hover states: Only apply on devices with hover capability (`@media (hover: hover)`). - Keyboard navigation: Ensure visible focus rings (`outline: 2px solid #4A90E2; outline-offset: 2px`). - **Safe Areas & Viewport**: Use `env(safe-area-inset-*)` for notched devices; adopt `100dvh` for full-height sections (fallback to `100vh`). - **Font & Images**: - Font scaling: Use `clamp()` for headings (e.g., `h1 { font-size: clamp(1.5rem, 4vw, 2.5rem) }`). - Images: Implement `srcset` with `sizes` attribute (e.g., `sizes="(max-width: 768px) 100vw, 50vw"`). Use `loading="lazy"` for below-fold images. - **Pitfall**: Avoid over-nesting media queries; use container queries for component-level responsiveness (e.g., `@container (max-width: 400px)`). --- **2. Performance Blueprint** - **Targets**: LCP <2.5s, INP <100ms, CLS <0.1, 60fps animations. - **Current Assessment**: Audit with Lighthouse (mobile) - likely LCP ~4s due to unoptimized hero image; INP ~200ms from heavy JS on scroll; CLS ~0.15 from late-loading fonts. - **Techniques**: - **Lazy Loading**: Use `IntersectionObserver` for images and iframes; code-split routes via React.lazy (if React) or dynamic imports. - **Asset Optimization**: Convert images to WebP/AVIF; inline critical CSS; defer non-critical JS with `defer` attribute. - **CSS Containment**: Apply `content-visibility: auto` to off-screen sections (e.g., long lists) to skip rendering. - **GPU Compositing**: Use `transform` and `opacity` for animations; avoid `top/left` changes. Add `will-change: transform` sparingly. - **Offline Support**: If no service worker exists, add a basic one with cache-first for static assets and network-first for API calls. Fallback to a custom offline page. - **Pitfall**: Over-optimizing images can hurt quality; use `quality=70` for WebP and test visually. --- **3. Design System Specification** - **Tokens**: - Colors: Primary `#4A90E2` (blue), Secondary `#50E3C2` (teal), Background `#FFFFFF` / `#121212` (dark), Text `#1A1A1A` / `#E0E0E0`. - Spacing: Base 8px scale (4, 8, 12, 16, 24, 32, 48, 64). - Typography: Font stack `Inter, system-ui, sans-serif`; sizes: `12px` (caption), `14px` (body), `16px` (body-large), `20px` (h4), `24px` (h3), `32px` (h2), `48px` (h1). - Elevation: Shadows `0 1px 3px rgba(0,0,0,0.12)`, `0 4px 6px rgba(0,0,0,0.16)`, `0 10px 20px rgba(0,0,0,0.19)`. - Motion: Durations `150ms` (micro), `300ms` (standard), `500ms` (large); easing `cubic-bezier(0.4, 0, 0.2, 1)`. - **Color Palette Strategy**: Use CSS custom properties with `[data-theme="dark"]` overrides. Ensure contrast ratios meet WCAG AA (e.g., text on primary: `#FFFFFF` on `#4A90E2` = 4.5:1). - **Spacing & Radius**: Border radius `4px` (small), `8px` (medium), `16px` (large) for cards/modals. - **Iconography**: Use a consistent stroke-based icon set (e.g., Lucide) at 24px default; ensure alignment with existing icons. - **Component Consistency**: For legacy components, wrap with a `legacy` class that applies token overrides (e.g., `--spacing-unit: 8px`) to gradually migrate. - **Pitfall**: Avoid overusing shadows; stick to 3 levels to maintain visual hierarchy. --- **4. UX/UI Pattern Library Plan** - **Hierarchy & Scannability**: Use bold headings (600+ weight) and whitespace (24px gaps between sections). - **Feedback & Affordance**: - Loading states: Skeleton screens (gray shimmer) for data lists; spinner for buttons. - Micro-interactions: Button hover scale `1.02` with `transition: transform 150ms ease`. - **Navigation**: - Mobile: Hamburger menu (slide-in drawer) with overlay; bottom nav for primary actions (e.g., Home, Search, Cart). - Desktop: Sticky top nav with breadcrumbs (e.g., `Home > Category > Product`). - **Accessibility**: - Contrast: Ensure all text meets 4.5:1 (normal) and 3:1 (large). - ARIA: Add `role="navigation"` to nav, `aria-label` to icons, `aria-live` for dynamic content. - Focus: Visible focus indicators; skip-to-content link. - **Forms**: - Inline validation with error messages (e.g., `aria-describedby`). - Input types: `email`, `tel`, `number` for mobile keyboards. - **Motion**: Use `prefers-reduced-motion` to disable non-essential animations (e.g., fade-ins). - **Empty States**: Provide illustration + CTA (e.g., "No items yet - Browse products"). - **Pitfall**: Avoid hamburger menus on desktop; use visible nav links for usability. --- **5. Technical Architecture** - **Stack**: Keep current stack (assume React + Node) but add: - CSS: Tailwind CSS (utility-first) for new components; CSS modules for legacy. - State: Zustand (lightweight) over Redux for simpler state management. - Testing: Playwright for E2E, Jest for unit tests. - **Folder Structure**: - `src/components/ui` (reusable), `src/features` (feature-specific), `src/hooks`, `src/utils`. - **Theming**: Implement `ThemeProvider` with context; use CSS variables for runtime switching. - **Testing Strategy**: - Tools: Playwright with device emulation (iPhone 12, iPad Pro, Desktop 1920x1080). - Breakpoints to test: 320, 640, 768, 1024, 1440. - Include visual regression tests (e.g., Percy) to catch layout shifts. - **Pitfall**: Avoid mixing Tailwind and CSS modules in the same component; choose one per component. --- **6. Phased Rollout Plan** - **Phase 1 (MVP - 2 weeks)**: Fix critical UX issues (touch targets, focus states, mobile nav). Implement design tokens and basic theming. - **Phase 2 (Polish - 3 weeks)**: Add skeleton screens, micro-interactions, and empty states. Optimize images with srcset. - **Phase 3 (Optimization - 2 weeks)**: Implement lazy loading, code splitting, and service worker. Run Lighthouse audits and fix CLS/INP. - **Phase 4 (Hardening - 1 week)**: Full accessibility audit (axe), cross-device testing, and performance monitoring (RUM). --- **7. Quality Checklist** - [ ] Test on real devices: iPhone SE (320px), iPhone 12 (390px), iPad (768px), Desktop (1440px). - [ ] Verify touch targets ≥44px on all interactive elements. - [ ] Check contrast ratios with axe DevTools (AA). - [ ] Run Lighthouse on mobile: LCP <2.5s, CLS <0.1, INP <100ms. - [ ] Test keyboard navigation (Tab order, focus rings). - [ ] Verify offline page loads with service worker. - [ ] Ensure no horizontal scroll at any breakpoint. - [ ] Validate forms with inline errors on mobile keyboards. - [ ] Confirm reduced-motion preference disables animations. - [ ] Visual regression pass on all breakpoints.