��
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_ENDPOINTNEXT_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:
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.
-
shopify Introduction 介绍 Hello, and welcome to all things Shopify! My colleague and I have spent the last 3 months building and scaling a Shopify store for a client. Shopify has created an ecosystem th
-
《shopify theme 多语言国际化开发》 《shopify theme 跨境电商开发 liquid》 《本地编辑shopify主题的方式一》 《shopify cli 的命令》 使用shopify help <command> 显示有关特定命令的详细信息。 login：通过向商店或合作伙伴组织进行身份验证来登录Shopify CLI 用法：shopify login [--store=
-
Dawn 代表了一种以 HTML 为先，只需要 JavaScript 的主题开发方法。它是 Shopify 第一个内置性能、灵活性和 Online Store 2.0 功能的可用主题源，并作为构建 Shopify 主题的参考。 特性： 最纯粹形式的网络原生 精益、快速和可靠 JavaScript 不是必需的 服务器呈现 功能性 入门 Fork 存储库并克隆它： git clone git@gith
-
Shopify Packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and compatible with existing Shopify sites. Features Webp
-
Laravel Shopify App A full-featured Laravel package for aiding in Shopify App development, similar to shopify_app for Rails. Works for Laravel 7 and up. Table of Contents * Wiki pages Goals Documentat
-
Polaris 是 Shopify 的体验平台，该存储库专注于集中系统、文档和基础。 如何使用这个 repo 确保计算机上安装了 Git 和 Node.js，然后运行以下命令开始： $ git clone https://github.com/Shopify/polaris.git # git clone repository$ cd polaris
-
Shopify ThemeKit - Webpack Development tool for Shopify using webpack and themekit. Check out the node package version: Shopify Packer Requirements Getting Started Theme files Commands Features Ready
-
generator-shopify-nextjs A Yeoman generator for Serverless Shopify apps using Next.js, Koa, Prisma GraphQL & Shopify's Polaris The Stack next.js koa koa-shopify-auth koa-shopify-graphql-proxy Polaris