gancena / nextjs-tailwind-shopify-storefront

Starter template for a Shopify Headless React Storefront using TailwindCSS

Next Shopify Storefront

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

Technologies

• React Hooks instead of React.Component to create stateful components
• TypeScript static types for Component Props, Actions & Services
• GraphQL Code Generator to generate models for TypeScript
• GraphQL with Apollo GraphQL for VS Code extension
• Apollo Client working with Next.js including server side and client side
• Shopify Storefront GraphQL API.
• TailwindCSS for the UI
• Eslint & Prettier to lint and format the source code.
• Deployment on Heroku

Hit the Star button if you love this project ⭐️

Checklist

✅   TailwindCSS
✅   Display products
✅   Product pages
✅   Add to cart functionality
🔲   Pagination
✅   Deploy to Heroku

Demo

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

Usage

Install dependencies

npm install

Rename .env.example to .env and add values for Shopify Storefront access token and the URI GraphQL endpoint

REACT_APP_STOREFRONT_TOKEN=
REACT_APP_STORE_URI=

For development

npm run dev

For production

npm run build
npm start