Development and Optimization of FlowMapp 3.0

Project Overview

FlowMapp is a tool designed for visual website planning, targeted at startups and entrepreneurs working in the UX/UI and planning tool sectors.

Problem / Task

The client approached us with the task of developing the third version of the product. During the audit and evaluation process, we noted that the second version had structural flaws, which made it difficult to scale and develop new features. Therefore, it was decided to completely rewrite the product.

Solution

Given the large amount of logic and features in the project, we chose the Feature Slice Design architecture, which has well-structured documentation. We used technologies and tools including React, TypeScript, JavaScript, React Query, HTML, CSS, LESS, Webpack, Socket.io, NodeJS, Sequelize, Docker, Kubernetes, Figma, GitHub, Playwright, ChatGPT, Cypress, Jest, Google Analytics, and Sentry. This combination allowed us to create a structured and well-documented system, which facilitated the implementation and subsequent support of the product. We decided not to use overly rare technologies, as this could limit possibilities and excessively increase the cost of the project.

Development Process

We applied the Agile methodology, which allowed us to flexibly approach development and adapt to changing project requirements. The work was divided into modules and evaluated at a high level. Each sprint ended with a demonstration of the work done to the client. Daily meetings with the team facilitated the prompt resolution of emerging issues and the exchange of plans.

Developing complex systems like FlowMapp requires not only technical expertise but also strategic planning. Therefore, for this project, we chose the Agile methodology. Before starting, we divided the project into key modules such as Sitemap, UserFlow, Wireframes, Estimations, Platform, Payments, and others, and conducted a high-level evaluation of each. We used a Gantt chart to organize the workflow, setting priorities for each module and thoroughly preparing each stage before beginning. At the end of each sprint, which lasted one week, we demonstrated our progress to the client so they could see the real results of our work.

‍In the development process, we closely collaborated with designers, backend developers, DevOps specialists, and product owners. Daily morning meetings with the team helped us promptly address current issues, discuss problems, and coordinate our actions for the coming day.

‍The product features a multitude of complex and non-standard functions, such as Canvas, Optimistic Updates, Undo/Redo, and WebSocket. Despite the lack of documentation from previous versions, our team developed an architecture for the third version and launched it into production. This new architecture allows developers at all levels, including juniors, to quickly develop new features and efficiently work on the project due to its clarity and simplicity. Additionally, we implemented numerous tests and integrated the Sentry error monitoring system, significantly enhancing the project's stability and improving the user experience.

Results

Since the project's launch, the number of registrations has reached over 200,000 unique users.

The development and launch of new features now take 1-2 weeks, compared to the previous 1-2 months.

The number of bugs has been reduced to no more than 1% of the total number of users.

‍Ongoing Support

We are currently preparing for a new release on Product Hunt, which will attract more users and provide valuable market feedback. FlowMapp continues to evolve, and we are pleased to be part of this process, contributing to its success and innovation.

‍

‍