Skip to content

New frontend#2

Merged
AndresL230 merged 2 commits into
mainfrom
new_frontend
Apr 18, 2026
Merged

New frontend#2
AndresL230 merged 2 commits into
mainfrom
new_frontend

Conversation

@AndresL230
Copy link
Copy Markdown

@AndresL230 AndresL230 commented Apr 18, 2026

Summary by CodeRabbit

Release Notes

  • New Features

    • Added error boundary with fallback UI for crash handling
    • Added demo mode banner for unconfigured instances
    • Introduced feed-based home with infinite scroll and sorting
    • Added vote and favorite interactions on plates
    • New profile page with stats, states unlocked, and activity tabs
    • New design system with updated color palette and typography
  • Major UI Redesigns

    • Redesigned navigation with new logo and button styling
    • Replaced map-based state view with interactive grid layout
    • Rebuilt leaderboard with podium showcase and top-10 rankings
    • New upload flow with multi-step form and auto-moderation display
    • Redesigned login, authentication, and profile pages
    • Added design canvas gallery tool for component showcase
  • Bug Fixes & Improvements

    • Improved loading state styling across pages
    • Enhanced error messaging and recovery flows

@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
plate-gallery 9a48d84 Commit Preview URL

Branch Preview URL
Apr 18 2026, 05:14 PM

@AndresL230 AndresL230 merged commit e5e054b into main Apr 18, 2026
1 of 2 checks passed
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 18, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6a14dd7c-739d-4993-bb05-59cba220a480

📥 Commits

Reviewing files that changed from the base of the PR and between db77af1 and 9a48d84.

