03 / 07MOSQUE · 3D WEB EXPERIENCEComing soon
Eyüp Sultan Nijmegen
A scroll-driven 3D website for the new Eyüp Sultan mosque in Nijmegen: a 360° tour, a film, live prayer times, announcements and online donations through Mollie towards the purchase of the land.
- What we did
- 3D scroll storytelling
- 360° virtual tour
- Online donations with Mollie
- Trilingual (NL / TR / EN)
- Technologies
- Next.jsReact Three FiberTailwind CSSCloudflare WorkersD1 & R2Mollie
- Type
- Website · Client project
01About the project
The brief
Eyüp Sultan Nijmegen is raising funds to buy land for a new mosque and culture centre at Jonkerbosplein. It needed a website that makes a building that does not exist yet easy to picture, keeps the community informed with announcements and prayer times, and accepts donations online.
Our approach
We rebuilt the planned building as a real-time 3D model from the architectural plans and set it in its real surroundings, generated from open map data. We combined that with information pages, a management panel and donations through Mollie. The 3D scene loads in stages, adjusts its own quality on slower devices and shows a 2D version to visitors who prefer reduced motion.
02Key features
- 01
360° tour and building guide
A journey from above the square, through the courtyard gate and into the prayer hall; free orbit outside, stops inside, and day, sunset or night. Numbered pins explain what each part of the building is for.
- 02
In its real surroundings
The building stands in the actual neighbourhood, generated from open map and building data, with trees, visitors and furnished rooms.
- 03
AR model on your table
On a phone, the complex can be placed at 1:150 scale on a table or the floor. On a computer, the model is shown with a QR code to open it on a phone.
- 04
Announcements and prayer times
Announcements also appear on a digital board in the 3D courtyard; filter by category, add to your calendar and share. The day's prayer times are on the home page.
- 05
Online donations
Donate by iDEAL or card through Mollie; a payment's status is always taken straight from Mollie. When online payment is unavailable, the page shows the details for a bank transfer.
- 06
Management panel
Announcements with drafts, scheduled publishing and pinning; events with sign-ups and capacity, the gallery, and donations with CSV export. Managers invite new managers with a one-time link.
03Screens
04Technology
Interface
- Next.js
- Information pages and the 3D experience
- React Three Fiber
- 3D building, tour and AR scene
- Tailwind CSS
- Design system with light and dark themes
- Zustand
- Tour, quality and scene state
Server & data
- Cloudflare Workers
- API for the panel and donations
- D1 & R2
- Announcements, sign-ups and gallery photos
- Mollie
- Online donation payments
- Resend
- Invitation and password-reset emails
Infrastructure
- Blender
- Models of the building, trees and rooms
- Playwright
- Performance and resilience tests
05Status
This project is in development. Thinking of something similar?
