Back to Projects

FlowStep

API design platform for cross-functional team collaboration.

3 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 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.