Skip to content

Phase 3: Mission Board Implementation Plan

Overview

The Mission Board is the core marketplace of Sponsor-Dugnad - where companies post work opportunities and clubs discover missions to earn money. This is where the "Vi jobber" message comes to life.

UX Philosophy

The "Tinder for Work" Approach

Instead of boring job listings, we're creating an engaging discovery experience: * 📱 Swipeable Cards: Modern, mobile-first card interface * ⚡ Quick Actions: Swipe right to save, left to skip, tap for details * 🎯 Smart Filtering: Location, date, amount filters * 💚 Visual First: Company logo, photos, key stats at a glance

Component Architecture

1. Mission Board (src/pages/MissionBoard.jsx)

Route: /dugnadsborsen (already exists, currently shows Dashboard)

Layout: 

┌─────────────────────────────────┐
│   Filters: [Location] [Date]   │
├─────────────────────────────────┤
│                                 │
│   ┌───────────────────────┐    │
│   │  MISSION CARD         │    │
│   │  [Company Logo]       │    │
│   │  "Varetelling"        │    │
│   │  Rema 1000 - Oslo     │    │
│   │  12,000 kr            │    │
│   │  📅 5. des            │    │
│   └───────────────────────┘    │
│                                 │
│   [❌ Skip]  [📌 Save]  [✅ Apply]│
└─────────────────────────────────┘

Key Features: * Card stack with top card in focus * Swipe gestures (mobile & desktop drag) * Quick action buttons below card * Filter bar at top * Empty state when no missions

2. Mission Detail Modal

Triggered by: Tapping the card

Content: * Full mission description * Company background * Requirements (team size, age, etc.) * Location map preview * Apply button with form

Mission Data Schema (Firestore)

{
  id: "mission_001",
  companyId: "rema_oslo",
  companyName: "Rema 1000",
  companyLogo: "🛒",

  title: "Varetelling og rydding",
  description: "Trenger 4-6 ungdommer til å hjelpe med varetelling...",

  compensation: 12000,  // NOK
  location: {
    city: "Oslo",
    address: "Storgata 12",
    coordinates: [59.9139, 10.7522]
  },

  date: "2024-12-05",
  duration: "4 timer",
  teamSize: "4-6 personer",

  requirements: {
    minAge: 15,
    description: "Pålitelige, punktlige"
  },

  status: "open" | "filled" | "completed",
  applicants: [],
  createdAt: timestamp
}

Visual Design

Card Design (Nano Banan Style)

┌─────────────────────────────┐
│  [Logo]    REMA 1000       │ ← Company header
├─────────────────────────────┤
│                             │
│  📦 Varetelling og rydding │ ← Mission title (big, bold)
│                             │
│  💰 12,000 kr              │ ← Amount (neon green)
│  📍 Oslo, Storgata         │
│  📅 Fredag 5. desember     │
│  👥 Trenger 4-6 personer   │
│  ⏱️  4 timer               │
│                             │
└─────────────────────────────┘

Styling: * Dark background (#111) * Neon green accents for compensation * Glassmorphism card effect * Drop shadow with subtle glow * Smooth animations on swipe

User Interactions

Swipe/Click Actions

Action Desktop Mobile Result
Skip Click ❌ Swipe Left Next card
Save Click 📌 Swipe Right slightly Bookmark mission
Apply Click ✅ Swipe Right fully Open apply modal
Details Click card Tap card Open mission detail modal

Apply Flow

  1. User clicks Apply
  2. Modal opens with:
  3. Mission summary
  4. Simple form: Team name, contact, message
  5. Submit button
  6. On submit:
  7. Create application in Firestore
  8. Send notification to company
  9. Show success message
  10. Next card appears

Mock Data (Phase 1)

Initially use 5-10 mock missions to demonstrate UI:

const mockMissions = [
  {
    id: 1,
    company: "Rema 1000",
    logo: "🛒",
    title: "Varetelling og rydding",
    amount: 12000,
    location: "Oslo",
    date: "5. desember",
    teamSize: "4-6",
    duration: "4 timer"
  },
  {
    id: 2,
    company: "Kiwi",
    logo: "🥝",
    title: "Hjelp med Black Friday",
    amount: 15000,
    location: "Bergen",
    date: "29. november",
    teamSize: "6-8",
    duration: "6 timer"
  },
  // ... more missions
];

Files to Create/Modify

NEW Files

  • src/pages/MissionBoard.jsx - Main marketplace UI
  • src/components/MissionCard.jsx - Individual card component
  • src/components/MissionDetailModal.jsx - Detailed view modal

MODIFY Files

  • src/App.jsx - Already has /dugnadsborsen route, just replace Dashboard with MissionBoard
  • src/components/Layout.jsx - Navigation already points to /dugnadsborsen

Implementation Priority

Phase 3a: Basic UI (This Sprint)

  • [x] Plan architecture
  • [ ] Create MissionCard component
  • [ ] Create MissionBoard with card stack
  • [ ] Add basic click interactions (no swipe yet)
  • [ ] Replace Dashboard on /dugnadsborsen route

Phase 3b: Interactions (Next)

  • [ ] Add swipe gesture library
  • [ ] Implement Apply modal
  • [ ] Add bookmark functionality
  • [ ] Create filters (location, date)

Phase 3c: Firestore Integration

  • [ ] Connect to real mission data
  • [ ] Implement application submissions
  • [ ] Add company-posted missions

Success Criteria

  • ✅ Card-based UI renders correctly
  • ✅ Users can browse through missions
  • ✅ Apply action triggers modal
  • ✅ UI matches "Nano Banan" aesthetic
  • ✅ Mobile-responsive card layout