• Stars
    star
    722
  • Rank 62,738 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ› A Shopping Cart built with TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,... and Shopify Storefront GraphQL API.

๐Ÿ› 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.

Next Shopify Storefront - GitHub Repo Stars Next Shopify Storefront - GitHub forks Next Shopify Storefront - Started Years

Tutorials

Experience

These are my experiences when I have been working on this project:

If you like this project, hit the STAR button to bookmark it โญ๏ธ

Services

I help agencies and freelancers to develop Next.js headless cms/commerce websites. Do you have a Web Design? Do you have a Headless API? I am here at your service to help you grow your business and earn profits.

Work with Me

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_DOMAIN
  • NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
  • NEXT_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.

Star History

Star History Chart

More Repositories

1

supermemo

๐Ÿง‘โ€๐ŸŽ“ A JavaScript/TypeScript implementation of the SuperMemo 2 (SM2) algorithm for spaced based repetition flashcards.
TypeScript
282
star
2

bootstrap-shopify-theme

๐Ÿ› A free Shopify Theme built with Bootstrap, BEM, Liquid, Sass, ESNext, Theme Tools, ... and Webpack.
Liquid
128
star
3

next-full-stack

๐Ÿ›  Effective Full Stack Development with Next.js
TypeScript
17
star
4

shopify-data-faker

๐Ÿ› A Shopify development tool for generating dummy store data.
TypeScript
14
star
5

shopify-theme-customizer

๐Ÿ› An effective development tool for customizing existing Shopify themes. It's built with Gulp, Theme Kit, Theme Check, LiveReload, ... and Passion.
Liquid
9
star
6

jsonfile

๐Ÿ“š Easily read/write JSON files in Deno
TypeScript
8
star
7

cool-store

๐Ÿ˜Ž CoolStore is an immutable state store built on top of ImmerJS and RxJS.
TypeScript
6
star
8

hackintosh-lenovo-z5070

๐Ÿ–ฅ How to install Mac OS El Capitan 10.11.04 on Lenovo Z50-70
Rich Text Format
4
star
9

teach-bem-css

HTML
3
star
10

angular-services-example

TypeScript
2
star
11

unisafe

Remove invalid Unicode characters out of your string and JSON with unisafe
JavaScript
2
star
12

next-ionic-core

How to use IonicCore in NextJS with TypeScript support?
TypeScript
2
star
13

apollo-codegen-for-shopify-example

Apollo Codegen for Shopify Example
TypeScript
2
star
14

apollo-modulizer

๐Ÿš€ Modularizing your Apollo GraphQL schema code
JavaScript
2
star
15

psd2html

๐Ÿ›  A set of tools for faster and easier front-end development.
JavaScript
2
star
16

env-kit

Env Kit for Node Development
TypeScript
1
star
17

sunfrog-uploader

JavaScript
1
star
18

universal-formdata

TypeScript
1
star
19

sentence-to-clauses

Python
1
star
20

drupal-docker

Drupal Development with Docker
PHP
1
star
21

demp

โš“๏ธ DEMP Stack: Docker + Nginx + MySQL + PHP
PHP
1
star
22

maxvien.github.io

JavaScript
1
star
23

graphql-code-generator-for-shopify-example

GraphQL Code Generator for Shopify Example
TypeScript
1
star
24

angular-nest-fullstack

Angular Nest Fullstack
HTML
1
star
25

next-boilerplate

JavaScript
1
star
26

angular-examples

1
star
27

heroku-corenlp

Deploy CoreNLP on Heroku
Dockerfile
1
star
28

freecodecamp

Shell
1
star
29

next-apollo-fullstack

A Starting Point for Full Stack Development with Apollo, Next & TypeScript
TypeScript
1
star
30

electron-updater-example

JavaScript
1
star
31

learn-angular

TypeScript
1
star
32

working-with-supertest

Tesing Express API with Jest & Supertest
TypeScript
1
star
33

fison

Post/Upload JSON and Files in a Single Request.
TypeScript
1
star
34

react-boilerplate

๐Ÿš€ Using ES6, Flow, Prettier, and Eslint for React development
JavaScript
1
star
35

nest-graphql-base

TypeScript
1
star
36

next-gqless-example

Next.js GQLess SSR Example
TypeScript
1
star
37

jquery-helpers

๐Ÿ”Œ A set of jQuery Helpers for front-end development.
JavaScript
1
star
38

use-mousetrap

โŒจ๏ธ A simple Mousetrap hook for handling keyboard shortcuts in React.
TypeScript
1
star
39

eslint-config-next-app

ESLint configuration for Next.js
JavaScript
1
star
40

node-boilerplate

Using ES6, Jest, Flow, Prettier, and Eslint for NodeJS development
JavaScript
1
star
41

learning

My Learning Examples & Projects
1
star
42

dictation

JavaScript
1
star
43

next-base

TypeScript
1
star
44

emotion-css

Overriding Bootstrap, Foundation, Semantic UI, ... and other CSS styles with Emotion
JavaScript
1
star
45

teach-git

1
star
46

express-mvc

JavaScript
1
star
47

samscloud

HTML
1
star
48

react-pdf-reader

Reader Zone Clone
JavaScript
1
star
49

wpc

PHP
1
star
50

docker-scripts

Docker Scripts for Quick Deployment
Shell
1
star
51

cookie-maker

This is a meta-package of 'cookie' and 'js-cookie' with TypeScript support.
TypeScript
1
star
52

hugo-c

Partial-based (component-based) Workspace for Hugo CMS Development
JavaScript
1
star
53

with-elements

Select existing HTML elements and run the callback with each element.
TypeScript
1
star