🛍 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.
Tutorials
- How Do I Organize a Sustainable Next.js Project?
- How Do I Handle Typesafe Modular Data Fetching in Next.js?
- How Do I Interact Safely with GraphQL API in Next.js?
- How Do I Implement Dynamic Variant Selector for Shopify in Next.js?
Experience
These are my experiences when I have been working on this project:
- Designing & Building the Storefront from Scratch.
- Creating Next Utilities for Type-safe Modular Data Fetching.
- Creating Shopify Utilities to Simplify Variant Selecting.
- Using GraphQL Zeus to Interact with Storefront API.
- Using Shopify Hydrogen to Implement Storefront Features.
- Using Tailwind CSS & Headless UI to Build the Storefront UI.
- Using Next.js for Incremental Static Regeneration.
- Using Next SEO to Implement Search Engine Optimization.
- Using TypeScript to Safely Create React Hooks, and Components.
- Using React Use Hooks to Speed Up Component Development.
- Using Swiper to Create Beautiful, Touchable, Responsive Sliders.
- Using ESlint, Prettier to Follow Next.js Best Practices.
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.
git clone https://github.com/maxvien/next-shopify-storefront.git
Install the project's dependencies.
npm install
Usage
First, you need to set the below environment variables in the .env file or your deployment platforms.
NEXT_PUBLIC_SHOPIFY_STORE_DOMAINNEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKENNEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION
You can follow the Shopify Storefront GraphQL API documentation to get Storefront API information.
Develop
Develop the project in development mode.
npm run dev
Build
Build the project in production mode.
npm run build
Start
Start the project in production mode.
npm run start
Lint
Analyze the code to find problems with eslint and prettier.
npm run lint
Automatically fix problems.
npm run fix
Visual Studio Code Extensions
To speed up your productivity, you can install these extensions:
Related Projects
- Shopify Data Faker • A Shopify development tool for generating dummy store data.
- Bootstrap Shopify Theme • A free Shopify Theme built with Bootstrap, BEM, Liquid, Sass, ESNext, Theme Tools, ... and Webpack.
- Next Shopify Storefront (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) • A Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.
