Skip to content

Public Pages

Public pages provide the public-facing interface for campaign supporters and volunteers. These pages are accessible without authentication and use a dark theme for visual consistency.

Route Context

  • Prefix: Various (/campaigns, /map, /shifts, /p/:slug, /media)
  • Layout: PublicLayout (dark theme)
  • Auth Required: No
  • Theme: Dark blue/teal (#0d1b2a background)

Campaign Pages

Campaigns List Page

Route: /campaigns

Featured campaign listing:

  • Hero section with call-to-action
  • Featured campaigns grid
  • Campaign cards with images
  • Search and filter (future)
  • Responsive grid layout

Features: - Public campaign discovery - Featured campaigns first - Card-based design - Mobile responsive

Campaign Page

Route: /campaigns/:id

Campaign detail and action page:

  • Campaign description
  • Target representatives lookup
  • Email form with templates
  • Progress tracking
  • Social sharing

Features: - Postal code → representative lookup - Email to representatives - Form validation - Success confirmation - Response submission link

Response Wall Page

Route: /responses/:campaignId

Public response submissions and viewing:

  • Response submission form
  • Email verification flow
  • Response list (verified only)
  • Upvoting system
  • Sorting options

Features: - Submit responses anonymously - Email verification required - Upvote responses - Sort by newest/popular - Responsive cards

Map & Location Pages

Map Page

Route: /map

Public interactive map:

  • Leaflet map with locations
  • Color-coded markers by status
  • Geographic cuts overlay
  • Cut visibility controls
  • Geolocate button
  • Fullscreen mode
  • Map legend

Features: - OpenStreetMap tiles - Custom markers - Polygon overlays - Popup information - Mobile responsive

Shifts Page

Route: /shifts

Public shift signup:

  • Shift cards by date
  • Cut information
  • Signup modal
  • Temp user creation
  • Email confirmation

Features: - Filter by date/cut - Quick signup flow - Anonymous signups (creates TEMP user) - Email notifications - Mobile responsive

Content Pages

Landing Page

Route: /p/:slug

Rendered landing pages:

  • Custom HTML/CSS content
  • GrapesJS block rendering
  • Responsive design
  • SEO metadata
  • Custom scripts support

Features: - Dynamic content from database - Custom styling - Block-based layout - Published pages only

Media Pages

Media Gallery Page

Route: /media

Public video gallery:

  • Shared videos grid
  • Category filtering
  • Search functionality
  • Reaction system (6 emojis)
  • Video cards with thumbnails

Features: - Public videos only (unlocked + shared) - Responsive grid - Click to view details - Emoji reactions - Mobile responsive

Media Viewer Page

Route: /media/:id

Video detail page:

  • Video player
  • Title and description
  • Reaction buttons
  • Related videos
  • Share options

Features: - HTML5 video player - Reaction tracking - Social sharing - Mobile responsive

Public Page Count

Total: 8 public pages

Common Features

Public pages share:

  • Dark Theme - Blue/teal color scheme (#0d1b2a)
  • No Authentication - Open access
  • Responsive Design - Mobile-first approach
  • Grid Breakpoints - Uses Grid.useBreakpoint()
  • Loading States - Spinners and skeletons
  • Error Handling - User-friendly messages
  • SEO Friendly - Meta tags, semantic HTML

Theme Colors

colorBgBase: '#0d1b2a'       // Dark navy background
colorBgContainer: '#1b2838'  // Container background
colorPrimary: '#3498db'      // Bright blue accent
colorLink: '#3498db'         // Link color
colorText: '#e0e0e0'         // Light text
colorTextSecondary: '#a0a0a0' // Secondary text

Layout Structure

Public pages use PublicLayout which provides:

  • Header
  • Logo/branding
  • Navigation links

  • Login button (when not authenticated)

  • Content Area

  • Full-width container
  • Responsive padding

  • Dark theme styling

  • Footer

  • Contact links
  • About information
  • Social media
  • Copyright

Mobile Responsiveness

Public pages are optimized for mobile:

  • Touch-friendly controls
  • Responsive grids
  • Mobile navigation
  • Optimized forms
  • Fast loading

API Integration

Public pages use direct axios (no auth interceptor):

import axios from 'axios';

const response = await axios.get(
  `${import.meta.env.VITE_API_URL}/api/campaigns/public`
);

Admin pages use authenticated api client from lib/api.ts.

Form Validation

Public forms use Zod validation:

const emailSchema = z.object({
  email: z.string().email(),
  message: z.string().min(10),
});