{"id":13440541,"url":"https://github.com/VienDinhCom/next-shopify-storefront","last_synced_at":"2025-03-20T10:31:21.117Z","repository":{"id":35780061,"uuid":"185577190","full_name":"VienDinhCom/next-shopify-storefront","owner":"VienDinhCom","description":"🛍  A Shopping Cart built with TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,... and Shopify Storefront GraphQL API.","archived":false,"fork":false,"pushed_at":"2024-11-01T15:27:57.000Z","size":1851,"stargazers_count":786,"open_issues_count":10,"forks_count":142,"subscribers_count":23,"default_branch":"v3","last_synced_at":"2025-03-16T20:07:16.000Z","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}},"created_at":"2019-05-08T09:42:33.000Z","updated_at":"2025-02-27T08:53:02.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":244594963,"owners_count":20478377,"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-07-31T03:01:23.742Z","updated_at":"2025-03-20T10:31:21.112Z","avatar_url":"https://github.com/VienDinhCom.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Example Apps"],"sub_categories":["JavaScript Examples"],"readme":"# 🛍 Next Shopify Storefront\n\nA **[Shopping Cart](https://github.com/Maxvien/next-shopify-storefront)** built with [TypeScript](https://www.typescriptlang.org), [Tailwind CSS](https://tailwindcss.com), [Headless UI](https://headlessui.com), [Next.js](https://nextjs.org), [React.js](https://react.dev), [Shopify Hydrogen React](https://shopify.dev/docs/api/hydrogen-react),... and [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 out.\n\nI designed and built everything from scratch—structuring data, styling components, making sure everything loads fast. I used [GraphQL Zeus](https://github.com/graphql-editor/graphql-zeus) to talk to [Shopify’s GraphQL API](https://shopify.dev/docs/api/storefront), [Shopify Hydrogen](https://shopify.dev/docs/custom-storefronts/hydrogen-react) to power the storefront, and [Next.js](https://nextjs.org) for performance.\n\n[Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.com/) made styling smooth. [TypeScript](https://www.typescriptlang.org/) kept everything safe and predictable. [React Use](https://github.com/streamich/react-use) Hooks sped up development. I even built [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. [Swiper](https://swiperjs.com/) made touch interactions feel natural. [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 a 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 18 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 get 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\n\nAnalyze the code to find problems with `eslint` and `prettier`.\n\n```bash\nnpm run lint\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 dummy store data.\n- **[Bootstrap Shopify Theme](https://github.com/Maxvien/bootstrap-shopify-theme/tree/v1)** • A free Shopify Theme built 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 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 with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=VienDinhCom/next-shopify-storefront\u0026type=Date)](https://star-history.com/#VienDinhCom/next-shopify-storefront\u0026Date)\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"}