Back to Projects

FlowStep

API design platform for cross-functional team collaboration.

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

Overview

FlowStep is an API design (REST API) SaaS platform for cross-functional teams to collaborate on designing APIs.

Features

  • Collaborative API Design: Real-time collaboration for remote and co-located teams
  • User Flows and Functional Requirements: Combines Human Centered Design principles with Behavior Driven Development practices
  • API Management and Governance: Design, document, and track APIs through their lifecycle
  • Data Properties and Model Management: Centralized management of data properties, parameters, objects, and arrays
  • Versioning and Tracking: Understand changes and track usage across environments
  • Artifact Creation: Generate OpenAPI Specs, JSON Objects, documentation, and more
  • Content Publishing: Create documentation in various formats
  • Item Reuse and Versioning: Eliminate duplication and track usage across the organization
  • Rich Data Description: Model Builder for data definition

Tech Stack

  • Frontend:
    • React with Next.js
    • Tailwind CSS with Tailwind UI components
    • React Query (Tanstack Query) for data fetching and state management
    • React Hook Form for form handling and validation
  • Backend:
    • .NET Core for server-side logic
    • WebSockets for real-time communication
  • Authentication: NextAuth.js for authentication
  • Testing:
    • Jest with React Testing Library for unit and integration testing
    • Storybook.js for component documentation and testing
  • Development Tools:
    • TypeScript for static typing
    • ESLint and Prettier for code linting and formatting
    • Husky and lint-staged for pre-commit hooks
  • Deployment:
    • Docker for containerization

Key Components

  • Real-time Collaboration: WebSockets for real-time updates and collaboration.
  • Model Builder: A tool for defining and managing data models.
  • Version Control: Tracks changes and versions of APIs for traceability.
  • Documentation Generator: Generates API documentation from specs.

Lessons Learned

  • OpenAPI Specification: How to design and document APIs using OpenAPI Specification.
  • Real-time Collaboration: Implementing WebSockets for real-time communication between server and clients.
  • Optimistic Updates: Optimistic updates and fallbacks for low latency features.
  • Import Optimization: Using aliases to reduce recursive imports, which improved development experience and build times.