Teen Magazine
Digital youth magazine with interactive PDF flipbook & announcements.
01 / Overview
A full-stack digital publication platform designed for the next generation. Teen Magazine provides high-fidelity digital reading editions, real-time community announcements, and an administrative suite for managing publications and user roles. While engineering the platform, I developed and open-sourced svelte-pdf-flipbook, an interactive flipbook reader package that powers the in-browser reading experience.
02 / Architecture & Engineering
Engineered with Svelte 5 and SvelteKit, utilizing modern runes for reactive UI state, glassmorphic styling via Tailwind CSS 4, and shadcn-svelte primitives. Database operations, PostgreSQL row-level security (RLS), and binary PDF asset storage are orchestrated via Supabase. To deliver an authentic magazine feel, a bespoke Svelte flipbook library was authored and published to npm to dynamically parse and render PDF page canvas textures.
03 / Technical Highlights
Interactive PDF Flipbook Reader: Built and published the standalone svelte-pdf-flipbook npm package to render magazine editions with realistic, fluid page-turning animations in the browser.
Full-Stack Architecture on Supabase: Leveraged Supabase for secure user authentication, role-based access control, relational database migrations, and cloud storage for high-resolution edition PDFs and cover images.
Live Opportunity & Announcements Hub: Real-time broadcast board keeping youth informed with scholarships, training programs, and community changemaker spotlights.
Comprehensive Administrative Suite: Built an admin dashboard enabling editors to upload new editions, manage publication schedules, and moderate community announcements.
Technologies Used
Deliverables
- ▸ Production Web Platform on Vercel
- ▸ svelte-pdf-flipbook Open-Source NPM Package
- ▸ Supabase Auth, RLS, Storage & Migrations
- ▸ Publication & Announcement Admin Suite