[Product Homepage Design] Implementation#151
Open
yetone wants to merge 26 commits into
Open
Conversation
added 26 commits
May 17, 2026 03:30
… routing - Create frontend project structure with React 18, TypeScript, Vite, Vitest - Add shared types, constants, and test setup - Implement HeroCTA component with primary Register and secondary Login links - Implement HomeNavbar with brand link and navigation links - Add comprehensive tests for CTA routing and navbar navigation - Configure Tailwind CSS and DaisyUI theme system
Add integration tests that render <App /> with MemoryRouter to verify that clicking the Register hero CTA navigates to /register and clicking the Login navbar link navigates to /login. Complements the existing HeroCTA and HomeNavbar unit tests with route-resolution coverage.
Composes Home.tsx as a public landing page that renders the navbar, hero, and features sections inside a semantic <main> with id "main-content". Sets document.title to "MirDB - URL Shortening Service" via a useEffect fallback so the title is correct even before the head-manager (Scenario 8) is fully wired. Updates Hero.tsx to add data-testid="hero" on the section, an aria-labelledby relationship to the h1, a tagline element that explicitly references URL shortening and analytics/tracking, and a longer value-proposition paragraph. Adds Hero.test.tsx and Home.test.tsx covering REQ-1, REQ-2, US-1: heading content, tagline keywords, hero region composition, document.title integration, graceful rendering without a ThemeProvider, and DOM ordering of sub-sections.
…cards Implements scenario 3 (Feature Showcase Section): - FeaturesSection renders a semantic <section> with an accessible heading and lists at least three feature cards (URL shortening, click analytics, dashboard, share stats) sourced from constants. - FeatureCard renders an SVG icon, title (h3), and description per card. Decorative icons are aria-hidden to avoid duplicate announcements when paired with visible text labels (WCAG 2.1 AA). - FeaturesSection accepts an optional features prop and falls back to an empty-state placeholder when given an empty array, never crashing. - Adds unit tests for both components plus an integration test verifying that the features region appears after the hero in DOM order on Home.
…and Navigation Routing"
…qlwj-9e81bb9' into feature/product-homepage-design-qlwj-9e81bb9
…qlwj-9e81bb9' into feature/product-homepage-design-qlwj-9e81bb9
…emeToggle
Implements Scenario 4 (Theme Switching and Persistence).
- ThemeContext: reads/writes localStorage('theme'), validates against the
THEMES list, applies data-theme to documentElement, exposes useTheme(),
setTheme(), toggleTheme().
- ThemeToggle: accessible icon button with aria-label, aria-pressed, and
a data-active-theme attribute. Renders safely without a provider.
- main.tsx: wraps <App /> with <ThemeProvider /> to complete the wiring
described in the scaffold.
Implements Scenario 5 (REQ-7, US-5): the homepage now adapts between mobile (<768px), tablet (768-1023px), and desktop (>=1024px) viewports. - Adds a self-contained MobileMenu component with hamburger trigger, slide-in panel, Escape-to-close, overlay-click-to-close, focus return to the trigger, aria-expanded/aria-controls/aria-haspopup, and 44x44 CSS-pixel touch targets. - Exposes useIsMobile() driven by window.innerWidth + resize events, with 768px as the default breakpoint. - Wires HomeNavbar to swap the inline desktop nav for the MobileMenu below the breakpoint so mobile users only see the hamburger trigger. - Adds unit tests for MobileMenu and useIsMobile, plus integration tests in tests/responsive/ covering desktop/tablet/mobile/320px and live resize transitions.
…nd a11y test suite - Implement SkipToContent component that targets #main-content, is sr-only until focused, and programmatically moves focus to the page <main> when activated (WCAG 2.4.1 Bypass Blocks). - Wire jest-axe into the Vitest setup to extend expect with toHaveNoViolations. - Add SkipToContent unit tests covering default props, target overrides, visibility, focus management, and tab order. - Add comprehensive homepage accessibility integration tests in tests/accessibility/homepage.a11y.test.tsx covering: * single-h1 / h2 heading hierarchy * axe-core audit (default and dark theme) * keyboard skip-link navigation and focus moves into <main> * icon-only buttons must expose an accessible name * every <img> has an alt attribute * semantic landmarks (main, banner, navigation)
…anonical tags Implements the SEOTags component using react-helmet-async to inject title, description, viewport, Open Graph (og:title/description/type/url/ image/site_name), Twitter Card (summary_large_image + title/description/ image), and a canonical <link> into the document head (NFR-2). The component is resilient: it ships its own HelmetData singleton so the meta tags still apply when a parent HelmetProvider has not been mounted (e.g. in sibling-scenario tests that render <Home /> without wrapping with HelmetProvider).
…qlwj-9e81bb9' into feature/product-homepage-design-qlwj-9e81bb9
…qlwj-9e81bb9' into feature/product-homepage-design-qlwj-9e81bb9
Adds frontend/tests/performance/homepage.perf.test.tsx covering NFR-1 and NFR-3 of the MirDB homepage: - JSDOM render-time regression guard for <Home /> - Re-render isolation check ensuring an unrelated state change does not re-render <FeaturesSection /> - Production build payload assertion: HTML + CSS under the 500KB budget and JS bundle documented within a sane budget - Negative network check: no calls to authenticated endpoints (/api/users/me, /api/urls) during public homepage render - Script hygiene check: no render-blocking third-party <script src> injected by the homepage component tree
…qlwj-9e81bb9' into feature/product-homepage-design-qlwj-9e81bb9
…qlwj-9e81bb9' into feature/product-homepage-design-qlwj-9e81bb9
Supplements the existing performance suite with a static check on the Vite-emitted dist/index.html: every <script> tag must be type="module" (implicitly deferred), async, or defer. Guards against a future vite config regression that introduces a render-blocking inline script.
…allback Adds the routing integration scenario: - AuthContext + AuthProvider providing isAuthenticated/login/logout state - ProtectedLayout that redirects unauthenticated visitors to /login - Dashboard stub with logout handler navigating back to '/' - NotFound page rendered by catch-all '*' route - AppRoutes wires '/' as a public route (NOT in ProtectedLayout) and groups /dashboard, /stats/:shortCode, /settings under ProtectedLayout - Extends ROUTES constants with DASHBOARD/STATS/SETTINGS - 17 integration tests under frontend/tests/routing/AppRoutes.test.tsx cover homepage at '/', logout-from-dashboard return path, unknown-route fallback, public access to '/', and authenticated access to '/'.
…qlwj-9e81bb9' into feature/product-homepage-design-qlwj-9e81bb9
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements the requirements for Product Homepage Design.
Generated by Something