https://github.com/VienDinhCom/next-shopify-storefront
🛍 A Shopping Cart built with TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,... and Shopify Storefront GraphQL API.
https://github.com/VienDinhCom/next-shopify-storefront
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
Last synced: 25 days ago
JSON representation
🛍 A Shopping Cart built with TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,... and Shopify Storefront GraphQL API.
- Host: GitHub
- URL: https://github.com/VienDinhCom/next-shopify-storefront
- Owner: VienDinhCom
- License: mit
- Created: 2019-05-08T09:42:33.000Z (almost 6 years ago)
- Default Branch: v3
- Last Pushed: 2024-11-01T15:27:57.000Z (5 months ago)
- Last Synced: 2025-03-16T20:07:16.000Z (29 days ago)
- 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
- Language: TypeScript
- Homepage: https://next-shopify-storefront.vercel.app
- Size: 1.77 MB
- Stars: 786
- Watchers: 23
- Forks: 142
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - VienDinhCom/next-shopify-storefront - 🛍 A Shopping Cart built with TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,... and Shopify Storefront GraphQL API. (TypeScript)
README
# 🛍 Next Shopify Storefront
A **[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).
## Experience
When I started this project, I had no idea how complex building a storefront could be. But step by step, I figured it out.
I 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.
[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.
Then 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.
It 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.
If you like this project, hit the **STAR** button to bookmark it ⭐️
## Demonstration
You can visit here to see the demo: https://next-shopify-storefront.vercel.app/
## Installation
Clone the source code into your computer.
```bash
git clone https://github.com/VienDinhCom/next-shopify-storefront.git
```
**This project was developed with Node 18 and NPM 10.**
To set up a compatible environment, please download [Volta](https://github.com/volta-cli/volta) and run `volta setup`.
Then, install the project's dependencies.
```bash
npm install
```
## Usage
First, you need to set the below environment variables in the `.env` file or your deployment platforms.
- `NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN`
- `NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN`
- `NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION`
You can follow the [Shopify Storefront GraphQL API](https://shopify.dev/api/storefront/getting-started) documentation to get Storefront API information.
### Develop
Develop the project in development mode.
```bash
npm run dev
```
### Build
Build the project in production mode.
```bash
npm run build
```
### Start
Start the project in production mode.
```bash
npm run start
```
### Lint
Analyze the code to find problems with `eslint` and `prettier`.
```bash
npm run lint
```
Automatically fix problems.
```bash
npm run fix
```
## Visual Studio Code Extensions
To speed up your productivity, you can install these extensions:
- [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss)
## Tutorials
- [How Do I Organize a Sustainable Next.js Project?](https://github.com/Maxvien/next-shopify-storefront/issues/68)
- [How Do I Handle Typesafe Modular Data Fetching in Next.js?](https://github.com/Maxvien/next-shopify-storefront/issues/69)
- [How Do I Interact Safely with GraphQL API in Next.js?](https://github.com/Maxvien/next-shopify-storefront/issues/70)
- [How Do I Implement Dynamic Variant Selector for Shopify in Next.js?](https://github.com/Maxvien/next-shopify-storefront/issues/71)
## Related Projects
- **[Shopify Data Faker](https://github.com/Maxvien/shopify-data-faker)** • A Shopify development tool for generating dummy store data.
- **[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.
- **[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.
- **[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.
## Star History
[](https://star-history.com/#VienDinhCom/next-shopify-storefront&Date)