FlowStep
Indra Lukmana
Web Designer
Frontend Engineer
Web Developer
Next.js
React
TypeScript
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.
