{"id":13614866,"url":"https://github.com/hygraph/hygraph-commerce-starter","last_synced_at":"2025-04-07T13:08:06.804Z","repository":{"id":39999908,"uuid":"333799114","full_name":"hygraph/hygraph-commerce-starter","owner":"hygraph","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-18T18:28:49.000Z","size":327,"stargazers_count":174,"open_issues_count":7,"forks_count":69,"subscribers_count":23,"default_branch":"main","last_synced_at":"2025-03-31T11:05:19.526Z","etag":null,"topics":["graphcms","graphql","nextjs","reference-implementation","stripe","tailwindcss"],"latest_commit_sha":null,"homepage":"https://commerce.withheadlesscms.com","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/hygraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2021-01-28T15:24:09.000Z","updated_at":"2025-02-07T20:39:02.000Z","dependencies_parsed_at":"2024-11-07T23:32:01.088Z","dependency_job_id":"bef08e45-1977-47b0-8b24-f98ffe8a0caa","html_url":"https://github.com/hygraph/hygraph-commerce-starter","commit_stats":null,"previous_names":["graphcms/graphcms-commerce-starter"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Fhygraph-commerce-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Fhygraph-commerce-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Fhygraph-commerce-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hygraph%2Fhygraph-commerce-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hygraph","download_url":"https://codeload.github.com/hygraph/hygraph-commerce-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247657281,"owners_count":20974345,"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":["graphcms","graphql","nextjs","reference-implementation","stripe","tailwindcss"],"created_at":"2024-08-01T20:01:06.549Z","updated_at":"2025-04-07T13:08:06.782Z","avatar_url":"https://github.com/hygraph.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Hygraph Commerce Starter\n\nBuild modern, SEO ready commerce storefronts with Hygraph, Next.js, Stripe and Tailwind CSS\n\n[![Clone project](https://graphcms.com/button)](https://app.graphcms.com/clone/d6ae678601534be5a7bde7fba69acd24?name=Commerce%20Shop)\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FGraphCMS%2Fgraphcms-commerce-starter\u0026env=HYGRAPH_MUTATION_TOKEN,HYGRAPH_QUERY_TOKEN,HYGRAPH_ENDPOINT,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,STRIPE_SECRET_KEY\u0026envDescription=Stripe%20keys%20and%20GraphCMS%20tokens\u0026envLink=https%3A%2F%2Fgithub.com%2FGraphCMS%2Fgraphcms-commerce-starter%23usage\u0026demo-title=GraphCMS%20Commerce%20Starter\u0026demo-description=Build%20modern%2C%20SEO%20ready%20commerce%20storefronts%20with%20GraphCMS%2C%20Next.js%2C%20Stripe%20and%20Tailwind%20CSS\u0026demo-url=https%3A%2F%2Fcommerce.withheadlesscms.com)\n\n## About\n\nThis project is an example of how to build fully-functioning Next.js commerce storefront with Hygraph and Stripe. View the demo on [https://commerce.withheadlesscms.com/](https://commerce.withheadlesscms.com/).\n\n## Features\n\n- Fully localized product catalogue built with [Hygraph localization](https://hygraph.com/content-localization) and [Next.js](https://nextjs.org/docs/advanced-features/i18n-routing).\n- Pre-rendered catalogue pages via [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) and [`getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation).\n- Dynamic client-side data fetching via [SWR](https://swr.vercel.app).\n- Localized shopping cart with [`react-use-cart`](https://github.com/notrab/react-use-cart).\n- Hosted checkout and payment flow with [Stripe Checkout](https://stripe.com/docs/payments/checkout).\n- Use the [Hygraph mutation API](https://hygraph.com/mutation-api) with [API Routes](https://nextjs.org/docs/api-routes/introduction) to create orders on successful checkout (via webhook).\n- Multiple currency support.\n\n## Usage\n\n\u003e This reference application requires a Stripe account\n\n1. Clone the repository with [`degit`](https://github.com/Rich-Harris/degit) and install project dependencies.\n\n```bash\nnpx degit Hygraph/hygraph-commerce-starter#main hygraph-commerce-starter\ncd hygraph-commerce-starter\nnpm install\n```\n\n2. Create a new Hygraph project using the `Commerce Starter` template.\n\n3. Add a `.env` file by cloning `.env.sample` and providing the required variable values.\n\n\u003e It is recommended you create separate Hygraph [auth tokens](https://hygraph.com/docs/authorization#permanent-auth-tokens) to handle querying and mutating data.\n\n```\nHYGRAPH_MUTATION_TOKEN=\nHYGRAPH_QUERY_TOKEN=\nHYGRAPH_ENDPOINT=\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=\nSTRIPE_SECRET_KEY=\nSTRIPE_WEBHOOK_SIGNING_SECRET=\n```\n\n4. Setup a [Stripe webhook](https://stripe.com/docs/payments/handling-payment-events) for the `checkout.session.completed` event to order to enable Hygraph fulfilment via the mutation API.\n\n5. Configure support for more locales or currencies in [`hygraph.config.js`](hygraph.config.js) if required. Learn more [here](#configuration).\n\n6. Run `npm run dev`\n\n## Configuration\n\nProject configuration for supported locales and currencies is managed in [`hygraph.config.js`](hygraph.config.js).\n\n\u003e It is important that the `locales` array reflects the enabled locales in your Hygraph project.\n\n```js\nmodule.exports = {\n  locales: [\n    {\n      value: 'en',\n      label: 'English',\n      default: true\n    },\n    {\n      value: 'de',\n      label: 'German'\n    }\n  ],\n  currencies: [\n    {\n      code: 'GBP',\n      default: true\n    },\n    {\n      code: 'EUR'\n    }\n  ]\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhygraph%2Fhygraph-commerce-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhygraph%2Fhygraph-commerce-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhygraph%2Fhygraph-commerce-starter/lists"}