CodeFlow PSUT Club Website

Overview

CodeFlow, the programming and tech club at Princess Sumaya University for Technology (PSUT), needed a public home that introduces the club, shows its events and teams, and turns visitors into members.

The site serves English at / and a full right-to-left Arabic version at /ar. It has a landing page that follows the club's recruitment booth presentation and a Get to know us page with a profile for every member. All page text lives in translation files, so non-developers can update it without touching code.

Key features

• Full English/Arabic support: language-based routing with next-intl, right-to-left layout for Arabic, and hreflang links for both language versions.
• Interactive team tree: an org chart from the president and vice president down through each department. Tap a department to open it; the layout adapts to phones and desktops.
• Personality and motion: a duck mascot, a duck-family loading screen, a duck-rain easter egg, confetti, an animated code-symbol hero, a typing headline and count-up stats. All of it switches off for visitors who prefer reduced motion.
• Modular build: each page section (hero, events, goals, FAQ, join and more) is its own module, so sections can be reordered from one file.
• SEO groundwork: bilingual titles and descriptions, structured data, sitemap, robots.txt, a social share image and a web app manifest.
• Mobile and iPhone polish: safe-area insets for the notch, Apple web-app meta tags and a fix for squashed team photos on Safari.
• Ready for a CMS: a Prisma/PostgreSQL schema with translation tables for members and departments, plus a migration and seed data, prepared for a future admin panel.

Highlights

• Started as plain HTML/PHP and was rebuilt in Next.js with a modular architecture.
• Designed a database schema with built-in translations so the planned admin panel can edit both languages.
• Made deliberate accessibility choices: a skip-to-content link, reduced-motion support and fallback initials when a member has no photo.

Tech stack

Next.js 16 · React 19 · TypeScript · next-intl · Prisma 7 · PostgreSQL · Netlify

In collaboration with my good friend, Omar Abdelraheem