Skip to content

Sponsor-Dugnad Firebase Deployment Plan

Current Situation

The Sponsor-Dugnader application is built and working but currently deployed to the wrong Firebase project (golfteam-time-eur). This application needs its own dedicated Firebase project and hosting URL.

Current State

  • Application: React + Vite-based "Sponsor-Dugnad" platform
  • Location: c:\Users\owest\Dev\GOLFTEAMTIME-V2\Sponsor-Dugnader
  • Current Firebase Project: golfteam-time-eur (incorrect)
  • Firebase Config: Located at c:\Users\owest\Dev\GOLFTEAMTIME-V2\firebase.json
  • Build Output: Sponsor-Dugnader/dist

Application Overview

The Sponsor-Dugnad app is a marketplace platform that connects businesses with volunteer organizations: - Home Page: Marketing landing with hero section and value propositions - Login System: Role-based authentication (Clubs/Organizations vs. Businesses) - Dashboard: Mission marketplace with search, filters, and map view placeholder - Additional Routes: Profile, Post Mission, My Missions (placeholders)

Goal

Deploy the Sponsor-Dugnader application to its own Firebase project with its own unique hosting URL.

Proposed Changes

1. Firebase Project Setup

Create New Firebase Project

  • Project ID: sponsor-dugnad (or user's preference)
  • Display Name: "Sponsor-Dugnad"
  • Location: Same region as other projects (EUR)

2. Project Configuration

[NEW] firebase.json (in Sponsor-Dugnader directory)

Create a dedicated Firebase configuration file inside the Sponsor-Dugnader directory: 

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

[NEW] .firebaserc (in Sponsor-Dugnader directory)

Create Firebase project alias configuration: 

{
  "projects": {
    "default": "sponsor-dugnad"
  }
}

3. Deployment Process

The deployment will follow these steps:

  1. Navigate to project directory
  2. Initialize Firebase (if needed)
  3. Build the application with npm run build
  4. Deploy to Firebase Hosting with firebase deploy
  5. Verify deployment by visiting the hosting URL

Next Steps After Deployment

Once the application is successfully deployed to its own Firebase project, the following features need implementation:

Phase 1: Backend Infrastructure (COMPLETED)

  • [x] Firebase Authentication: Replace mock login with real Firebase Auth
  • [x] Firestore Database: Set up collections for users, missions, etc.
  • [x] Security Rules: Implement proper Firestore security rules

Phase 2: Core Features (PARTIALLY COMPLETED)

  • [x] Real Mission Listing: Replace mock data with Firestore queries (Dashboards connected)
  • [ ] Mission Detail View: Full mission information page
  • [ ] Mission Creation: Form for businesses to post new missions
  • [ ] Application System: Allow clubs to apply for missions
  • [x] User Profiles: Complete profile management for both user types

Phase 3: Advanced Features

  • Map Integration: Implement Leaflet/Google Maps for geographic mission discovery
  • Search & Filtering: Advanced search with location, date, price filters
  • Messaging System: In-app communication between businesses and clubs
  • Payment Integration: Handle transactions securely
  • Notifications: Email/push notifications for new missions, applications, etc.

Phase 4: Polish & Optimization

  • Mobile Responsiveness: Ensure excellent mobile experience
  • SEO Optimization: Meta tags, sitemaps, etc.
  • Performance: Code splitting, lazy loading, image optimization
  • Analytics: Track user behavior and conversions

Questions for User

[!IMPORTANT] Firebase Project Name

What would you like to name the new Firebase project? - Suggested: sponsor-dugnad - Alternative: sponsor-dugnad-prod, sponsordugnad, etc.

[!IMPORTANT] Hosting URL Preference

Firebase will provide a default URL like sponsor-dugnad.web.app or sponsor-dugnad.firebaseapp.com. Do you plan to connect a custom domain later?

Verification Plan

Post-Deployment Verification

  1. Build Success: Confirm Vite build completes without errors
  2. Deployment Success: Verify Firebase deployment completes successfully
  3. URL Access: Visit the Firebase hosting URL and confirm app loads
  4. Navigation: Test all routes (Home → Login → Dashboard)
  5. Visual Check: Confirm styling and layout render correctly
  6. Mock Functionality: Verify mock login and dashboard features work

Success Criteria

  • ✅ Application builds successfully
  • ✅ Deploys to new Firebase project (not golfteam-time-eur)
  • ✅ Accessible via unique Firebase hosting URL
  • ✅ All pages render correctly
  • ✅ Navigation and routing work
  • ✅ Mock login flow functions properly