Skip to content
Back to Projects

FlowStep

Collaborative API design platform for cross-functional teams.

2 min read
API Design
OpenAPI
React
Next.js
Tailwind CSS
React Query
React Hook Form
WebSockets

Problem

Cross-functional teams were designing APIs in docs and slides that drifted from what engineering shipped. FlowStep needed a shared product surface where design decisions became OpenAPI artifacts teams could actually reuse.

Decisions

  • Lead the client architecture in React + Next.js for the product surfaces that sit on the .NET services
  • WebSockets for simultaneous editing, with optimistic updates so latency did not feel like a spreadsheet waiting on save
  • Model Builder as the source of truth for properties, parameters, objects, and arrays, then generate OpenAPI / JSON / docs from that model
  • Storybook for the component library so design and eng shared the same patterns
  • Paddle subscription billing with multi-jurisdiction VAT and webhook handling on the product side

What I built

  • Collaborative API design UI for remote and co-located teams
  • Model Builder workflows for nested schema editing
  • Artifact generation for OpenAPI specs, JSON objects, and documentation
  • Swagger UI path for visual contract checks
  • Versioning / reuse patterns so teams stopped duplicating definitions
  • Role-based dashboards and NextAuth.js session flows

Tech Stack

  • Frontend: React, Next.js, Tailwind CSS / Tailwind UI, React Query, React Hook Form, TypeScript
  • Realtime: WebSockets
  • Backend context: .NET Core services (server-owned), Docker for deploy
  • Billing: Paddle (subscriptions, VAT, webhooks)

Outcomes

  • Public product: flowstep.com
  • Memory-leak / DX fix on Styled Components + Tailwind barrel imports streamline improved local development velocity by over 80% (measured on that codebase)

Context

Closest public React / Next.js product build I have for realtime works: typed UI, form-heavy workflows, cache and optimistic updates, and collaboration latency handled on purpose.

Lessons Learned

  • OpenAPI has to stay honest while people edit. The UI owns that contract.
  • Real-time collaboration needs a clear split between local draft state and server truth.
  • Optimistic updates only feel fast when conflict and fallback paths are designed up front.