Play music
Find me
A community
02
Back to Projects
web

A community hub for international students.

Client

ISM

Role

Full Stack Developer

Timeline

Launching Soon

Category

web

View Live Site

PROJECT OVERVIEW

Overview.

ISM is a full-stack aggregation platform built to help international students in Australia find jobs, housing, discounts, and events — all in one place. It combines a content-managed marketing site with 30 pages across 6 layout hierarchies, a multi-category opportunity hub powered by a 9-adapter ingestion engine scraping 590+ listings, an admin dashboard with KPIs, user/listing management, ingestion monitoring, and audit logging, a CMS-powered content layer via Sanity with 5 schema types, and a three-layer security model with rate limiting, email verification, and role-based access control.

THE CHALLENGE

International students in Australia struggled to find relevant jobs, housing, and deals because information was scattered across dozens of platforms. There was no centralized resource tailored to their specific needs — from student-friendly housing to part-time work opportunities — leaving them to manually search across fragmented sources.

Architected and built a full-stack aggregation platform with a 9-adapter multi-source ingestion engine using a plugin-based BaseAdapter pattern, SHA-256 content hashing for deduplication, deep data sanitization, a full admin dashboard with KPI overview, ingestion monitoring, and audit logging, a CMS layer via Sanity v5 with 10 GROQ queries and webhook revalidation, a three-layer security model (middleware, component guards, API-layer auth), and advanced UI engineering with interactive particle canvas, 3D tilt cards, and glassmorphism — all backed by PostgreSQL, Prisma 6, and deployed via Docker on Northflank with GitHub Actions CI/CD.

THE SOLUTION

Gallery.

Complete landing page walkthrough — hero section, platform stats, opportunity hub preview, and marketing pages built with Next.js 16 App Router and Framer Motion.

Video

Animated split-panel authentication with sign up, sign in, and password reset — powered by Auth.js v5 with JWT sessions and bcrypt hashing.

Video

Auth.js v5 authentication flow with email/password sign up, sign in, and animated transitions between auth states.

Video

Smooth accordion FAQ section with Framer Motion animations and Sanity CMS-managed content.

Video

Light mode landing page with 'Join the Movement' hero, platform stats, international student growth chart, and CTA — built with Next.js 16 and Tailwind CSS.

Dark mode landing page with 'Join the Movement' hero, platform stats, international student growth chart, and CTA — built with Next.js 16 and Tailwind CSS.

Multi-category opportunity hub with Jobs, Housing, Discounts, and Events tabs — aggregated from external sources via background workers with content hash deduplication.

Jobs listing page with title, company, salary range, location, and click-through links — aggregated via pluggable source adapters with cron-scheduled ingestion.

Student discounts aggregated from RSS feeds and deal platforms, deduplicated via content hashing — featuring Spotify, GitHub Pro, UberEats, and more.

Blog and resources section with articles on jobs, housing, and visa guides — content managed through embedded Sanity Studio with 5 content schemas.

Contact page with email, social links, and message form — built with React Hook Form and Zod validation, emails sent via Nodemailer + Zoho SMTP.

Animated split-panel sign up page with platform stats, Auth.js v5 registration, and bcrypt password hashing.

TECHNOLOGY

Tech Stack.

1

Frontend

Next.js 16 (App Router)

Core framework with server & client components

React 19

UI library

TypeScript

Type safety

Tailwind CSS v4

PostCSS-first styling & responsive design

Redux Toolkit

Client state management

TanStack React Query

Server state management & caching

shadcn/ui (20+ components)

UI component library (New York style)

Radix UI

Accessible UI primitives

Framer Motion

Animations, 3D tilt, particle canvas, text reveals

React Hook Form + Zod v4

Form management & schema validation

Auth.js v5

Authentication UI (sign up, sign in, JWT sessions)

Lenis

Smooth scrolling

2

Backend

Prisma 6

ORM & database schema management (12 models)

PostgreSQL 16 (Neon)

Primary relational database

Auth.js v5

JWT sessions, bcrypt hashing (12 salt rounds), token management

Resend (AWS SES)

Transactional emails (5 branded HTML templates)

Cheerio

HTML scraping for data ingestion adapters

rss-parser

RSS feed parsing for discount aggregation

Background Workers

9-adapter cron-scheduled data ingestion engine

3

CMS

Sanity CMS v5

Headless CMS for content management

Embedded Sanity Studio

Protected in-app content editing at /studio

5 Content Schemas

Event (21 fields), Page, Announcement, Settings, Stats

10 GROQ Queries

Upcoming/featured/filtered events, settings, pages

Webhook Revalidation

Cache invalidation on content changes

4

Infrastructure & DevOps

Docker (multi-stage build)

Node 22 Alpine containerization

