A Shopping Cart built with TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API, ... and Material UI.
These are my experiences 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 βοΈ
You can visit here to see the demo: https://next-shopify-storefront.vercel.app/
Clone the source code into your computer.
git clone https://github.com/maxvien/next-shopify-storefront.git
Install the project's dependencies.
yarn install
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 the project in development mode.
yarn dev
Build the project in production mode.
yarn build
Start the project in production mode.
yarn start
Analyze the code to find problems with eslint
and prettier
.
yarn lint
Automatically fix problems.
yarn fix
To speed up your productivity, you can install these extensions:
- 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.