Next Shopify Storefront

A real-world Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.

| ☝️ See my Bootstrap Shopify Theme. It's a free Shopify Theme built with Bootstrap, BEM, Theme Tools, Swiper, Gulp, Parcel, Liquid, SASS, PostCSS, ESNext, ... and Passion. | |-|

Experience

• Using React Hooks instead of React.Component to create stateful components.
• Using Redux Starter Kit to do more work with less code.
• Making Redux working with NextJS with withRedux.tsx higher order component.
• Using react-redux hooks instead of react-redux connect to read and update the store's state.
• Using TypeScript static types for Component Props, Reducers, Actions & Services.
• Using GraphQL Code Generator to generate models for TypeScript.
• Working with GraphQL tags faster with Apollo GraphQL for VS Code extension.
• Making Apollo Client working with NextJS including server side and client side.
• Working with Shopify Storefront GraphQL API.
• Making Material UI working with NextJS with withMui.tsx higher order component.
• Configuring Eslint & Prettier to lint and format the source code.
• Deploying NodeJS applications on Heroku.

Hit the Star button if you love this project ⭐️

Demo

You can visit here to see the demo: https://next-shopify-storefront.herokuapp.com/

Usage

Install dependencies

npm install

For development

npm run dev

For production

npm run build
npm start

Related Projects

• Bootstrap Shopify Theme • A free Shopify Theme built with Bootstrap, BEM, Theme Tools, Swiper, Gulp, Parcel, Liquid, SASS, PostCSS, ESNext, ... and Passion.
• Shopify Theme Customizer • An effective development tool for customizing existing Shopify themes. It's built with Gulp, Theme Kit, Theme Check, BrowserSync, ... and Passion.
• Shopify Data Faker • A Shopify development tool for generating dummy store data.