FlowStep

API design platform for cross-functional team collaboration.

Wednesday 30 September 2020
API Design
OpenAPI
React
Next.js
Tailwind CSS
React Query
React Hook Form

Overview

FlowStep is an API design (REST API) SaaS platform that enables collaboration among cross-functional teams in designing APIs. It provides a comprehensive solution for modern software development, focusing on connecting various aspects of projects, programs, and organizations.

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: Easily 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: Automatically generate OpenAPI Specs, JSON Objects, documentation, and more
  • Content Publishing: Create beautiful, consistent documentation in various formats
  • Item Reuse and Versioning: Eliminate duplication and track usage across the organization
  • Rich Data Description: Powerful Model Builder for accurate data definition

Tech Stack

  • Frontend:
    • React with Next.js framework for building the user interface
    • Tailwind CSS for styling with Tailwind UI library components
    • React Query (Tanstack Query) for efficient data fetching and state management
    • React Hook Form for form handling and validation
  • Backend:
    • .NET Core for building the server-side logic
    • WebSockets for real-time communication
  • Authentication: NextAuth.js for secure 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: Utilizes WebSockets for real-time updates and collaboration.
  • Model Builder: A powerful tool for defining and managing data models.
  • Version Control: Tracks changes and versions of APIs, ensuring traceability.
  • Documentation Generator: Automatically generates comprehensive API documentation.

Lessons Learned

This project provided valuable insights into:

  • OpenAPI Specification: Understanding how to design and document APIs using OpenAPI Specification.
  • Real-time Collaboration: Implementing WebSockets for real-time communication between the server and clients.
  • Optimistic Updates: Implementing optimistic updates and fallbacks for low latency features.
  • Import Optimization: Using aliases to optimize imports and reduce recursive imports, improving development experience and build times.
  • Enhanced Auth Access: Implement additional security measures and authentication methods.
  • Advanced Analytics: Integrated analytics to track API usage and performance.
  • Integration with CI/CD: Automate deployment and testing of app through CI/CD pipelines.