Skip to content
Webkom Docs

Web Applikasjon

Web applikasjonen er echo’s hovednettside som kjører på echo.uib.no. Den er bygget med Next.js 15 og React 19, og fungerer som det primære grensesnittet for studenter og besøkende.

Teknologi

Section titled “Teknologi”

Core Stack

Section titled “Core Stack”
  • Next.js 15 med App Router
  • React 19 med server components og concurrent features
  • TypeScript for type safety
  • Tailwind CSS for styling

UI Komponenter

Section titled “UI Komponenter”
  • Radix UI for accessible UI primitives
  • Lucide React for ikoner
  • React Hook Form for form handling
  • Motion (Framer Motion) for animasjoner

Data fetching

Section titled “Data fetching”
  • Server Actions for mutations
  • Sanity Client for CMS data
  • Drizzle ORM for database queries

Struktur

Section titled “Struktur”
apps/web/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (default)/         # Hovedlayout
│   │   │   ├── hjem/          # Forsiden
│   │   │   ├── for-studenter/ # Studentinnhold
│   │   │   ├── admin/         # Adminpanel
│   │   │   └── auth/          # Autentisering
│   │   └── api/               # API routes
│   ├── components/            # React komponenter
│   │   ├── ui/               # Gjenbrukbare UI komponenter
│   │   └── ...               # Feature-spesifikke komponenter
│   ├── lib/                  # Utilities og helpers
│   ├── actions/              # Server actions
│   ├── data/                 # Data fetching functions
│   └── styles/               # Global styling
├── public/                   # Statiske filer
└── tailwind.config.ts       # Tailwind konfigurasjon

Hovedfunksjoner

Section titled “Hovedfunksjoner”

Forsiden (/hjem)

Section titled “Forsiden (/hjem)”
  • Arrangementer - Kommende bedpres og sosiale arrangementer
  • Innlegg - Nyheter og oppdateringer fra echo
  • Bursdag banner - Feirer medlemmers bursdager
  • Hyggkom liste - Shopping list fra hyggekomiteen

For studenter (/for-studenter)

Section titled “For studenter (/for-studenter)”
  • Arrangementer - Browse og meld deg på arrangementer
  • Innlegg - Les nyheter og oppdateringer
  • Stillingsannonser - Jobb- og internshipmuligheter
  • Studentgrupper - Oversikt over echo’s undergrupper
  • Møtereferater - Referater fra styremøter

Autentisering (/auth)

Section titled “Autentisering (/auth)”
  • Feide innlogging - Integrasjon med UiB’s autentiseringssystem
  • Profil - Brukerprofilstyring
  • Tilgangsforespørsler - Søk om tilgang til arrangementer

Admin (/admin)

Section titled “Admin (/admin)”
  • Brukerstyring - Administrer medlemmer og rettigheter
  • Arrangementsstyring - Opprett og administrer arrangementer
  • Tilbakemeldinger - Se og behandle tilbakemeldinger
  • Whitelist - Administrer tilgangsforespørsler

Styling og tema

Section titled “Styling og tema”

Design System

Section titled “Design System”

Vi har ikke utviklet et særlig design system, men det er bygget på fargene du finner globals.css med Shadcn UI-komponenter. Du kan også sjekke ut siden (/typography)[http://localhost/typography] for å se hvordan de forskjellige komponentene ser ut.

Komponenter

Section titled “Komponenter”
Terminal window
# UI komponenter i /components/ui/
- Button, Card, Dialog
- Form, Input, Select
- Table, Tabs, Toast
- Avatar, Badge, Calendar

Autentisering og autorisasjon

Section titled “Autentisering og autorisasjon”

Feide integrasjon

Section titled “Feide integrasjon”
  • Arctic for OAuth2 flow
  • JOSE for JWT token handling
  • Automatisk medlemssjekk mot Feide sin “gruppe-API”

Tilgangskontroll

Section titled “Tilgangskontroll”
  • Student verification - Sjekk om bruker er UiB student
  • Medlemsskap - Verifiser at de tar studie som echo dekker
  • Admin rettigheter - Rolle-basert tilgang
  • Whitelist system - Manuell godkjenning for arrangementer

Data og state management

Section titled “Data og state management”

Server State

Section titled “Server State”
  • Server Actions for mutations (registreringer, comments)
  • Server Components for initial data loading
  • Database queries via Drizzle ORM

Client State

Section titled “Client State”
  • TanStack Query for caching og refetching
  • React Context for global state
  • Local storage for brukerpreferanser

Forms

Section titled “Forms”
  • React Hook Form med Zod validation
  • Server-side validation i Server Actions
  • Optimistic updates for bedre UX

Testing

Section titled “Testing”

Unit tests

Section titled “Unit tests”
Terminal window
# Kjør unit tests
pnpm test:unit


# Med coverage
pnpm test:unit --coverage

E2E tests

Section titled “E2E tests”
  • Playwright for end-to-end testing
  • Test database med isolerte tester
  • Automatisk CI/CD testing

Deployment

Section titled “Deployment”

Vercel deployment

Section titled “Vercel deployment”
  • Automatisk deployment ved push til main
  • Preview deployments for pull requests
  • Environment variabler konfigurert i Vercel dashboard

Performance

Section titled “Performance”
  • Next.js optimizations - Image optimization, code splitting
  • Caching - ISR (Incremental Static Regeneration)

Vanlige oppgaver

Section titled “Vanlige oppgaver”

Legge til ny side

Section titled “Legge til ny side”
// 1. Opprett side i app/(default)/ny-side/page.tsx
export default function NySide() {
  return <div>Ny side innhold</div>;
}


// 2. Legg til i navigasjon hvis nødvendig
// 3. Oppdater sitemap.ts

Opprette ny komponent

Section titled “Opprette ny komponent”
components/ny-komponent.tsx
type NyKomponentProps = {
  // Props her
};


export const NyKomponent = ({ }: NyKomponentProps) => {
  return (
    <div className="p-4">
      {/* Komponent innhold */}
    </div>
  );
};

Server Action

Section titled “Server Action”
actions/ny-action.ts
"use server";


import { db } from "@echo-webkom/db";


import { auth } from "@/auth/server";


export async function nyAction() {
  const session = await auth();


  if (!session?.user) {
    throw new Error("Unauthorized");
  }


  // Database operasjoner her
}

Kilder

Section titled “Kilder”

Next.js og React

Section titled “Next.js og React”

Styling og UI

Section titled “Styling og UI”

Autentisering

Section titled “Autentisering”