GitHub Actions CI

Lint, type-check, test pipeline

Northflank

Staging & production deployment with auto-deploy

Cloudflare

DNS + SSL

Plausible

Privacy-friendly analytics

Vitest

Unit testing framework

CAPABILITIES

Key Features.

01

Opportunity Hub

Multi-category hub with Jobs, Housing, Discounts, and Events tabs
Filtering, pagination, and save/bookmark functionality across all categories
Jobs — aggregated listings with title, company, salary range, location, and click-through links
Housing — share house and rental listings with suburb, rent range, and source links
Discounts — student deals aggregated from RSS feeds and deal platforms, deduplicated via content hashing
Events — CMS-managed with rich text, featured flags, city/category/date filters, share buttons, and calendar integration
02

9-Adapter Ingestion Engine

Plugin-based architecture with BaseAdapter abstract class — adding new sources is trivial
Eventbrite (JSON-LD extraction, ~130/run), Meetup (Apollo SSR state extraction, ~110/run), University Events (per-university CSS selectors for UNSW/RMIT/UniSA, ~170/run)
CareerJet (HTML scraping with Cheerio, ~90/run), Adzuna (REST API with salary formatting, ~200+/run)
OzBargain (RSS parsing, ~30/run), Finder (RSS with deal-keyword filtering, ~10/run), Scape (embedded JSON extraction, ~41/run)
SHA-256 content hashing for deduplication — skip unchanged, update changed, create new
Deep data sanitization — strips lone surrogates, control characters, null bytes, broken escape sequences, and astral-plane emojis
Per-adapter rate limiting (500ms–1.5s between requests)
590+ listings populated across all categories
Ingestion run audit trail with found/created/updated/skipped counts and duration
03

Admin Dashboard

KPI overview with platform-wide metrics
User management — search, filter, role assignment (USER/ADMIN)
Listing management — activate/deactivate listings across all categories
Ingestion monitoring — trigger runs, filter by source, view run history with stats
Platform settings — maintenance mode, registration toggle, featured content
Full audit log with JSONB details for every admin action
04

Auth & Security

Three-layer security model — middleware intercepts, component guards, API-layer auth helpers
Auth.js v5 with 5 auth flows (sign up, sign in, forgot/reset password, email verification)
bcryptjs (12 salt rounds), cryptographically secure tokens (crypto.randomBytes(32)), SHA-256 token hashing
1-hour token expiry with automatic old token cleanup
IP-based sliding-window rate limiting (register: 5/15min, forgot-password: 3/15min)
Email verification required before login, JWT sessions with role propagation
05

CMS & Content

Sanity v5 with embedded Studio and 5 schema types (Event with 21 fields, Page, Announcement, Settings, Stats)
10 GROQ queries for content retrieval with webhook revalidation for cache invalidation
8+ marketing pages: Home, About, Blog, Brand, Community, Contact, Privacy, Terms
5 branded HTML email templates (verification, welcome, password reset, contact confirmation, admin notification)
Newsletter signup with email validation
Contact form with validation, user confirmation, and admin notification

IMPACT

Results.

010PagesAcross 6 layout hierarchies
020API EndpointsAcross 6 route groups
030Prisma ModelsCore database entities with JSONB metadata
040Ingestion AdaptersMulti-source scraping engine
050+Listings PopulatedAcross Jobs, Housing, Discounts, Events
060CMS SchemasEvent (21 fields), Page, Announcement, Settings, Stats

ENGINEERING

Architecture.

01Next.js 16 App Router with 30 pages across 6 route groups (marketing, hub, auth, account, admin, studio)
02React 19 with Redux Toolkit (client state) + TanStack React Query (server state)
039-adapter ingestion engine with BaseAdapter abstract class and plugin architecture
04SHA-256 content hashing for deduplication across all aggregated data
05Deep data sanitization handling lone surrogates, control characters, and broken escape sequences
06Three-layer security model — middleware, component guards, API-layer auth helpers
075-provider root composition — Redux + React Query + Auth.js + Theme + Lenis smooth scroll
08Advanced UI engineering — particle canvas with cursor antigravity, 3D tilt with spring physics, glassmorphism
09Reduced motion detection checking user preferences, CPU cores, and memory
10Comprehensive Zod validation on every input boundary (forms, API params, webhook payloads)
11Separate background worker process deployed alongside web server
1212 Prisma models with JSONB metadata, composite indexes, and content hashing

Deployment

Docker multi-stage build for production
docker-compose for local development with PostgreSQL
GitHub Actions CI pipeline: lint → type-check → test
Northflank deployment with auto-deploy on push
Separate worker process deployed alongside web server
Cloudflare DNS + SSL
Previous ProjectA video platform for campus stories across

Interested in working together.