Back to Projects
Case Study

Philokalia
Cultural Platform

A multifaceted digital transformation encapsulating the vast offerings of a monastery and arts center, featuring a custom CRM and robust automated recurring donation engine.

Client
Philokalia Foundation
Philokalia Showcase

Project Overview

Philokalia is a multifaceted cultural and heritage institution that blends the rich tradition of a monastery with a modern, dynamic arts center. The organization required a massive digital transformation to encapsulate its vast offerings—including the Institute, Choirs, Dār-Al-Milād, Dār-Al-'Ūd, a Literary Salon, and a Kitchen.

The objective was to build a sophisticated, highly performant web platform featuring a premium design system, a custom CRM for managing complex cultural data, and a robust automated donation engine to drive their fundraising efforts.

Design System Architecture

The UI/UX architecture was driven by a "Reference-Based Approach"—aiming to reflect the warmth of a heritage site while maintaining the clean, cinematic presentation of a modern performing arts center.

  • Color Palette: Grounded in a 'Deep Slate' and 'Clean Off-White', highlighted with 'Rich Purple' for primary CTAs and a 'Warm Gold' for subtle, elegant accents.
  • Typography: We paired Playfair Display, an elegant serif for cinematic hero headlines, with Inter/Nunito Sans, a highly readable humanist sans-serif for body copy and UI elements.
  • Motion & Interactions: Powered by GSAP and Framer Motion, the site features micro-parallax background scrolling, staggered list reveals, soft hover lifts, and smooth scroll-triggered fades. This creates an immersive, documentary-like browsing experience.

Key Infrastructure Features

1. Advanced Recurring Donation Engine (Stripe)

Given Philokalia's reliance on continuous community support, standard checkout links were not enough. We built a fully integrated Recurring Donation Engine from the ground up:

  • Multi-Tiered Subscriptions: Users can commit to one-time, monthly, or yearly donations natively.
  • Webhook-Driven Architecture: We set up a highly resilient Stripe webhook listener handling event triggers like `payment_intent.succeeded` and `invoice.payment_succeeded` for automated future billing.
  • Database Synchronization: Every webhook securely updates the database in real-time to log transaction statuses, ensuring the financial data is perfectly aligned with the Stripe ledger.

2. Automated SMTP Email System

A critical requirement was establishing immediate, professional communication between the platform, the donors, and the administration. By utilizing Nodemailer paired with SMTP2GO as our relay server, we achieved enterprise-level deliverability, connection pooling, and dynamic HTML rendering.

  • Automated Donor Emails: The moment a donation webhook fires, the system parallel-sends a beautifully styled, mobile-responsive HTML receipt featuring personalized impact messages based on exactly where they donated.
  • Admin Forwarding & Alerts: Simultaneously, the system dispatches an instant notification to a list of administrative emails, highlighting large transaction amounts and direct contact links for the donor.

3. The Custom CRM (Content Management)

Managing a cultural center with daily shifting events, choirs, and workshops required a bespoke CRM solution that off-the-shelf platforms couldn't handle gracefully.

  • Extensive CRUD Capabilities: We mapped out individualized schema architectures for Departments, Ensembles, Collaborators, Festivals, Performances, Memories, and Boutique Products.
  • Seamless Media Integration: Integrated UploadThing directly into the CRM UI. Whether uploading WebP images, dense audio samples of chorales, or heavy PDF syllabuses, the CRM handles it contextually, mapping to secure MongoDB documents.

🎯 Project Outcomes

We successfully delivered a comprehensive digital ecosystem that not only captures the profound aesthetic beauty of the Philokalia foundation but also automates their most critical administrative and financial tasks. The recurring donation engine ensures sustainable fundraising, the SMTP integration provides instant community transparency, and the custom CRM gives the staff the exact tools they need to manage their legacy effortlessly.

Technologies Used

React (Vite)Node.js & ExpressTailwind CSSGSAP & Framer MotionRadix UIMongoDB & PostgreSQLDrizzle ORMStripe API & WebhooksUploadThingNodemailerSMTP2GO

Frontend Framework & UI

React (Vite), Tailwind CSS, GSAP, Framer Motion, Radix UI

Backend Architecture

Node.js, Express, MongoDB (Dynamic), PostgreSQL (Transactions) via Drizzle ORM

Payments & Integrations

Stripe Subscriptions & Webhooks, Nodemailer + SMTP2GO, UploadThing

Visit Live Site

Project Gallery

A visual journey through the platform's interfaces and features. Click any image to enlarge.

Project interface thumbnail 1
Project interface thumbnail 2
Project interface thumbnail 3
Project interface thumbnail 4
Project interface thumbnail 5
Project interface thumbnail 6