storefront-api-examples - Example custom storefront applications built on Shopify's Storefront API

  •        226

Shopify's Storefront API allows you to build custom ecommerce experiences.Each directory is a self-contained example application that demonstrates usage of the Storefront API. The examples are built on both Shopify specific libraries and popular open source frameworks (React, Ember, etc).

https://help.shopify.com/api/storefront-api
https://github.com/Shopify/storefront-api-examples

Tags
Implementation
License
Platform

   




Related Projects

Saleor Commerce - A headless, GraphQL-first e-commerce platform delivering ultra-fast, dynamic, personalized shopping experiences

  •    Python

Saleor is a rapidly-growing open source e-commerce platform that has served high-volume companies from branches like publishing and apparel since 2012. Based on Python and Django, the latest major update introduces a modular front end powered by a GraphQL API and written with React and TypeScript.

apollo-universal-starter-kit - Apollo 2 Universal Starter Kit — GraphQL React JavaScript app boilerplate for Mobile, Server and Web where code for all platforms built with Webpack to enable max code reuse, stack: Apollo, GraphQL, React 16, React Native, Expo, Express, Knex, SQLite, Twitter Bootstrap, Babel, Webpack

  •    Javascript

Apollo Universal Starter Kit is a SEO friendly boilerplate for Universal Mobile and Web app development built on top of Apollo, GraphQL, React 16, React Native, Expo, Redux, Express with SQL storage support, for styling Twitter Bootstrap, NativeBase and Ant Design integration. Hot Code Reload of back end & front end using Webpack and Hot Module Replacement to reflect your changes instantly and help you stay productive. This starter kit adds full React Native integration, with Webpack as a packager and Expo. No native code compilation tools are needed in order to develop native mobile applications with this kit. You are able to run both web and mobile versions of your app at the same time connected to the same backend.

react-apollo - :recycle: React higher-order component for Apollo Client

  •    TypeScript

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.js when you want to server side render.React Apollo unlike many other tools in the React ecosystem requires no complex build setup to get up and running. As long as you have a GraphQL server you can get started building out your application with React immediately. React Apollo works out of the box with both create-react-app and React Native with a single install and with no extra hassle configuring Babel or other JavaScript tools.

Canner - Universal Content Management System(CMS) framework using React & Apollo GraphQL, for GraphQL and Restful API

  •    Javascript

CannerCMS lets you build flexible content management systems easy and fast, CMS developers built for CMS developers. Template CMS, Content Management System can build websites fast, but clients often need custom solutions? Well, what CannerCMS do is let creating custom CMS fast and easy with many clouds.


apollo-client - :rocket: A fully-featured, production ready caching GraphQL client for every server or UI framework

  •    TypeScript

Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL. To get the most value out of apollo-client, you should use it with one of its view layer integrations.To get started with the React integration, go to our React Apollo documentation website.

Searchkit - GraphQL API & React UI components for Elasticsearch.

  •    TypeScript

Searchkit is a tool allowing you can quickly build a search experience using predefined GraphQL resolvers and React components. Built on the top of Apollo GraphQL, React & Elasticsearch, Searchkit makes building a high-quality API a lot easier. The library provides GraphQL resolvers dedicated to handling the most common use cases you could think of when using filtering oriented API beginning with basic operations such as simple querying, ending on more tricky ones such as efficient facet filtering or pagination.

react-fullstack-graphql - Starter projects for fullstack applications based on React & GraphQL.

  •    Javascript

For a fully-fledged React & Apollo tutorial, visit How to GraphQL. You can more learn about the idea behind GraphQL boilerplates here. All projects are based on graphql-yoga & Apollo Client.

polaris-react - Shopify’s product component library

  •    TypeScript

Polaris React is a component library designed to help developers create the best experience for merchants who use Shopify. Visit the Polaris style guide to learn more. For more information about creating apps for the Shopify App Store, take a look at the app development documentation.

reactql - Universal React+GraphQL starter kit: React 16, Apollo 2, Webpack 4, Styled Components 4, React Router 4, PostCSS, SSR

  •    TypeScript

Universal front-end React + GraphQL starter kit, written in Typescript. Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Styled Components, SASS - pretty much anything.

graphql-yoga - 🧘 Fully-featured GraphQL Server with focus on easy setup, performance & great developer experience

  •    TypeScript

To get started with graphql-yoga, follow the instructions in the READMEs of the examples.(**) Notice that the req argument is an object of the shape { request, connection } which either carries a request: Request property (in case it's a Query/Mutation resolver) or a connection: SubscriptionOptions property (in case it's a Subscription resolver). Request is imported from Express.js. SubscriptionOptions is from the graphql-subscriptions package.

fullstack-apollo-react-express-boilerplate-project - 💥A sophisticated Apollo in React and Express boilerplate project

  •    Javascript

A full-fledged Apollo Server 2 with Apollo Client 2 starter project with React, Express and PostgreSQL. Since this boilerplate project is using PostgreSQL, you have to install it for your machine and get a database up and running. You find everything for the set up over here: Setup PostgreSQL with Sequelize in Express Tutorial. After you have created a database and a database user, you can fill out the environment variables in the server/.env file.

graphql-yoga - 🧘 Fully-featured GraphQL Server with focus on easy setup, performance & great developer experience

  •    TypeScript

To get started with graphql-yoga, follow the instructions in the READMEs of the examples. Once your GraphQLServer is instantiated, you can call the start method on it. It takes two arguments: options, the options object defined above, and callback, a function that's invoked right before the server is started. As an example, the callback can be used to print information that the server has started.

graphql-yoga - 🧘 Fully-featured GraphQL Server with focus on easy setup, performance & great developer experience

  •    TypeScript

To get started with graphql-yoga, follow the instructions in the READMEs of the examples. Once your GraphQLServer is instantiated, you can call the start method on it. It takes two arguments: options, the options object defined above, and callback, a function that's invoked right before the server is started. As an example, the callback can be used to print information that the server has started.

GitHunt-React - :arrows_clockwise: An example app frontend built with Apollo Client and React

  •    Javascript

An example of a client-side app built with React 16 and Apollo Client 2.0.See the application running live at http://www.githunt.com.

shopify_api - ShopifyAPI is a lightweight gem for accessing the Shopify admin REST web services.

  •    Ruby

The Shopify API gem allows Ruby developers to programmatically access the admin section of Shopify stores.The API is implemented as JSON over HTTP using all four verbs (GET/POST/PUT/DELETE). Each resource, like Order, Product, or Collection, has its own URL and is manipulated in isolation. In other words, we’ve tried to make the API follow the REST principles as much as possible.

apollo-android - :pager: A strongly-typed, caching GraphQL client for Android, written in Java

  •    Java

Apollo-Android is a GraphQL compliant client that generates Java models from standard GraphQL queries. These models give you a typesafe API to work with GraphQL servers. Apollo will help you keep your GraphQL query statements together, organized, and easy to access from Java. Change a query and recompile your project - Apollo code gen will rebuild your data model. Code generation also allows Apollo to read and unmarshal responses from the network without the need of any reflection (see example generated code below). Future versions of Apollo-Android will also work with AutoValue and other value object generators.

apollo-resolvers - Expressive and composable resolvers for Apollostack's GraphQL server

  •    Javascript

When standing up a GraphQL backend, one of the first design decisions you will undoubtedly need to make is how you will handle authentication, authorization, and errors. GraphQL resolvers present an entirely new paradigm that existing patterns for RESTful APIs fail to adequately address. Many developers end up writing duplicitous authorization checks in a vast majority of their resolver functions, as well as error handling logic to shield the client from encountering exposed internal errors. The goal of apollo-resolvers is to simplify the developer experience in working with GraphQL by abstracting away many of these decisions into a nice, expressive design pattern. apollo-resolvers provides a pattern for creating resolvers that work, essentially, like reactive middleware. By creating a chain of resolvers to satisfy individual parts of the overall problem, you are able to compose elegant streams that take a GraphQL request and bind it to a model method or some other form of business logic with authorization checks and error handling baked right in.

graphql-faker - 🎲 Mock or extend your GraphQL API with faked data. No coding required.

  •    TypeScript

Mock your future API or extend the existing API with realistic data from faker.js. No coding required. All you need is to write GraphQL IDL. Don't worry, we will provide you with examples in our IDL editor. In the GIF bellow we add fields to types inside real GitHub API and you can make queries from GraphiQL, Apollo, Relay, etc. and receive real data mixed with mock data.

graphql-up - Get a ready-to-use GraphQL API for your schema

  •    Javascript

graphql-up is the fastest way to get a free & ready to use GraphQL API. It works out of the box with Apollo & Relay and supports GraphQL subscriptions.You only need to provide the schema, graphql-up will create a GraphQL API for you. The actual magic happens on the servers sponsored by Graphcool.