This repo contains the code referenced in the StepZen posts below: a query explainer, a schema design walkthrough, and a front-end view built using Remix and Framer Motion:

• A New Workflow For API Mash-Ups: Postman, StepZen & YouTube Data API

  With my StepZen and Postman workspaces side-by-side, I was able to achieve something remarkable: a localhost and live endpoint serving custom-aggregated YouTube-Data-as-GraphQL, after barely a day-and-a-half of experimentation.

  

• Step-by-StepZen: Sorting YouTube Comments, Reddit-Style

  How your initial query triggers follow-up queries in StepZen is up to you: either set up explicit steps with the @sequence directive or auto-fill the fields of your schema with the @materializer directive.

  

• YouTube Comment Sort: Animating API Results (On A Budget)

  It's a fairly quota-expensive query, the kind you want to keep as far from your local dev server as possible–especially when you're fiddling with web animations, which often demand endless browser reloads to make presentable. But with my YouTube query mocked in a static Resource Route, duplicating Dev Ed's layout animations in his recent Awesome Filtering Animation with React Tutorial video was a lot less stressful.

  

Essential StepZen Docs

• Turn Any Data Source into GraphQL For me, the most eye-opening StepZen demo has been this Learn With Jason livestream, which squeezes in a whole lotta demo thanks to Jason and Carlos's shared Postman chops.

• CONNECTING BACKENDS // How to Connect to a REST Service I'd call this the most concise single-page StepZen walkthrough at the moment.

• DESIGN A GRAPHQL SCHEMA // How to Create a Sequence of Queries My schema adapts and (slightly) extends this super-followable build of a multi-part StepZen sequence. More than once I had to remind myself of their debugging advice in the "Testing" section: when a sequence doesn't work, test each query individually.