American Italian Cultural Center

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 extensive manual data entry and visitors unable to find what they needed quickly.

Tech stack

• Language: TypeScript
• Libraries: React 18, Zod, Framer Motion, Radix UI, Headless UI, Date-fns
• Frameworks: Next.js 14 (App Router), Tailwind CSS
• Query Languages: GraphQL (Shopify), GROQ (Sanity)
• Deployment: Vercel
• CMS: Sanity
• E-commerce: Shopify Storefront API
• Donations, memberships, and ticketing: Donorbox
• CRM: Donorbox
• Email: Resend API

Key features

• Automatic cache purging using webhooks and Next.js tag-based revalidation
• Utilizing Nextjs App Router for server-side rendering, static generation, and incremental static regeneration
• Sanity Presentation View + Vercel Draft Mode for previewing visual edits in real-time
• Storefront powered by Shopify Storefront API (GraphQL), which syncs with on-premise gift shop through Zettle
• Custom digest reader that converts PDFs to images using React-PDF
• Image optimization with low-quality image placeholders
• React Suspense for improved loading experience for dynamic content
• Dynamic Open Graph images using Next.js Image Response API
• JSON-LD implementation for rich results (FAQs, products, events, courses, and digests)
• Automatic sitemap updates
• Donorbox for automatic membership subscriptions, ticketing, and donations
• Zod for runtime type validation of external API responses and form submissions
• Form submissions using Resend API and server actions
• CRON jobs refresh API tokens at scheduled intervals
• Smooth animations and transitions using Framer Motion and Tailwind CSS

Content management

Editors have complete control over the site's content and structure through the embedded Sanity Studio. Sanity's flexible Content Lake serves as a composable schema-less database, allowing for complex content modeling and relationships. This flexibility empowers developers to treat content like data, enabling them to build custom editorial experiences, workflows, and automation.

Published content is cached on Vercel's global CDN and revalidated through webhooks, ensuring content is never stale without compromising speed or resources.

Digest issues are stored as PDFs in Sanity and rendered using React-PDF for a custom, scrollable reader.

Sanity's presentation mode, paired with Vercel's Draft Mode, allows editors to see real-time previews of changes before being published or scheduled.

E-commerce

E-commerce is powered by the Shopify Storefront API, which handles inventory, variants, collections, and payment processing. Anytime changes are detected, a webhook triggers a cache revalidation request to ensure content is never stale.

Sharability

The website is also built for social sharing and posting. It utilizes the Open Graph Protocol and the Nextjs Image Response API to convert JSX and CSS into rich images for static and dynamic content, allowing editors to focus on creating.

Performance

The website leverages React Suspense, server-side rendering, static generation, incremental static regeneration, and Vercel's Edge Network for optimal performance.

GROQ (for Sanity) and GraphQL (for Shopify) enable precise, type-safe querying, ensuring only necessary data is fetched, thus minimizing payload sizes and reducing server load.

Progressive loading is used for all images to prevent layout shifts and give users instant feedback. The full-resolution image loads simultaneously and is swapped when ready. NOTE: For this demo, performance has been artificially degraded.

Client side rendering is kept to a minimum by storing state for dynamic content in the URL when possible. Another added benefit of this is users can easily share or bookmark links while maintaining state.

Search Engine Optimization

Another benefit of server-side rendering is that search engine bots do not have to send pages to the render queue and can instantly crawl the content. This leads to faster indexing and potentially better search engine rankings.

Additional services rendered

• Data migration
• Training sessions & materials
• Gsuite domain migration
• E-commerce strategy
• Style guide