An Educational App Builder Based on Atomic Design: Enhancing UI Development Learning for Beginner Students in Vocational Programming

Modern vocational programming education demands effective tools that bridge the gap between theoretical concepts and practical UI development skills. This paper introduces an educational app builder based on Atomic Design principles, implemented using React JS, to support beginnerlevel students in learning structured UI development. The system applies a module-based approach, categorizing components into Atoms, Molecules, Organisms, Templates, and Pages. This hierarchical design allows students to understand UI construction intuitively without needing to write complex code. The tool was evaluated with five informatics students through a combination of Customer Satisfaction Score (CSAT) measurements and structured interviews. The results revealed an 85% satisfaction rate, indicating strong educational value and usability. The contributions of this study include: (1) a pedagogical framework that translates professional UI concepts into beginner-friendly learning modules, (2) a component-based development environment tailored for vocational learners, and (3) empirical validation of the tool's effectiveness. This research supports the advancement of software engineering education and highlights the potential of component-driven learning in vocational settings.