Waldorf School of New Orleans

Although part of the largest independent school movement in the world, The Waldorf School of New Orleans is the only Waldorf School within a 300-mile radius. Founded almost 25 years ago, WSNO competes with well-established private schools and a growing number of charter schools in the Greater New Orleans Area.

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 Content Lake
E-commerce: Shopify Storefront API, Donorbox
Email: Resend API

Key features

Automatic cache purging using webhooks and Next.js tag-based revalidation
Combining server-side rendering, static generation, and incremental static regeneration for optimal performance
Sanity Presentation View + Vercel Draft Mode for previewing visual edits in real time
Shopify Storefront API (GraphQL) for "headless" E-commerce
Image optimization with low-quality image placeholders for progressive loading
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, articles, job listings)
Automatic sitemap updates
Donorbox for donations and ticket sales
Eventbrite API integration for tour registration
School calendar powered by Google Calendar API with state stored in URL for sharability
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.

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

E-commerce

Ecommerce 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 optimized for social sharing. It utilizes the Open Graph Protocol to automatically generate rich results for static and dynamic content, allowing editors to focus on creating.

Performance

The website leverages React Suspense, hybrid rendering, 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.

For content that needs to be loaded asynchronously, React Suspense and skeleton UI components ensure a smooth, non-blocking rendering process.

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

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.