{"id":18584189,"url":"https://github.com/brob/page-builder-demo","last_synced_at":"2025-05-16T05:33:05.826Z","repository":{"id":53675918,"uuid":"349514771","full_name":"brob/page-builder-demo","owner":"brob","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-15T17:38:17.000Z","size":15474,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-17T16:51:52.235Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"page-builder-demo-brob.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brob.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"ndimatteo"}},"created_at":"2021-03-19T18:08:28.000Z","updated_at":"2021-04-06T21:10:48.000Z","dependencies_parsed_at":"2024-12-26T17:41:34.521Z","dependency_job_id":"cb292e7f-9b74-4bf6-a673-fc7616cf6356","html_url":"https://github.com/brob/page-builder-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Fpage-builder-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Fpage-builder-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Fpage-builder-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Fpage-builder-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brob","download_url":"https://codeload.github.com/brob/page-builder-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254473734,"owners_count":22077160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T00:26:33.425Z","updated_at":"2025-05-16T05:33:00.819Z","avatar_url":"https://github.com/brob.png","language":"JavaScript","funding_links":["https://ko-fi.com/ndimatteo"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"public/HULL-Logo.svg\" align=\"center\" height=\"150\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eHeadless Shopify starter built on \u003ca href=\"https://nextjs.org\"\u003eNext.js\u003c/a\u003e\u003c/strong\u003e 🤘 \u003cbr /\u003e\n  \u003cstrong\u003eHeadless CMS powered by \u003ca href=\"https://sanity.io\"\u003eSanity.io\u003c/a\u003e\u003c/strong\u003e ⚡\u003cbr /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://insane.codes\"\u003e\n    \u003cimg src=\"https://img.shields.io/static/v1?label=\u0026message=View%20Demo\u0026style=for-the-badge\u0026color=black\u0026logo=vercel\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#-tours\"\u003eTours\u003c/a\u003e •\n  \u003ca href=\"#-set-up\"\u003eSet Up\u003c/a\u003e •\n  \u003ca href=\"#-spin-up\"\u003eSpin Up\u003c/a\u003e •\n    \u003ca href=\"#-deployment\"\u003eDeployment\u003c/a\u003e •\n  \u003ca href=\"#-extrastips\"\u003eExtras\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\n# ✨ Features\n🟢 **= implemented**\u0026nbsp;\u0026nbsp;/\u0026nbsp;\u0026nbsp;\n🟡 **= in progress**\u0026nbsp;\u0026nbsp;/\u0026nbsp;\u0026nbsp;\n⚪ **= not started**\n\n---\n\n- 🟢 utility-first CSS with [Tailwind CSS](https://tailwindcss.com)\n- 🟢 Page Transitions powered by [Framer Motion](https://www.framer.com/motion/)\n- 🟢 Cart powered by [Shopify Buy SDK](https://www.npmjs.com/package/shopify-buy)\n- 🟢 Klaviyo Waitlist form for out-of-stock Products + Variants\n- 🟢 Klaviyo Newsletter form with opt-in feature _(with validation and success/failure states)_\n- 🟢 Contact Form with email notifications powered by SendGrid _(with validation and success/failure states)_\n- 🟢 Dynamic Page Routes with optional nesting _(ie. `/parent/child`)_\n- 🟢 Automatic `Sitemap.xml` generation\n- 🟢 Automatic `robots.txt` generation\n- 🟢 Automatic 301 Redirects from Sanity\n- 🟢 Live Preview content directly from Sanity\n- 🟢 Dynamic Modules for building page content, including:\n   - 🟢 Marquees\n   - 🟢 Image Galleries/Carousels\n   - 🟢 Accordions\n   - 🟢 Pull-out Drawers\n   - 🟢 Cursor Follows\n   - 🟡 Product Carousels\n   - ⚪ Instagram Feed\n- 🟢 Baseline styles using extracted component classes for cleaner code\n- 🟢 Simple Social icon navigation lists\n- 🟢 Lazyload Images + WEBP format by default\n- 🟡 Promotion Banner\n- ⚪ Default Blog setup\n- ⚪ Initial animations\n- ⚪ Scroll animations\n- 🟢 Accessibility features:\n   - 🟢 ARIA Landmark Roles\n   - 🟢 Default focus states preserved for keyboard navigation\n   - 🟢 Correctly Trap focus when Drawers are open with [focus-trap-react](https://www.npmjs.com/package/focus-trap-react)\n   - 🟢 Input-based Counters\n   - 🟢 Correctly associated button states\n   - 🟢 Required `alt` states for all images\n   - 🟢 Skip to Content link\n- 🟢 SEO features:\n   - 🟢 Page-level SEO/Share settings with previews\n   - 🟢 Fallback Global SEO/Share settings\n   - 🟢 Automatic JSON-LD Schema markup for Products\n   \n### Headless Shopify\n- 🟢 Syncs Products from Shopify into Sanity\n- 🟢 Tracks product status _(draft/published)_ from Shopify to help control visibility while editing\n- 🟢 Automatic Variant option toggles\n- 🟢 Marks deleted products and variants for easy tracking\n- 🟢 SSR (Dynamic Rendering) of PDP pages\n- 🟢 Updates the URL on variant changes while keeping a clean history stack\n- 🟢 Accessible and clamped Quantity Counters\n- 🟢 Vanity Shop URL Masking\n- 🟢 Global Cart with access to all variant data for line items\n- 🟢 Supports Single Variant products out of the box\n- 🟢 PDP Photo Galleries with variant granularity\n- 🟢 default PLP for all products\n- 🟢 Custom PLPs with easy, Sanity-managed Collections\n- 🟢 Ability to surface a PDP option on PLP product cards\n- 🟡 Sanity-managed conditional Cart \"add-ons\"\n- ⚪ Ability to apply coupons to the checkout cart\n- ⚪ Account Management _(register/login/password/orders)_\n- ⚪ Customer Reviews Integration _(Yotpo? Okendo? Junip?)_\n\n\u003cbr /\u003e\n\n# 🎧 Tours\nStill not sold? Here's some videos to get you psyched:\n\n**Famous 5-Minute Setup™ - `Coming Soon`** \u003cbr /\u003e\n_From sync to sale, watch me spin up a fresh storefront in under 5 minutes!_\n\n**Explore the file Structure - `Coming Soon`** \u003cbr /\u003e\n_In-depth look at the file structure, naming conventions, and logic under the hood_\n\n**Setting up your first Product - `Coming Soon`** \u003cbr /\u003e\n_Explore the Product settings within Sanity and how to properly setup PDP pages and PLP cards_\n\n**Connecting to Klaviyo and testing your Forms - `Coming Soon`** \u003cbr /\u003e\n_Learn how to quickly connect Klaviyo to utilize product waitlist and newsletter forms_\n\n**Setup your first Vercel deployment - `Coming Soon`** \u003cbr /\u003e\n_Using the Sanity Vercel Deploy plugin, see how easy it is to empower your clients to trigger deploys_\n\n\u003cbr /\u003e\n\n# 💀 Set Up\n\nClone this repository from your GitHub account with the `use template` button\n\n### 1) Sanity\n1. `npm install \u0026\u0026 sanity init` in the `/studio` folder\n2. During Sanity's initalization it will warn you, type `Y` and hit `enter`:\n```\n? The current folder contains a configured Sanity studio. Would you like to reconfigure it? (Y/n)\n```\n3. When it asks you what dataset configuration to use, go with the `default`\n4. Add CORS Origins to your newly created Sanity project (visit: [manage.sanity.io](https://manage.sanity.io) and go to Settings \u003e API):\n    - Add your Studio URLs **_with_** credentials: `http://localhost:3333` and `[subdomain].sanity.studio`\n    - Add your front-end URLs **_without_** credentials: `http://localhost:3000` and `https://[subdomain].vercel.app`\n\u003e ⚠️ **Note** \u003cbr /\u003eThis Studio uses the new \"actions\" resolver to handle \"singleton\" documents. To adjust what documents should behave like singletons be sure to edit the `singletons` array in the following file: `/studio/parts/resolve-actions.js`\n    \n### 2) Shopify Storefront Access\n1. Enable Private Apps in Shopify\n   - Apps \u003e \"Manage Private Apps\" *(text link in page footer)*\n   - Enable Private Apps\n2. Create new Private App\n   - Apps \u003e Manage Private Apps \u003e \"Create private app\" \n   - Give this a relevant name, I prefer: \"Headless Storefront\", so it's clear what it's being used for\n   - Use your dev email to know when there are issues\n   - Change Admin API permissions on \"Products\" to `Read and write`\n   - Allow this app to access your storefront data using the Storefront API, with at least the following permissions:\n      - Read inventory of products and their variants\n      - Read and modify checkouts\n\n### 3) Shopify Webhooks\n1. Go to \"Settings\" *(bottom left)* -\u003e \"Notifications\" -\u003e \"Webhooks\" *(very bottom)*\n2. add the following webhooks:\n  - product update - `[your-domain]/api/shopify/product-update`\n  - product deletion - `[your-domain]/api/shopify/product-delete`\n\u003e ⚠️ **Note** \u003cbr /\u003eYou have to use a real domain name (no localhost). Be sure to use your Vercel project URL during development, and then switch to the production domain once live. You won't know your Vercel project domain until you deploy in a later step, just enter in what you think it will be for now!\n\n### 4) NextJS\n1. `npm install` in the project root folder on local\n2. Create an `.env.local` file in the project folder, and add the following variables:\n```\nSANITY_PROJECT_DATASET=production\nSANITY_PROJECT_ID=XXXXXX\nSANITY_API_TOKEN=XXXXXX\nSHOPIFY_STORE_ID=XXXXXX\nSHOPIFY_API_TOKEN=XXXXXX\nSHOPIFY_API_PASSWORD=XXXXXX\nSHOPIFY_WEBHOOK_INTEGRITY=XXXXXX\n\n// Needed for Klaviyo forms:\nKLAVIYO_API_KEY=XXXXXX\n\n// Needed for Mailchimp forms:\nMAILCHIMP_API_KEY=XXXXXX-usX\nMAILCHIMP_SERVER=usX\n\n// Needed for SendGrid forms:\nSENDGRID_API_KEY=XXXXXX\n```\n3. Update all the `XXXXXX` values, here's where to find each:\n  - `SANITY_PROJECT_ID` - You can grab this after you've initalized Sanity, either from the `studio/sanity.json` file, or from your Sanity Manage dashboard\n  - `SANITY_API_TOKEN` - Generate an API token for your Sanity project. Access your project from the Sanity Manage dashboard, and navigate to: \"Settings\" -\u003e \"API\" -\u003e \"Add New Token\" button. Make sure you give `read + write` access!\n  - `SHOPIFY_STORE_ID` - This is your Shopify store ID, it's the subdomain behind `.myshopify.com`\n  - `SHOPIFY_API_TOKEN` - Copy the Storefront Access Token you copied from setting up your Private Shopify App. _(Note: This is **not** the Admin API Key, scroll to the bottom where it says \"Storefront API\" for the correct value)_\n  - `SHOPIFY_API_PASSWORD` - Copy the Admin API password from \"Apps\" -\u003e \"Manage private apps\" -\u003e [your_private_app].\n  - `SHOPIFY_WEBHOOK_INTEGRITY` - Copy the Integrity hash from \"Settings\" -\u003e \"Notifications\" -\u003e \"Webhooks\" *(very bottom of page)*\n  - `KLAVIYO_API_KEY` - This is your Public API Key / Site ID from your Klaviyo Account \"Settings\" -\u003e \"API Keys\"\n  - `MAILCHIMP_API_KEY` - Create an API key from \"Account -\u003e \"Extras\" -\u003e API Keys\n  - `MAILCHIMP_SERVER` - This is the server your account is from. It's in the URL when logged in and at the end of your API Key\n  - `SENDGRID_API_KEY` - Create an API key from \"Settings\" -\u003e \"API Keys\" with \"Restricted Access\" to only \"Mail Send\"\n  \n### 5) Shopify Store Theme\nSince we're serving our store through a headless environment, we don't want visitors accessing our unused shopify theme. The domain for this is visible during checkout, and is publicly accessible. To silence it, replace your current theme's `theme.liquid` file with the one from this repo, and replace `your_frontsite_domain` with your actual frontsite domain URL **(do not include protocol or trailing slash)**\n\nThis will essentially \"pass-through\" URLs accessed at your Shopify Store to your true headless storefront *(ie. `shop.hull.com/products` -\u003e `hull.com/products`)*\n\n\u003cbr /\u003e\n\n# ⚡ Spin Up\n\n### Next (Front End)\n`npm run dev` in the project folder to start the front end locally\n   - Your front end should be running on [http://localhost:3000](http://localhost:3000)\n   \n### Sanity (Back End)\n`sanity start` in the `/studio` folder to start the studio locally\n   - Your Sanity Studio should be running on [http://localhost:3333](http://localhost:3333)\n\n\u003cbr /\u003e\n\n# 🚀 Deployment\n\n### Vercel\nThis is setup to work seamlessly with Vercel, which I highly recommend as your hosting provider of choice. Simply follow the on-screen instructions to setup your new project, and be sure to **add the same `.env.local` variables to your Vercel Project**\n\n### Sanity\nThis is an easy one, you can simply run `sanity deploy` from the `/studio` folder in your project. Select a subdomain you want; your Studio is now accessible from the web. This is where I'll invite the client to manage the project so they can both add billing info and begin editing content.\n\n### Client Updates\nOnce you hand off to the client you'll want to give them the ability to generate builds when they make updates within the Sanity Studio. The easiest way to do this is through my [Vercel Deploy plugin](https://github.com/ndimatteo/sanity-plugin-vercel-deploy).\n\n\u003cbr /\u003e\n\n# 🤘 Extras/Tips\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eThis looks like a theme... How can I use this like a starter?\u003c/strong\u003e\u003c/summary\u003e\n\nWhile this starter is relatively opinionated, the goal was three-fold:\n1. Use high-quality packages that don't get in the way\n2. Solve common UX problems and complex logic so you can focus on the fun stuff\n3. Create a more approachable starter for anyone looking to build production-ready headless Shopify experiences\n\nThat being said, I understand this means a lot of what's included is **very opinionated**. However, you'll find that at it's core the structure and naming conventions lend itself to really making it your own. \n\nBy now, I'm sure you noticed the ridiculous-looking [demo site](https://insane.codes/) (I love 90's metal, can you tell?)\n\nI've purposefully used extracted component classes, not only for cleaner file structure, but also so you can easily work in your own styles exclusively within the styles folder. Feel free to extend our outright remove the applied styles for all the components!\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eWhat's up with the CSS? What are extracted component classes and why should I use them?\u003c/strong\u003e\u003c/summary\u003e\n\nWhile utility-first CSS definitely speeds up your dev time, it can become overwhelming and untenable. This can make it difficult to understand what a component is doing when shrouded in dozens of utility classes, especially for developers getting familiar with a new codebase. Luckily, Tailwind offers the ability to [extract a component](https://tailwindcss.com/docs/extracting-components), allowing you to compose custom utility patterns.\n\nThe nice thing about this is we can get all the benefits of writing in utility class shorthand, but without having to sift through all your javascript logic to adjust styles. This means writing our CSS is business as usual. You create stylesheets, but use Tailwind's `@apply` to create nice and succinct classes to push to your components.\n\nYou still get all the tree-shaking benefits of Tailwind, _and_ you can still use utility classes in your components when needed; the best of both worlds!\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCan I use this for non-Shopify projects?\u003c/strong\u003e\u003c/summary\u003e\n\nAbsolutely! This starter was actually born out of a non-shopify starter I had been using for my own client projects. Simply delete the shopify-specific logic and you've got yourself a fancy static starter powered by Next and Sanity!\n\nHere's a shortlist of what to remove:\n- Within the `/components` folder, remove `cart`, `product`, and `shop` folders\n- Within the `/pages/api` folder, remove `products` and `shopify` folders\n- Within the `/pages` folder, remove `products` and `shop` folders\n- Within the `_app.js` file, remove `\u003cShopifyContextProvider /\u003e` and `\u003cCart /\u003e` components\n- Within the `/studio` folder, remove all shopify-related schemas, desk structures, and actions\n- Within the `/components/header.js` file, remove references to shopify `context` and `cart`\n- `/contexts` folder _(used for accessing shopify data anywhere)_\n- `/lib/shopify.js` file _(shopify client setup)_\n- `SHOPIFY_*` env variables from `next.config.js`\n- `shopify-buy` dependency from `package.json`\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eError: Failed to communicate with the Sanity API\u003c/strong\u003e\u003c/summary\u003e\n\nIf you get this error in your CLI, you need to logout and log back in again. Simply do `sanity logout` and then `sanity login` to fix.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eAccess your \"product_sync\" metafields in Shopify without using a plugin\u003c/strong\u003e\u003c/summary\u003e\n\nSimply navigate directly to: `https://[store_id].myshopify.com/admin/bulk?resource_name=Product\u0026edit=metafields.sanity.product_sync`\n\n_(making sure to replace [store_id] with your Shopify Store ID)_\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eHow do I properly hand-off a Vercel project to the client?\u003c/strong\u003e\u003c/summary\u003e\n\nWhile not as easy as Netlify, what I prefer to do is:\n1. Have the client create their own [Vercel account](https://vercel.com/signup)\n2. At the time of writing, Github connections can only be connected to one Vercel account at a time, so have the client [create a Github account](https://github.com/join) if they don't already have one, and transfer the project repo to them\n3. Delete the dev project from your own Vercel account (this is so the client can utilize the project name and domain you were using during dev)\n4. You or the client can now connect their newly transferred Github repo to their own Vercel account!\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n# 💯 Shoutouts\nHuge ups to the following talented and rad folks who helped in countless ways. Thank you for all the support, code contributions, and for putting up with my _insane_ questions around headless shopify woes!\n- 🔥 [@tuckercs](https://github.com/tuckercs)\n- 🍝 [@iamkevingreen](https://github.com/iamkevingreen)\n- 🧈 [@mikehwagz](https://github.com/mikehwagz)\n- 😎 [@dictions](https://github.com/dictions)\n\n\u003cbr /\u003e\n\n# 🤝 License\n\n### [MIT](LICENSE)\n\u003e [nickdimatteo.com](https://nickdimatteo.com) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Github [@ndimatteo](https://github.com/ndimatteo) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Instagram [@ndimatteo](https://instagram.com/ndimatteo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrob%2Fpage-builder-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrob%2Fpage-builder-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrob%2Fpage-builder-demo/lists"}