admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 31 Wiki Activity
changemaker.lite/mkdocs/docs/v2/frontend/pages/public/index.md

5.2 KiB
Raw Blame History

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),
});

Related Documentation