🛍 Next Shopify Storefront

A Shopping Cart built with TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API, ... and Material UI.

Experience

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

• Designing & Building the Storefront from Scratch.
• Using Emotion to Write Component-scoped Styles.
• Using TypeScript to Create Type-safe React Components.
• Using React Query to Fetch, Cache and, Update Data.
• Using Next.js for Static Generation and Server-Side Rendering.
• Using Next SEO to Manage Search Engine Optimization More Easily.
• Using Material UI to Create a Beautiful User Interface.
• Using Swiper to Create Beautiful, Touchable, Responsive Sliders.
• Using React Use Hooks to Speed Up Component Development.
• Using CSS Media Queries to Create a Mobile-First and Responsive Design.
• Using GraphQL Request to Interact with Shopify Storefront GraphQL API.
• Using GraphQL Code Generator to Generate TypeScript GraphQL Clients.
• 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.

yarn install

Usage

First, you need to set the below environment variables in the .env file or your deployment platforms.

• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_ENDPOINT
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN

You can follow the Shopify Storefront GraphQL API documentation to get Storefront's API Endpoint and Access Token.

Develop

Develop the project in development mode.

yarn dev

Build

Build the project in production mode.

yarn build

Start

Start the project in production mode.

yarn start

Lint

Analyze the code to find problems with eslint and prettier.

yarn lint

Automatically fix problems.

yarn fix

Visual Studio Code Extensions

To speed up your productivity, you can install these extensions:

• Eslint
• Prettier
• Apollo GraphQL
• Material Icon Theme
• Visual Studio IntelliCode

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 (v1) • A Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.