Applications Overview

The BISO Sites monorepo contains three Next.js applications, each serving a specific purpose. This document provides an overview of each application's role, features, and technical details.

Application Summary

Web Application

Purpose

The public-facing website that serves content to end users. This is what visitors see when they access your site.

Key Features

🌐 Internationalization

• Multi-language support (English, Norwegian)
• Automatic locale detection
• SEO-friendly localized URLs (/en/about, /no/om)

📱 Responsive Design

• Mobile-first approach
• Optimized for all screen sizes
• Touch-friendly interfaces

⚡ Performance Optimized

• Server Components for fast initial load
• Image optimization with next/image
• Static generation where possible
• Efficient data fetching

💳 Payment Integration

• Vipps checkout flow
• Order management
• Payment status tracking

🎨 Dynamic Pages

• Puck editor-powered pages
• Render content created in admin
• Flexible page layouts

Technical Stack

// Key dependencies
{
  "next": "^15.2.4",
  "react": "^19.2.0",
  "next-intl": "^4.3.9",
  "@repo/api": "*",
  "@repo/ui": "*",
  "@repo/editor": "*",
  "@repo/payment": "*"
}

Directory Structure

Key Routes

Environment Variables

# Appwrite
NEXT_PUBLIC_APPWRITE_ENDPOINT=
NEXT_PUBLIC_APPWRITE_PROJECT_ID=
APPWRITE_API_KEY=

# Payment
NEXT_PUBLIC_VIPPS_CLIENT_ID=
VIPPS_CLIENT_SECRET=
VIPPS_SUBSCRIPTION_KEY=
VIPPS_TEST_MODE=true

# Optional
NEXT_PUBLIC_GA_ID=

Use Cases

1. Content Consumption - Users read articles, view pages
2. E-commerce - Browse products, make purchases
3. User Interaction - Forms, comments, feedback
4. Membership - Registration, login, profiles

Admin Application

Purpose

Content management system (CMS) where administrators and content creators manage all website content.

Key Features

📝 Content Management

• Create and edit pages
• Manage posts and articles
• Media library management

🎨 Visual Page Builder

• Puck editor integration
• Drag-and-drop page creation
• Real-time preview
• Component-based editing

👥 User Management

• Create and manage users
• Role-based access control
• Permission management

🔐 Authentication

• Secure login system
• Session management
• Protected routes

🤖 AI-Powered Features

• Content assistance
• Auto-generation capabilities
• Smart suggestions

📊 Analytics Dashboard

• Content statistics
• User activity
• System health

Technical Stack

// Key dependencies
{
  "next": "^15.2.4",
  "react": "^19.2.0",
  "next-intl": "^4.3.9",
  "@repo/api": "*",
  "@repo/ui": "*",
  "@repo/editor": "*",
  "@repo/payment": "*",
  "@ai-sdk/openai": "^2.0.30"
}

Directory Structure

Key Routes

Authentication Flow

// Middleware protection
export async function middleware(request: NextRequest) {
  // Check session
  const { account } = await createSessionClient();
  
  // Redirect to login if not authenticated
  if (!account) {
    return NextResponse.redirect('/login');
  }
  
  // Check permissions
  const hasPermission = await checkPermissions(account);
  if (!hasPermission) {
    return NextResponse.redirect('/unauthorized');
  }
  
  return NextResponse.next();
}

User Roles

Environment Variables

# Appwrite
NEXT_PUBLIC_APPWRITE_ENDPOINT=
NEXT_PUBLIC_APPWRITE_PROJECT_ID=
APPWRITE_API_KEY=

# AI Features
OPENAI_API_KEY=

# Admin Config
NEXT_PUBLIC_ADMIN_URL=http://localhost:3001

Use Cases

1. Page Creation - Build pages with visual editor
2. Content Publishing - Create and publish articles
3. User Administration - Manage users and permissions
4. Media Management - Upload and organize assets
5. System Configuration - Configure site settings

Docs Application

Purpose

Developer documentation site (this site!) built with Fumadocs. Provides comprehensive documentation for developers working on the project.

Key Features

📚 MDX-Based Content

• Write docs in Markdown with JSX components
• Code syntax highlighting
• Interactive examples

🔍 Search

• Full-text search
• Keyboard shortcuts
• Fast and accurate

🎨 Custom Components

• Callouts for important information
• Tabs for multiple examples
• Steps for tutorials
• File tree visualization

📱 Responsive Documentation

• Mobile-friendly
• Dark mode support
• Accessible navigation

⚡ Static Generation

• All docs pre-rendered
• Fast page loads
• SEO optimized

Technical Stack

// Key dependencies
{
  "next": "^16.0.0",
  "react": "^19.2.0",
  "fumadocs-core": "^16.0.11",
  "fumadocs-mdx": "^13.0.8",
  "fumadocs-ui": "^16.0.11",
  "@repo/ui": "*"
}

Directory Structure

Custom MDX Components

Available in all documentation:

<Callout type="info" title="Title">
  Important information
</Callout>

<Steps>
  <Step title="First">Content</Step>
  <Step title="Second">Content</Step>
</Steps>

<FileTree>
  <FileTreeItem name="src/" icon="📁">
    <FileTreeItem name="app/" icon="📁" depth={1} />
  </FileTreeItem>
</FileTree>

Creating Documentation

---
title: Page Title
description: Page description for SEO
---

import { Callout } from 'components/callout';

# Page Title

Your content here...

<Callout type="warning">
  Important note
</Callout>

Environment Variables

Docs typically don't need environment variables for local development.

Use Cases

1. Onboarding - Help new developers get started
2. API Reference - Document package APIs
3. Guides - Tutorials and best practices
4. Architecture - System design documentation
5. Troubleshooting - Common issues and solutions

Shared Infrastructure

All three applications share:

Package Dependencies

• @repo/api - Appwrite clients
• @repo/ui - UI components
• @repo/eslint-config - Linting rules
• @repo/typescript-config - TypeScript config

Common Technologies

• Next.js 15+ with App Router
• React 19
• TypeScript 5.9
• Tailwind CSS
• Bun for package management
• Turborepo for build orchestration

Development Scripts

# Start specific app
bun run dev --filter=web
bun run dev --filter=admin
bun run dev --filter=docs

# Build specific app
bun run build --filter=web

# Type check
bun run check-types

# Lint
bun run lint

Application Communication

Direct Database Access

Each app connects directly to Appwrite:

// No inter-app API calls
// Each app queries Appwrite independently

// In web app
const { db } = await createSessionClient();
const posts = await db.listDocuments('posts');

// In admin app (same database)
const { db } = await createAdminClient();
const posts = await db.listDocuments('posts');

Shared Content

Content created in admin is available in web:

1. Admin creates/edits page
2. Saves to Appwrite database
3. Web app queries and displays page
4. No sync needed - same database

Independent Deployments

Each app can be deployed independently:

• Different domains/subdomains
• Different hosting providers
• Different scaling strategies
• Independent versioning

Comparison Table

Next Steps