CodeFlow PSUT Club Website
A two-language (English/Arabic) website for CodeFlow, the student programming and tech club at Princess Sumaya University for Technology, with an interactive team tree and playful motion.
Next.js · React · TypeScript · Prisma · PostgreSQL · next-intl · Netlify
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