BISO Sites
Web App

Web App Overview

Complete guide to the BISO Sites public-facing web application, including features, architecture, and key concepts.

Web App Overview

The BISO Sites Web App is the public-facing website that serves as the primary interface for students, members, and visitors. Built with Next.js 15 and the App Router, it provides a comprehensive platform for membership management, event registration, e-commerce, and organizational information.

Who uses this app?

  • Students & visitors – browse events, register for membership, read news, and shop merchandise.
  • Content team – reviews public pages to ensure scheduling, translations, and assets look correct.
  • Developers – implement new features, server actions, and integrations that power the public site.
ℹ️

If you are an IT manager or editor, skim the Feature Map below and jump to the specific how-to guides. Developers should bookmark the quick navigation links for routing, components, and server actions.

Quick navigation

  • Routing – URL map, dynamic segments, and localization.
  • Components – UI composition and reusable patterns.
  • Server Actions – mutations, validation, and revalidation.
  • API Routes – webhooks and integrations.
  • Feature Guides – deep dives into Membership, Events, E-commerce, and Units.

Feature map

FeatureAudienceLearn more
Membership onboardingStudents & adminsMembership feature
Events discovery & signupPublic visitorsEvents feature
E-commerce storefrontShoppersE-commerce feature
Units & DepartmentsAlumni, partnersUnits feature

Purpose & Features

The Web App serves multiple purposes:

  1. Public Information Hub - About pages, policies, contact information
  2. Membership Platform - Member registration and management
  3. Event Management - Event listings, registrations, and attendance
  4. E-commerce - Product catalog, shopping cart, checkout with Vipps
  5. Department Showcase - Units/departments with teams, products, and news
  6. Job Board - Job postings and application submissions
  7. News & Press - Latest updates and press releases

Technology Stack

Key Technologies

  • Next.js 15 - React framework with App Router
  • React 19 - UI library with Server Components
  • TypeScript - Type-safe development
  • Tailwind CSS - Utility-first CSS framework
  • next-intl - Internationalization (English and Norwegian)
  • Appwrite - Backend-as-a-Service (database, auth, storage)
  • Vipps MobilePay - Norwegian payment gateway
  • Zod - Schema validation
  • React Hook Form - Form management

Dependencies & integrations

  • @repo/api – Appwrite clients used in server components, server actions, and API routes.
  • @repo/payment – Vipps MobilePay flows for checkout and recurring payments.
  • @repo/ui – shared UI primitives, form controls, and data visualizations.
  • @repo/editor – dynamic content pulled from the Puck-powered admin builder.
  • Operations → Vipps/Appwrite – environment variables, credentials, and deployment guidance for external services.

Architecture

Directory Structure

📁apps/web/src/
📁app/
📁(public)/
📄page.tsx
📁about/
📄page.tsx
📁(protected)/
📁profile/
📄page.tsx
📁fs/
📄page.tsx
📁(auth)/
📁auth/
📁login/
📄page.tsx
📁callback/
📄page.tsx
📁actions/
📄page.tsx
📁api/
📄page.tsx

Route Organization

The app uses route groups to organize pages by access level:

  • (public) - Publicly accessible pages
  • (protected) - Requires authentication
  • (auth) - Authentication flows
ℹ️
Route Groups

Route groups in Next.js (folders with parentheses) don't affect the URL structure but help organize code. For example, app/(public)/about/page.tsx results in the /about URL.

Internationalization (i18n)

The web app supports English and Norwegian using next-intl:

// Message files structure
apps/web/messages/
├── en/               # English translations
│   ├── common.json
│   ├── home.json
│   ├── about.json
│   └── ...
└── no/               # Norwegian translations
    ├── common.json
    ├── home.json
    ├── about.json
    └── ...

URLs are prefixed with locale:

  • /en - English
  • /no - Norwegian (default)

Example: /no/about and /en/about serve the same page in different languages.

Data Flow

Data Fetching Patterns

  1. Server Components - Fetch data directly in components
  2. Server Actions - Handle form submissions and mutations
  3. API Routes - External integrations (webhooks, payments)
  4. Client Components - Interactive UI with state
⚠️
Server vs Client

By default, components in the App Router are Server Components. Use "use client" directive only when you need interactivity (state, events, browser APIs).

Key Features at a Glance

Homepage

Dynamic homepage with:

  • Hero section
  • Featured events
  • Latest news
  • Department highlights
  • Quick links

Membership System

  • Member registration with form validation
  • Membership benefits overview
  • Integration with payment system
  • Member dashboard (protected)

Events

  • Event listings with filters
  • Event detail pages with registration
  • Calendar integration
  • Attendance tracking

E-commerce

  • Product catalog by department
  • Shopping cart with reservations
  • Vipps checkout integration
  • Order tracking
  • Product variations and custom fields

Units/Departments

  • Department directory with filtering
  • Individual department pages with:
    • Team members
    • Products
    • News updates
    • Social links
    • Custom content

About Section

  • History
  • Organizational structure
  • Bylaws and policies
  • Contact information
  • Academic contacts

Authentication

ℹ️
Authentication

Authentication is handled by Appwrite with support for email/password and OAuth providers.

Three authentication states:

  1. Anonymous - Unauthenticated visitors (read-only access)
  2. Authenticated Member - Logged-in users (profile, expenses, protected content)
  3. Admin - Redirected to admin app for management tasks

Environment Variables

Required environment variables for the web app:

# Appwrite Configuration
NEXT_PUBLIC_APPWRITE_PROJECT_ID=your_project_id
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
APPWRITE_API_KEY=your_api_key

# Vipps Payment
VIPPS_CLIENT_ID=your_client_id
VIPPS_CLIENT_SECRET=your_client_secret
VIPPS_SUBSCRIPTION_KEY=your_subscription_key
VIPPS_MERCHANT_SERIAL_NUMBER=your_merchant_serial

# Application
NEXT_PUBLIC_BASE_URL=http://localhost:3000
📝

Keep the master list of secrets in Operations → Environment Variables. Update both places whenever you add a new integration.

Port Configuration

  • Development: http://localhost:3000
  • Production: Configured via hosting provider

Quick Start

Install Dependencies

cd apps/web
bun install

Configure Environment

Create .env.local with required variables (see Environment Variables section above).

Run Development Server

bun run dev

Visit http://localhost:3000

Build for Production

bun run build
bun run start

Next Steps

Edit on GitHub

Applications Overview

Understand how the web and admin applications fit together and where to start for each role.

Routing and Pages

Complete guide to the routing structure, pages, and navigation in the BISO Sites web app.

On this page

Web App OverviewWho uses this app?Quick navigationFeature mapPurpose & FeaturesTechnology StackKey TechnologiesDependencies & integrationsArchitectureDirectory StructureRoute OrganizationInternationalization (i18n)Data FlowData Fetching PatternsKey Features at a GlanceHomepageMembership SystemEventsE-commerceUnits/DepartmentsAbout SectionAuthenticationEnvironment VariablesPort ConfigurationQuick StartRelated DocumentationNext Steps