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