Skip to content

feat: enhance iOS UI with full campaign data display #36

Description

@Jing-yilin

Problem

The iOS app currently displays minimal campaign information, leaving many valuable data fields unused:

Currently NOT displayed:

  • ❌ Project description (blurb)
  • ❌ Backers count
  • ❌ 24h momentum metrics (velocity_24h, pledge_delta_24h)
  • ❌ Historical funding trend (sparkline chart from /api/campaigns/:pid/history)
  • ❌ Funding goal in currency units
  • ❌ Campaign state badge (live/successful/failed/canceled)
  • ❌ Category on list view
  • ❌ First seen date

What's shown now:

  • ✅ Thumbnail, name, creator
  • ✅ Progress bar + percent funded
  • ✅ Days left
  • ✅ Basic momentum badge (🔥/⚡)

Available Backend Data

All these fields are available from the API but unused:

Field Type Use Case
blurb String Project pitch/description
backers_count Int Social proof indicator
velocity_24h Double Growth rate last 24h
pledge_delta_24h Double $ amount gained in 24h
state String live/successful/failed/canceled
slug String URL slug for deep linking
/api/campaigns/:pid/history API Daily pledge snapshots for chart

Proposed Enhancement

1. List View (CampaignRowView)

Add:

  • Backers count below progress bar: "1,234 backers"
  • State badge for non-live: "Successful" / "Failed" / "Canceled"
  • Category chip (optional, if space permits)

Layout:

[Thumbnail] Project Name
            by Creator
            [Progress Bar]
            85% • 1,234 backers • 12d left 🔥 +250%

2. Detail View (CampaignDetailView)

A. Project Description Section (below hero image):

Description
-----------
[blurb text, expandable if > 3 lines]

B. Enhanced Stats Grid (add backers to existing stats):

┌─────────┬─────────┬─────────┬─────────┐
│  Goal   │ Pledged │ Backers │Days Left│
│  $10K   │  $8.5K  │  1,234  │   12    │
└─────────┴─────────┴─────────┴─────────┘

C. Funding Trend Chart (below stats):

24-Hour Momentum
----------------
💰 +$1,234 (+15%)  [Sparkline Chart]
  • Green sparkline if trending up
  • Orange if slowing down
  • Chart from /api/campaigns/:pid/history
  • Show last 7-14 days

D. State Badge (if not live):

  • Green pill: "Successfully funded 🎉"
  • Red pill: "Campaign failed"
  • Gray pill: "Canceled"

3. Implementation Plan

Step 1: Update Models (if needed)

  • Add missing fields to CampaignDTO
  • Verify API client maps all fields

Step 2: List View

  • Add backers count row
  • Add state badge for non-live campaigns
  • Adjust layout spacing

Step 3: Detail View - Stats

  • Add backers to stats grid (4-column layout)
  • Add blurb section with "Read more" expansion

Step 4: Detail View - Trend Chart

  • Create TrendChartView component
  • Fetch history from /api/campaigns/:pid/history
  • Use Swift Charts for sparkline
  • Show 24h delta + velocity

Step 5: Polish

  • Conditional rendering (hide sections if data missing)
  • Loading states for history API call
  • Error handling

Success Metrics

  • ✅ All backend data fields displayed
  • ✅ Sparkline chart working
  • ✅ No performance regression
  • ✅ Graceful handling of missing data

Design Notes

  • Keep existing visual style (fonts, colors, spacing)
  • Progressive disclosure (expandable blurb)
  • Non-blocking history fetch (show stats immediately, chart loads after)
  • Cache history data (5-min TTL like current APIClient cache)

Related

Files to Modify

  • ios/KickWatch/Sources/Views/CampaignRowView.swift - Add backers, state
  • ios/KickWatch/Sources/Views/CampaignDetailView.swift - Add blurb, trend chart
  • ios/KickWatch/Sources/Models/CampaignDTO.swift - Verify all fields mapped
  • ios/KickWatch/Sources/Services/APIClient.swift - Add history fetch if missing
  • ios/KickWatch/Sources/Views/SparklineView.swift - Reuse existing component

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions