Notebook

  ┌─────────────────┐        ┌───────────────────┐        ┌───────────────────┐
  │ 1. ONBOARDING   │        │ 2. DISCOVERY      │        │ 3. INTERACTION    │
  │ • Quick Auth    │───────▶│ • Choose Hub      │───────▶│ • React (Upvote)  │
  │ • Student ID    │        │ • Search & Filter │        │ • Thread Comment  │
  │ • Dept Tagging  │        │ • Read Notices    │        │ • Save / Bookmark │
  └─────────────────┘        └───────────────────┘        └───────────────────┘
                                                                    │
  ┌─────────────────┐       ┌─────────────────┐                    │
  │ 5. RECONNECTION │       │ 4. OFFLINE MODE │                     │
  │ • Sync Updates  │◀──────│ • Cached Posts  │◀────────────────────┘
  │ • Status Toast  │       │ • Local Storage │
  │ • Realtime Pull │       │ • Bottom Alert  │
  └─────────────────┘       └─────────────────┘

                      ┌──────────────────────────────────────────────┐
                      │              STUDENT CLIENT                  │
                      │  PWA (Android / iOS / Windows / macOS / Web) │
                      └──────────────────────┬───────────────────────┘
                                             │
                       ┌─────────────────────┴─────────────────────┐
                       │                                           │
                       ▼                                           ▼
          ┌─────────────────────────┐                 ┌─────────────────────────┐
          │  SERVICE WORKER (sw.js) │                 │ MODULAR JAVASCRIPT CORE │
          │  • Cache-First Assets   │                 │ • Feed & Comments Engine│
          │  • Offline Interceptor  │                 │ • Auth & Session Mgr    │
          │  • Network State Bridge │                 │ • Reactions & Bookmarks │
          └────────────┬────────────┘                 └────────────┬────────────┘
                       │ (Cache Hit / Fallback)                    │ (REST / WebSockets)
                       ▼                                           ▼
          ┌─────────────────────────┐                 ┌─────────────────────────┐
          │   BROWSER STORAGE       │                 │     SUPABASE CLOUD      │
          │   • CacheStorage API    │                 │   • GoTrue Auth (JWT)   │
          │   • LocalStorage Vault  │                 │   • PostgreSQL 15 (RLS) │
          │   • Session Storage     │                 │   • Realtime Channels   │
          └─────────────────────────┘                 └─────────────────────────┘

  ┌─────────────────────────────────┐               ┌─────────────────────────────────┐
  │            PROFILES             │ 1           * │              POSTS              │
  ├─────────────────────────────────┼───────────────┼─────────────────────────────────┤
  │ id          : UUID (PK)         │               │ id          : UUID / TEXT (PK)  │
  │ name        : TEXT              │               │ author_id   : UUID (FK->profiles│
  │ student_id  : TEXT              │               │ author_name : TEXT              │
  │ department  : TEXT              │               │ author_avatar:TEXT              │
  │ year        : TEXT              │               │ category    : TEXT (Enum check) │
  │ avatar_url  : TEXT              │               │ title       : TEXT              │
  │ created_at  : TIMESTAMPTZ       │               │ content     : TEXT              │
  │ updated_at  : TIMESTAMPTZ       │               │ image_url   : TEXT (Base64/URL) │
  └────────────────┬────────────────┘               │ likes       : INTEGER           │
                   │                                │ reactions   : JSONB             │
                   │ 1                              │ created_at  : TIMESTAMPTZ       │
                   │                                └──────────────┬──────────────────┘
                   │ *                                             │ 1
                   │                                               │ *
  ┌────────────────▼────────────────┐               ┌──────────────▼──────────────────┐
  │             REPORTS             │               │            COMMENTS             │
  ├─────────────────────────────────┤               ├─────────────────────────────────┤
  │ id          : UUID (PK)         │               │ id          : UUID / TEXT (PK)  │
  │ reporter_id : UUID              │               │ post_id     : UUID (FK->posts)  │
  │ target_id   : TEXT              │               │ user_id     : UUID (FK->profiles│
  │ category    : TEXT              │               │ user_name   : TEXT              │
  │ details     : TEXT              │               │ user_avatar : TEXT              │
  │ status      : TEXT ('pending')  │               │ text        : TEXT              │
  │ created_at  : TIMESTAMPTZ       │               │ created_at  : TIMESTAMPTZ       │
  └─────────────────────────────────┘               └─────────────────────────────────┘

-- Enable UUID generation extension
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

-- 1. Profiles Table
CREATE TABLE public.profiles (
    id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
    name TEXT NOT NULL,
    student_id TEXT,
    department TEXT,
    year TEXT,
    avatar_url TEXT,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- 2. Posts Table with Category Constraint
CREATE TABLE public.posts (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    author_id UUID REFERENCES public.profiles(id) ON DELETE SET NULL,
    author_name TEXT NOT NULL,
    author_avatar TEXT,
    category TEXT NOT NULL CHECK (category IN ('home', 'academic', 'transport', 'logistics', 'health')),
    title TEXT,
    content TEXT NOT NULL,
    image_url TEXT,
    likes INTEGER DEFAULT 0,
    reactions JSONB DEFAULT '{"upvote": 0, "heart": 0, "helpful": 0}'::jsonb,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- 3. Comments Table
CREATE TABLE public.comments (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    post_id UUID REFERENCES public.posts(id) ON DELETE CASCADE,
    user_id UUID REFERENCES public.profiles(id) ON DELETE SET NULL,
    user_name TEXT NOT NULL,
    user_avatar TEXT,
    text TEXT NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- 4. Reports Table for Campus Safety Desk
CREATE TABLE public.reports (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    reporter_id UUID REFERENCES auth.users(id) ON DELETE SET NULL,
    target_id TEXT NOT NULL,
    category TEXT NOT NULL,
    details TEXT NOT NULL,
    status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'reviewed', 'resolved')),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- Indexes for Sub-Second Query Execution
CREATE INDEX idx_posts_category ON public.posts(category);
CREATE INDEX idx_posts_created_at ON public.posts(created_at DESC);
CREATE INDEX idx_comments_post_id ON public.comments(post_id);

-- Enable Row-Level Security (RLS)
ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.posts ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.comments ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.reports ENABLE ROW LEVEL SECURITY;

-- RLS Policy: Public read for campus posts
CREATE POLICY "Public profiles can read posts" ON public.posts
    FOR SELECT USING (true);

-- RLS Policy: Authenticated users can insert posts
CREATE POLICY "Authenticated users can create posts" ON public.posts
    FOR INSERT WITH CHECK (auth.role() = 'authenticated');

-- RLS Policy: Users can only update/delete their own posts
CREATE POLICY "Authors can update own posts" ON public.posts
    FOR UPDATE USING (auth.uid() = author_id);

CREATE POLICY "Authors can delete own posts" ON public.posts
    FOR DELETE USING (auth.uid() = author_id);

├── /css
│   ├── /base
│   │   ├── reset.css          # Modern box-sizing & clean baseline styles
│   │   ├── typography.css     # Display & body font pairings with mathematical scaling
│   │   └── animations.css     # Smooth micro-interactions & entry keyframes
│   ├── /components
│   │   ├── auth-modal.css     # Tabbed Login, Signup & Forgot Password overlay
│   │   ├── create-post.css    # Rich post creation modal with image preview
│   │   ├── cards.css          # Modular quick-action cards for each campus hub
│   │   ├── feed.css           # Clean feed cards, reaction pills & comments
│   │   └── pwa.css            # Bottom offline alert & install banner styles
│   ├── /layout
│   │   ├── navbar.css         # Sticky desktop & mobile top navigation bar
│   │   ├── sidebar.css        # Adaptive left navigation panel
│   │   └── main-layout.css    # Responsive container grids & breakpoints
│   └── /pages
│       ├── friends.css        # Classmate discovery & campus network styling
│       ├── profile.css        # Student profile header, badges & activity
│       ├── saved.css          # Private bookmarking vault view
│       ├── support.css        # Emergency helpline directory
│       ├── report.css         # Campus safety & moderation desk
│       └── settings.css       # Preference controls & theme toggles
│
├── /js
│   ├── /config
│   │   └── supabase.js        # Supabase client singleton & environment configuration
│   ├── /modules
│   │   ├── auth.js            # User session, login, signup, and password recovery
│   │   ├── feed.js            # Post rendering, category switching & search filtering
│   │   ├── post-interactions.js # Upvote, Heart, Helpful reaction engine & bookmarks
│   │   ├── comments.js        # Threaded discussion fetching & publishing
│   │   ├── navigation.js      # SPA route manager & active module state
│   │   ├── pwa.js             # Online/offline network monitor & install prompt
│   │   └── realtime.js        # Supabase Realtime broadcast listener
│   ├── /pages
│   │   ├── profile.js         # Profile page data binding & edit handler
│   │   ├── saved.js           # Bookmarks storage retrieval & render engine
│   │   ├── support.js         # Emergency contact shortcuts & FAQs
│   │   └── report.js          # Moderation ticket generator
│   └── main.js                # App bootstrap, DOM bindings & global event orchestration
│
├── /sw.js                     # Offline Service Worker cache engine
├── manifest.json              # Web App Manifest specification
└── index.html                 # Semantic HTML5 root entry point

   HTTP Fetch Request
          │
          ▼
   ┌──────────────┐   Cache Hit
   │ ServiceWorker│──────────────▶ Return Cached Static Asset (<10ms)
   └──────┬───────┘
          │ Cache Miss
          ▼
   ┌──────────────┐   Online
   │ Network Fetch│──────────────▶ Return Fresh Data & Update Cache
   └──────┬───────┘
          │ Offline / Failed
          ▼
   ┌──────────────┐
   │ Offline Mode │──────────────▶ Trigger Bottom Alert & Return Cached Feed State
   └──────────────┘

<div id="pwa-offline-banner" class="pwa-offline-banner visible">
  <span class="pwa-status-dot"></span>
  You are currently offline. Showing cached campus content.
</div>

# Execute static type checking and linting
npm run lint

# Production compilation and minification
npm run build

# Launch local preview server
npm run preview