American Italian Cultural Center Redesign

Combining Sanity, Donorbox, and Shopify to seamlessly manage courses, trips, events, memberships, digests, and e-commerce.

By Michael Gandolfi

Project Shots

Ecommerce handled via Shopify Storefront API

Collections handled via Storefront API and refreshed on webhook trigger

Course Catalogue all handled in Sanity + Donorbox for ticketing

Donorbox Embeded checkout for lessons

Digests uploaded to Sanity as PDFs then parsed using React-pdf

Custom Digest viewer using React PDF

Mapbox connected via Sanity + Google Maps Input component

Forms powered by Resend API, Zod validation, and Nextjs server actions

Dynamic Open Graph Image creation via Nexts Image Response

Open graph

Dynamic Open Graph images for events

Lighthouse audit

Editing environment

Course curriculums management for centralized control

Course Management supporting multiple time offerings at different locations.

Sanity + Nextjs Presentation Mode

Event Management handling Mapbox, Donorbox checkout, and social sharing.

Digests uploaded as PDFs to sanity and then converted to images via React-PDF for a custom reader

About the project

With over ten revenue streams, the American Italian Cultural Center struggled to handle its online presence and desired more automation to free up valuable time. In their legacy system, all events, memberships, and e-commerce were handled through Woocommerce, which created several problems - mainly causing lots of manual data entry and communicating with visitors unable to find what they needed quickly.

Donorbox was chosen to replace Little Green Light for its ticketing, subscription, and donation capabilities and its ability to serve as an automated CRM. By connecting Donorbox and Sanity via ticket IDs that create embeds on the front end, staff can quickly create, modify, or delete events, courses, digests, and trips.

Nexts app router hosted on vercel
Automatic content updates using webhooks from Sanity and Shopify triggering ISR via tag-based revalidation
Dynamic Open Graph images for events, trips, products, and digests using Nextjs image response
Mapbox API for museum and event locations display connected via Google Maps Input
SEO-friendly JSON-LD for FAQs, products, Italian lessons, events, and digests for rich results
Donorbox integration for ticketing, event ticketing, memberships, and donations
Migrating all donor data from Little Green Light to Donorbox CRM
sanity studio content lake API using GROQ query language
Shopify Storefront API integration for headless e-commerce
inquiry forms form powered by Resend API, server actions, and Zod validation
presentation view managed through Sanity CMS for live previews of edits
Smooth animations and transitions using Framer Motion
Enhanced loading experience with React Suspense for dynamic content
React-PDF for digital reader. PDFs are uploaded to sanity cms and then parsed into images for PDF carousel-like reader via react-pdf package
Instagram token refresh via cron job
pagination for digests

Contributor

Michael Gandolfi

Fullstack Software Engineer

Project Shots

Editing environment

Related contributions