⛔ Files ignored due to path filters (5)
  • frontend/public/favicon.svg is excluded by !**/*.svg
  • frontend/src/assets/hero.png is excluded by !**/*.png
  • frontend/src/assets/react.svg is excluded by !**/*.svg
  • frontend/src/assets/vite.svg is excluded by !**/*.svg
  • plate gallery/uploads/Bounty 1_ PlateGallery Project Brief.pdf is excluded by !**/*.pdf
📒 Files selected for processing (48)
  • .claude/settings.local.json
  • frontend/index.html
  • frontend/src/App.tsx
  • frontend/src/components/Container.tsx
  • frontend/src/components/Divider.tsx
  • frontend/src/components/Eyebrow.tsx
  • frontend/src/components/Footer.tsx
  • frontend/src/components/FullBleed.tsx
  • frontend/src/components/LogoMark.tsx
  • frontend/src/components/Nav.tsx
  • frontend/src/components/PhotoSnap.tsx
  • frontend/src/components/Pill.tsx
  • frontend/src/components/Plate.tsx
  • frontend/src/components/PlateCard.tsx
  • frontend/src/components/ProtectedRoute.tsx
  • frontend/src/components/RevealOnScroll.tsx
  • frontend/src/components/StateBadge.tsx
  • frontend/src/components/VoteControl.tsx
  • frontend/src/index.css
  • frontend/src/lib/api.ts
  • frontend/src/lib/design.ts
  • frontend/src/lib/mockData.ts
  • frontend/src/lib/supabase.ts
  • frontend/src/pages/About.tsx
  • frontend/src/pages/AuthCallback.tsx
  • frontend/src/pages/Gallery.tsx
  • frontend/src/pages/Home.tsx
  • frontend/src/pages/Leaderboard.tsx
  • frontend/src/pages/Login.tsx
  • frontend/src/pages/NotFound.tsx
  • frontend/src/pages/PlateDetail.tsx
  • frontend/src/pages/Profile.tsx
  • frontend/src/pages/StateDetail.tsx
  • frontend/src/pages/States.tsx
  • frontend/src/pages/Upload.tsx
  • plate gallery/design-canvas.jsx
  • plate gallery/pg/app.jsx
  • plate gallery/pg/chrome.jsx
  • plate gallery/pg/plate.jsx
  • plate gallery/pg/screen-detail.jsx
  • plate gallery/pg/screen-feed.jsx
  • plate gallery/pg/screen-leaderboard.jsx
  • plate gallery/pg/screen-map.jsx
  • plate gallery/pg/screen-profile.jsx
  • plate gallery/pg/screen-state.jsx
  • plate gallery/pg/screen-upload.jsx
  • plate gallery/pg/tokens.jsx
  • plate gallery/plate-gallery.html

📝 Walkthrough

Walkthrough

This pull request introduces a comprehensive frontend redesign: removes legacy components (Container, Divider, Eyebrow, FullBleed, RevealOnScroll), adds new design-focused components (Plate, PhotoSnap, Pill, StateBadge, LogoMark), redesigns all page layouts with new information architecture, introduces a mock data system for demo mode, and adds an interactive design canvas gallery application for design system exploration.

Changes

Cohort / File(s) Summary
Component Library Removals
frontend/src/components/Container.tsx, frontend/src/components/Divider.tsx, frontend/src/components/Eyebrow.tsx, frontend/src/components/FullBleed.tsx, frontend/src/components/RevealOnScroll.tsx
Removed five utility/wrapper components, consolidating layout patterns directly into page components.
New Design Components
frontend/src/components/Plate.tsx, frontend/src/components/PhotoSnap.tsx, frontend/src/components/Pill.tsx, frontend/src/components/StateBadge.tsx, frontend/src/components/LogoMark.tsx
Added five new components for rendering vanity plates (SVG), plate photography snapshots with backgrounds, pill-style badges, state code badges, and logo mark SVG.
Component Refactors
frontend/src/components/Nav.tsx, frontend/src/components/Footer.tsx, frontend/src/components/PlateCard.tsx, frontend/src/components/VoteControl.tsx, frontend/src/components/ProtectedRoute.tsx
Updated navigation with new links and styling; redesigned footer layout with new link labels; expanded PlateCard with photo, state, and vote controls; simplified VoteControl by removing animations and adding size prop; updated loading UI in ProtectedRoute.
App Root and Error Handling
frontend/src/App.tsx
Added AppErrorBoundary class component with full-page error fallback, ConfigBanner for demo mode notification, removed lazy-loaded Gallery route with redirect to home, updated Suspense loading styling.
Core Libraries
frontend/src/lib/api.ts, frontend/src/lib/supabase.ts
Updated apiFetch to check mock mode before fetching; modified Supabase client to be conditionally created with stub implementation when config is missing; added supabaseConfigured export.
Design System and Mock Data
frontend/src/lib/design.ts, frontend/src/lib/mockData.ts
Added PG design tokens constant (colors, fonts, radius); introduced comprehensive mock data system with isMockMode detection and handleMockRequest supporting feed, voting, favorites, comments, leaderboards, and user endpoints.
Global Styling
frontend/src/index.css
Replaced font imports (Playfair/Inter → Sofia Sans Extra Condensed/Nunito); completely refreshed color palette; expanded typography reset to include p tag; added scrollbar-hide utility; removed link-draw hover effects.
Page Component Rewrites
frontend/src/pages/Home.tsx, frontend/src/pages/Gallery.tsx, frontend/src/pages/Leaderboard.tsx, frontend/src/pages/PlateDetail.tsx, frontend/src/pages/Profile.tsx, frontend/src/pages/StateDetail.tsx, frontend/src/pages/States.tsx
Removed Gallery; redesigned Home with feed-centric two-rail layout; reimplemented Leaderboard with podium cards and side panels; restructured PlateDetail with photo/vote/comments layout; revamped Profile with stats sidebar; updated StateDetail with hero and leaderboard sections; replaced States SVG map with grid-based state selector.
Page Styling Updates
frontend/src/pages/About.tsx, frontend/src/pages/AuthCallback.tsx, frontend/src/pages/Login.tsx, frontend/src/pages/NotFound.tsx, frontend/src/pages/Upload.tsx
Updated animation parameters, redesigned card layouts, improved typography hierarchy, added new UI elements (Pill tags, LogoMark, Plate SVG graphics), changed motion transition offsets/durations.
HTML and Configuration
frontend/index.html, .claude/settings.local.json
Changed page title from "PlateGallery — American Vanity Plates" to "PlateGallery"; expanded Claude allowlist for design file downloads and API operations.
Design Canvas Gallery System
plate gallery/design-canvas.jsx, plate gallery/pg/app.jsx, plate gallery/pg/chrome.jsx, plate gallery/pg/plate.jsx, plate gallery/pg/tokens.jsx, plate gallery/pg/screen-*.jsx (6 files), plate gallery/plate-gallery.html
Added complete interactive design system showcase: design canvas component with pan/zoom controls, shared UI chrome (BrowserFrame, TopNav, design tokens), screen components for each major app page (Feed, Detail, Map, State, Leaderboard, Profile, Upload), and HTML entrypoint loading React and JSX transpiler for in-browser editing.

Sequence Diagram

sequenceDiagram
    participant User
    participant App as App (Root)
    participant ErrorBoundary as AppErrorBoundary
    participant AuthProvider
    participant APILayer as API / Mock Handler
    participant Database as Supabase / Mock Data

    User->>App: Open application
    App->>ErrorBoundary: Wrap app tree
    ErrorBoundary->>AuthProvider: Initialize auth context
    AuthProvider->>APILayer: Check session
    
    alt Mock Mode Enabled
        APILayer->>APILayer: isMockMode() returns true
        APILayer->>Database: handleMockRequest (in-memory)
        Database->>APILayer: Return mock data
    else Production Mode
        APILayer->>Database: fetch with real Supabase client
        Database->>APILayer: Return data or auth error
    end
    
    APILayer->>AuthProvider: Session/User resolved
    AuthProvider->>App: Auth context ready, render page

    alt Render Error Occurs
        App->>ErrorBoundary: Throw error
        ErrorBoundary->>User: Show "RENDER ERROR" fallback with reload button
    else Success
        App->>User: Render page with ConfigBanner if not supabaseConfigured
    end
Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes


🐰 hops through redesigned components with glee

New plates rendered in vectors so bright,
Mock data flows where config's not right,
A canvas unfolds for design delight,
Components refactored to pixel perfection—
PlateGallery blooms in a fresh direction! ✨🚗

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch new_frontend

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant