A Modular App Builder for Agile Product-Based Learning using JSON-Driven Code Generation

Agile Product-Based Learning (Agile PdBL) promotes rapid product development in educational settings but often results in challenges related to code structure and maintainability. While commercial low-code platforms accelerate development, they often fail to instill foundational software architecture principles, creating a pedagogical gap. This paper introduces CleanApp, a web-based mobile app builder specifically designed to bridge this gap. Developed using React JS and Zustand, CleanApp allows students to visually construct modular user interfaces, configure data bindings, and preview navigation flows in real time. The system generates standardized JSON structures that act as a contract between the visual builder and an external Clean Code Generator, which produces Flutter code aligned with Clean Architecture principles. CleanApp allows students to visually construct modular user interfaces, configure data bindings, and preview navigation flows in real time. The system generates standardized JSON structures that act as a contract between the visual builder and an external Clean Code Generator, which produces Flutter code aligned with Clean Architecture principles. Experimental results demonstrate that all builder features including template configuration, preview mode, simulation mode, and code generation - operated successfully. This approach effectively bridges the gap between UI design and structured implementation, enhancing both the learning experience and development efficiency. CleanApp offers a scalable, educationally aligned solution for mobile app development in fast-paced, Agile-based learning environments.