View Website - www.grizzlyguitar.com
A high performance headless Shopify storefront built with Next.js 15, React Server Components, TypeScript, and Sanity CMS.
- Uses Shopify to manage product data, checkout, and e-commerce logic
- Uses Sanity CMS to manage content such as service menu, featured sections, and blog posts
- Uses React Server Components to blend static performance with dynamic data for a modern, scalable frontend
Timeline:
- Published v1 in 2023, built with GatsbyJS (SSG)
- Published v2 in 2025, re-built with React Server Components and NextJS 15 (SSG + SSR + PPR)
This is a website for Grizzly Guitar, a boutique guitar service and online store.
This project combines many of my interests: Web development, business, photography, music gear, and the art of luthiery - building and repairing stringed musical instruments.
I love to adjust, build, and change things, so naturally I learned how to work on my own guitars. Now that I've been helping and working with other musicians and their instruments, I wanted to set up a website with more information about what I do!
Building and maintaining this website has been a great learning experience. I've got familiar with using different Shopify APIs, setting up and customizing Sanity CMS, as well as optimizing performance using a few different data fetching setups.
- Built with GatsbyJS and React
- Used Shopify Checkout API
- Services menu edited via Sanity CMS
- Blog content sourced from headless WordPress via GraphQL
- Static Site Generation (SSG) - Data fetched from Sanity, Wordpress and Shopify with GraphQL and GatsbyJS at build time and deployed as static pages
- Updates to Sanity, Wordpress or Shopify would trigger a re-build and deploy via web hooks
- Client side product filter and sorting with useState and useContext hooks
- Utilized global context for state management
- Rebuilt with React Server Components and Next.js 15
- Uses Shopify Storefront Cart API
- All site content + blog editable with Sanity CMS
- Powered by SSR, ISR, PPR
- Product sort and filter uses query parameters (for improved navigation and link sharing)
- Includes product search
- Includes product image gallery
- Improved cross-platform stability
- Improved speed and performance
- Improved accessibility
Refactor and improve codeImprove Sanity SchemasSmall UX and UI adjustmentsFix bugs and clear errorsSwitch from Gatsby to React Server Components and NextJS- Add more blogs, content, services, products, etc. over time
- Grizzly Guitar - admin@grizzlyguitar.com
- Andrew - andrew@andrewdent.dev
- GitHub - @andentx
- LinkedIn - Andrew Dent
Shop Page
Product Page
Services Menu Component
