Skip to content
👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events
View project liveShare your own project

American Italian Cultural Center Redesign

By Michael Gandolfi

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

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
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

Other projects by author