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

Waldorf School of New Orleans Website Redesign

By Michael Gandolfi

Complete Redesign using Nextjs, Sanity, and Shopify.

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