🛍 Next Shopify Storefront

This was bootstrapped with React, TypeScript, Next and Material UI.

Experience

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

• 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.
• Using PlanetScale to scale the DB.

Installation

Clone the source code into your computer.

git clone [email protected]:fredcarterwolf/shopify-react-nextjs.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
• Cloudflare
• Vercel