Loading...
Back to all projects
Albyrådet
Overview
Full-stack site for a Swedish youth organization focused on community safety and youth engagement in Alby, Botkyrka. The frontend is a Next.js 15 App Router app with eight routes — landing page with a full-screen video hero, project pages for BotkyrkaChill and UIA, sponsor listings, contact form, membership info, a membership application form, and the usual legal/privacy stuff. On the backend there are actually two implementations living side by side: an Express server with Mongoose that persists membership data and sends emails via Nodemailer, and newer Next.js API routes that do the same thing but add rate limiting and input sanitization. The migration between them never fully finished, so both stay.
Key Features
- Hand-built project carousel with Framer Motion spring animations, swipe gestures, auto-rotation, and separate media sets for mobile vs desktop — ended up being way more involved than a typical slider
- Membership application that collects personal number, address, occupation, and more, then persists to MongoDB and emails the admin. Validation happens server-side
- Contact form piped through Nodemailer to Strato SMTP, with in-memory rate limiting and basic XSS sanitization on the API route
- Security headers middleware that injects CSP, HSTS with preload, X-Frame-Options DENY, and X-Content-Type-Options on every non-static request
- Dark and light mode throughout — logos, sponsor images, and gradient dividers all swap per theme using next-themes, with a custom Alby color palette baked into the Tailwind config
- A handful of Sharp-based Node scripts for image processing: WebP conversion, orientation sorting, media file verification, and a batch renamer that patches the source code automatically
Challenges
- Strato SMTP was a pain to get working. The code toggles between SSL on port 465 and STARTTLS on 587 with extended timeouts and debug logging everywhere — clear signs of trial and error before email delivery started behaving
- The backend ended up in two places: an Express server with Mongoose and Next.js API routes that overlap in functionality. This happened during a partial migration, and since both are in use, both need to keep working without stepping on each other
- The project carousel looks simple from the outside but handles video autoplay management (pausing off-screen, catching browser rejections), directional spring animations, and completely different media sets depending on screen size
Solution
The frontend runs on Next.js App Router with client components throughout, using shadcn/ui as the component library and a Tailwind config extended with Alby's brand colors. The project showcase page has a from-scratch carousel built on Framer Motion's AnimatePresence with spring physics and Swiper for touch input. Backend-wise, the Express server handles MongoDB writes through Mongoose and email via Nodemailer, while the newer Next.js API routes layer on rate limiting and sanitization. A middleware file sets security headers — full CSP, HSTS, the works — on all non-static responses. There's also a small toolkit of Sharp scripts for converting images to WebP, sorting by orientation, and verifying that every carousel asset actually exists on disk.
Outcome
Live at albyradet.se. The site handles membership applications end to end — form submission, MongoDB storage, email notification to the org admins — and does the same for the contact form minus the database part. Built pro bono for a local youth organization.
Project Information
Technologies
TypeScript
Next.js 15
React 18
Express.js
MongoDB
Mongoose
Nodemailer
Tailwind CSS
shadcn/ui
Framer Motion
Swiper