Skip to content

Arkitektur og Struktur

Prosjektet følger en standard React-struktur organisert etter funksjonalitet.

Mappestruktur

src/
├── components/     # Gjenbrukbare UI-komponenter
├── context/        # React Context (f.eks. Autentisering)
├── pages/          # Hovedsider (Views)
├── services/       # API-kall og database-logikk
├── utils/          # Hjelpefunksjoner og verktøy
├── styles/         # Globale stiler
├── App.jsx         # Hovedkomponent og ruting
├── main.jsx        # Inngangspunkt
└── firebase.js     # Firebase-initialisering

Nøkkelkonsepter

1. Autentisering

Vi bruker Firebase Authentication for å håndtere brukere. AuthContext.jsx tilbyr en useAuth-hook som gir tilgang til currentUser og funksjoner som login, signup, og logout i hele applikasjonen.

2. Database (Firestore)

All data lagres i Cloud Firestore. Vi har en dedikert service-fil (src/services/firestoreService.js) som abstraherer bort direkte databasekall. Dette gjør det enklere å vedlikeholde og teste koden.

3. Ruting

Vi bruker React Router (react-router-dom) for navigasjon. Rutingen er definert i App.jsx, og Layout.jsx brukes for å gi en konsistent struktur (header/footer) på tvers av sidene.

4. Real-time Data

Applikasjonen utnytter Firestores real-time funksjonalitet. Komponenter kan abonnere på dataendringer (f.eks. nye oppdrag) og oppdatere UI-et umiddelbart uten at brukeren trenger å oppdatere siden.

Datamodeller

Users

  • uid: Unik ID (fra Auth)
  • email: E-post
  • role: 'company', 'club', eller 'member'
  • displayName: Visningsnavn

Companies

  • id: Unik ID
  • name: Bedriftsnavn
  • industry: Bransje
  • stats: Statistikk (totalSpent, missionsPosted, etc.)

Clubs

  • id: Unik ID
  • name: Klubbnavn
  • category: Kategori (f.eks. Idrettslag)
  • stats: Statistikk (totalEarned, completedMissions, etc.)

Missions

  • id: Unik ID
  • title: Tittel
  • description: Beskrivelse
  • amount: Beløp
  • status: 'open', 'assigned', 'completed'
  • companyId: Referanse til bedrift