Waldorf School of New Orleans Website Redesign

Complete Redesign using Nextjs, Sanity, and Shopify.

By Michael Gandolfi

Project Shots

Mobile view

Dropdown menu on desktop

Application process

Faq page

Carousel

Calendar Skeleton using React Suspense

Calendar page pulling from google calendar api and rendered server side. State stored in URL for sharing and dynamic OG data

Blog page with pagination

Tour page

Ecommerce using shopify storefront API

Product image with state/variants stored in url

Checkout menu

Mobile Lighthouse audit

Desktop Ligthhouse audit

Editing environment

Presentation Tool for visualizing edits in real time

Open Graph preview pane using a custom form component and Nexjs Image Response

Tuition & Fees tables

Managing the open positions pages

Blog management

About the project

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, as well as a growing number of charter schools in the Greater New Orleans Area. Because the Waldorf philosophy stands out amongst the crowd, they needed their digital presence to do the same.

Features

Nextjs 14 app router
Shopify Storefront API GraphQL integration for headless e-commerce
Zod runtime type validation for external APIs
Automatic content updates via ISR and tag-based revalidation for Shopify and Sanity
JSON-LD for FAQs, products, events, articles, and job listings
Sanity presentation view + Vercel Preview for visual edits
Type safe GROQ queries via new DefienQuery
Passive image loading with LQIPs
Automatic sitemap updates
High-resolution image support (2x device pixel ratio)
Smooth animations and transitions using Framer Motion
Enhanced loading experience with React Suspense and skeletons for dynamic content
Pagination for blog
Instagram feed integration with automatic token refresh via cron job
Dynamic Open Graph images using Nextjs Image Response for calendar, events, and blog posts with custom embedded viewer in Sanity Studio
Forms powered by Resend API and server actions
Donorbox integration for donations and tickets

Contributor

Michael Gandolfi

Fullstack Software Engineer

Related contributions

American Italian Cultural Center Redesign

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

Michael Gandolfi