Arabesque is a full-stack web platform celebrating Islamic geometric patterns — built from the ground up as my MSc Digital Media Design thesis at the University of Edinburgh. It combines a curated legacy pattern database, step-by-step SVG tutorials, a generative Pattern Generator built on Hankin's algorithm, a Rosette Generator built in P5.js, a contributor leaderboard, a points-based community system, and a moderated admin pipeline. Brand, UX, front-end, back-end, and database — all sole-authored.
The platform was built around three user personas — a casual browser exploring beautiful patterns, a designer or illustrator looking for generative tools, and a knowledge contributor adding to the database. Each persona drove a distinct surface: discovery, creation, contribution. The whole experience routes back to a single shared library of patterns.
A full-stack JavaScript-heavy build: PHP and Fat-Free Framework on the back end, MySQL for the data layer, vanilla JavaScript and AJAX for async loading, P5.js for the generators, SVG.js for animated tutorial drawing, GSAP for the homepage motion, Driver.js for onboarding, and Bootstrap for layout structure.
The homepage is built around four scroll-driven panels: a hero introducing the brand, a 'Create Your Own' CTA into the generators, an 'Explore' CTA into the gallery, and a featured grid of the top user-generated patterns. The rotating motif tracks the scroll position with GSAP, and the leaderboard plus pattern grid load asynchronously via AJAX so the page is interactive immediately.
The gallery loads the full pattern database — both legacy (historical) patterns and user-submitted designs — with an async search box, a type filter, and a category toggle for All / User Generated / Legacy. Each result links into a deeper Pattern View page with the full step-by-step tutorial.
The Pattern View is the platform's clearest teaching moment: each legacy pattern is broken into an animated SVG tutorial that draws layer by layer. A sticky side navigation keeps the steps reachable, and a Request Edit button funnels engaged users into registration — converting browsing into contribution.
The generator implements Hankin's algorithm — a geometric construction method for Islamic patterns — and wraps it in a designer-friendly UI. Users can add random shapes, lock minimum and maximum sizes, manage text overlays, randomise colours, tile across the canvas, and either export a static image or record an animated reveal. A Driver.js-driven onboarding tour walks first-time users through every control before letting them exit.
A parallel P5.js sketch generates classical rosette patterns — the user controls petal count, construction-line visibility, opacity, stroke width, pattern colour, and intersection fill, all updating in real time on the canvas. Designs can be saved back into the user's profile and submitted to the moderated gallery.
Registered users get a profile with three tabs — Profile, Edit History, and Pending Uploads — so contributors can track what they've submitted and where it sits in moderation. The first profile visit triggers a Driver.js onboarding sequence; the help (?) button replays it without affecting state. Passwords are hashed before they touch the database; emails are stored only for password reset.
The admin dashboard is the operational backbone — pending edit requests on existing patterns, unapproved user-submitted patterns, and the link to award contribution points on approval. Approve and reject both fire async success / failure messaging; rejected edit requests are deleted, approvals push points to the contributor's profile.
delivered.