yan.ad

Team Project

Shopify App TanStack React

A modern Shopify App starter built with React and TanStack, featuring authentication, webhooks, Polaris, App Bridge, and a production-ready structure. Inspired by @shopify/shopify-app-react, but with TanStack best practices and DX.

View on GitHub

Tech Stack

react shopify typescript javascript

Teammates

yan-ad
Shopify App TanStack React

Problem Summary

Shopify provides APIs, CLI, and templates, but the app development experience is often fragmented. Most official starters are built for Remix or Next.js, and the React ecosystem lacks a truly modern, flexible starter that leverages TanStack's best-in-class libraries. Developers end up re-implementing authentication, embedded context, and API patterns from scratch.

Solution

Shopify App TanStack React offers a ready-to-use foundation for building Shopify Apps with React and the TanStack suite. It's not just a boilerplate, but a real-world, production-tested foundation that is easy to adapt and extend.

Key Features

  • Modern React + TanStack: Uses TanStack Router, Query, Table, and more for best-in-class DX and scalability.
  • Production-ready authentication: Shopify OAuth flow fully integrated.
  • Embedded App support: Works seamlessly inside Shopify Admin with App Bridge.
  • Polaris UI: Native Shopify UI components out of the box.
  • API integration layer: Clean separation of API logic using TanStack Query.
  • TypeScript-first: Fully typed for safety and maintainability.
  • Deployment-ready: Works on Vercel, Render, and other modern platforms.

Quick Start

  1. Clone the repo: github.com/yan-ad/shopify-app-tanstack
  2. Follow the README to set up your Shopify API key & secret.
  3. Run the development server (pnpm dev or yarn dev) and start building your app.
  4. Deploy to Vercel, Render, or your preferred platform.

Demo: (coming soon)

Benefits for Developers

  • No need to reinvent authentication, embedded context, or API patterns.
  • Modern, scalable codebase with TanStack best practices.
  • Focus on business features, not boilerplate.
  • Transparent, easy to debug, and production-ready.

Why Not Just Another Boilerplate?

This project was born from real-world needs of building Shopify Apps with React and TanStack. Every new project faces the same issues: authentication, API, embedded context, deployment. With this starter, everything is ready—just focus on your main features.

Shopify App TanStack React helps developers build modern Shopify Apps with React and TanStack faster, safer, and with a clear structure. No more repeating the same setup—just focus on business value and core features.