{"id":14984133,"url":"https://github.com/viendinhcom/next-shopify-storefront","last_synced_at":"2025-12-01T03:05:58.477Z","repository":{"id":35780061,"uuid":"185577190","full_name":"VienDinhCom/next-shopify-storefront","owner":"VienDinhCom","description":"A shopping cart using TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Hydrogen, and GraphQL API.","archived":false,"fork":false,"pushed_at":"2025-03-21T03:01:25.000Z","size":1986,"stargazers_count":796,"open_issues_count":0,"forks_count":141,"subscribers_count":23,"default_branch":"v3","last_synced_at":"2025-05-15T04:04:24.661Z","etag":null,"topics":["eslint","graphql","graphql-codegen","graphql-zeus","headlessui","hydrogen-react","incremental-static-regeneration","nextjs","prettier","reactjs","seo","server-side-rendering","shopify","shopify-hydrogen","shopify-storefront-api","shopify-storefronts","storefront","tailwindcss","typesafe-data-fetching","typescript"],"latest_commit_sha":null,"homepage":"https://next-shopify-storefront.vercel.app","language":"TypeScript","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/VienDinhCom.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,"zenodo":null}},"created_at":"2019-05-08T09:42:33.000Z","updated_at":"2025-05-08T10:20:51.000Z","dependencies_parsed_at":"2024-09-24T15:27:51.609Z","dependency_job_id":"d30f597b-0824-4fed-a3a0-7217c6e800e8","html_url":"https://github.com/VienDinhCom/next-shopify-storefront","commit_stats":{"total_commits":497,"total_committers":6,"mean_commits":82.83333333333333,"dds":"0.028169014084507005","last_synced_commit":"c27ae13b339cd8a3e8a533f544e3d0921c4f9eb4"},"previous_names":["maxvien/next-shopify-storefront"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fnext-shopify-storefront","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fnext-shopify-storefront/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fnext-shopify-storefront/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fnext-shopify-storefront/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VienDinhCom","download_url":"https://codeload.github.com/VienDinhCom/next-shopify-storefront/tar.gz/refs/heads/v3","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270641,"owners_count":22042858,"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":["eslint","graphql","graphql-codegen","graphql-zeus","headlessui","hydrogen-react","incremental-static-regeneration","nextjs","prettier","reactjs","seo","server-side-rendering","shopify","shopify-hydrogen","shopify-storefront-api","shopify-storefronts","storefront","tailwindcss","typesafe-data-fetching","typescript"],"created_at":"2024-09-24T14:08:30.950Z","updated_at":"2025-12-01T03:05:58.472Z","avatar_url":"https://github.com/VienDinhCom.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛍 Next Shopify Storefront\n\nA **[Shopping Cart](https://github.com/Maxvien/next-shopify-storefront)** built with\n[ESMate](https://github.com/VienDinhCom/esmate), [TypeScript](https://www.typescriptlang.org),\n[Tailwind CSS](https://tailwindcss.com), [Headless UI](https://headlessui.com), [Next.js](https://nextjs.org),\n[React.js](https://react.dev), [Shopify Hydrogen React](https://shopify.dev/docs/api/hydrogen-react), and\n[Shopify Storefront GraphQL API](https://shopify.dev/docs/api/storefront).\n\n![Next Shopify Storefront - GitHub Repo Stars](https://img.shields.io/github/stars/maxvien/next-shopify-storefront?label=Stars)\n![Next Shopify Storefront - GitHub forks](https://img.shields.io/github/forks/maxvien/next-shopify-storefront?label=Forks)\n![Next Shopify Storefront - Started Years](https://img.shields.io/badge/Since-2019-blue?style=flat)\n\n## Experience\n\nWhen I started this project, I had no idea how complex building a storefront could be. But step by step, I figured it\nout.\n\nI designed and built everything from scratch—structuring data, styling components, making sure everything loads fast. I\nused [GraphQL Zeus](https://github.com/graphql-editor/graphql-zeus) to talk to\n[Shopify’s GraphQL API](https://shopify.dev/docs/api/storefront),\n[Shopify Hydrogen](https://shopify.dev/docs/custom-storefronts/hydrogen-react) to power the storefront, and\n[Next.js](https://nextjs.org) for performance.\n\n[Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.com/) made styling smooth.\n[TypeScript](https://www.typescriptlang.org/) kept everything safe and predictable.\n[React Use](https://github.com/streamich/react-use) Hooks sped up development. I even built\n[Shopify Utilities](https://www.npmjs.com/package/@maxvien/shopify) to make selecting product variants easier.\n\nThen came [SEO](https://www.npmjs.com/package/next-seo), best practices, and refining the user experience.\n[Swiper](https://swiperjs.com/) made touch interactions feel natural. [ESMate](https://github.com/VienDinhCom/esmate),\n[ESlint](https://eslint.org/) and [Prettier](https://prettier.io/) kept the code clean.\n\nIt was a process of learning, breaking things, fixing them, and refining. And in the end, it wasn’t just about building\na store—it was about building something that works beautifully.\n\nIf you like this project, hit the **STAR** button to bookmark it ⭐️\n\n## Demonstration\n\nYou can visit here to see the demo: https://next-shopify-storefront.vercel.app/\n\n## Installation\n\nClone the source code into your computer.\n\n```bash\ngit clone https://github.com/VienDinhCom/next-shopify-storefront.git\n```\n\n**This project was developed with Node 22 and NPM 10.**\u003cbr\u003e\n\nTo set up a compatible environment, please download [Volta](https://github.com/volta-cli/volta) and run `volta setup`.\n\nThen, install the project's dependencies.\n\n```bash\nnpm install\n```\n\n## Usage\n\nFirst, you need to set the below environment variables in the `.env` file or your deployment platforms.\n\n- `NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN`\n- `NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN`\n- `NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION`\n\nYou can follow the [Shopify Storefront GraphQL API](https://shopify.dev/api/storefront/getting-started) documentation to\nget Storefront API information.\n\n### Develop\n\nDevelop the project in development mode.\n\n```bash\nnpm run dev\n```\n\n### Build\n\nBuild the project in production mode.\n\n```bash\nnpm run build\n```\n\n### Start\n\nStart the project in production mode.\n\n```bash\nnpm run start\n```\n\n### Lint \u0026 Format\n\nAnalyze the code to find problems with `eslint` and `prettier`.\n\n```bash\nnpm run check\n```\n\nAutomatically fix problems.\n\n```bash\nnpm run fix\n```\n\n## Visual Studio Code Extensions\n\nTo speed up your productivity, you can install these extensions:\n\n- [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n- [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)\n- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)\n- [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss)\n\n## Tutorials\n\n- [How Do I Organize a Sustainable Next.js Project?](https://github.com/Maxvien/next-shopify-storefront/issues/68)\n- [How Do I Handle Typesafe Modular Data Fetching in Next.js?](https://github.com/Maxvien/next-shopify-storefront/issues/69)\n- [How Do I Interact Safely with GraphQL API in Next.js?](https://github.com/Maxvien/next-shopify-storefront/issues/70)\n- [How Do I Implement Dynamic Variant Selector for Shopify in Next.js?](https://github.com/Maxvien/next-shopify-storefront/issues/71)\n\n## Related Projects\n\n- **[Shopify Data Faker](https://github.com/Maxvien/shopify-data-faker)** • A Shopify development tool for generating\n  dummy store data.\n- **[Bootstrap Shopify Theme](https://github.com/Maxvien/bootstrap-shopify-theme/tree/v1)** • A free Shopify Theme built\n  with Bootstrap, BEM, Liquid, Sass, ESNext, Theme Tools, ... and Webpack.\n- **[Next Shopify Storefront (v2)](https://github.com/Maxvien/next-shopify-storefront/tree/v2)** • A Shopping Cart built\n  with TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API, ... and Material UI.\n- **[Next Shopify Storefront (v1)](https://github.com/Maxvien/next-shopify-storefront/tree/v1)** • A Shopping Cart built\n  with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviendinhcom%2Fnext-shopify-storefront","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviendinhcom%2Fnext-shopify-storefront","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviendinhcom%2Fnext-shopify-storefront/lists"}