Development of Healthy Food E-Commerce Website Using React-Tailwind with Integrated Calorie Calculator Feature - Julius Sutrisno; Friscilla Elsyabeth Malae; Evelyn Carolina Riyanto; Kellyn Su; Jovannia Grisella Eka Putri (Universitas Bunda Mulia, 2025)
This study presents the design and implementation of the Healthy Kitchen website prototype, a responsive web-based platform developed to promote healthy eating through a user-centered interface and nutritional awareness features. The research adopted a Design and Development Research (DDR) approach combined with agile methodology to ensure iterative refinement based on user feedback. The prototype was developed using React.js and Tailwind CSS, integrating key components such as a hero section, product showcase, nutritional calculator, testimonial carousel, and contact form. Technical optimization techniques, including code splitting, image compression, and component reuse, were implemented to enhance performance and consistency across devices. Usability testing employed the System Usability Scale (SUS), task completion rate, and user satisfaction survey involving fifteen participants aged 25–45. Results revealed a SUS score of 85.2, a 96% task completion rate, and an average satisfaction score of 4.6 out of 5, indicating excellent usability and strong user engagement. These findings confirm that the Healthy Kitchen prototype effectively combines visual appeal, interactive functionality, and nutritional guidance, supporting users in exploring and selecting healthy food options. Future improvements will include backend integration, personalized nutrition recommendations, and the development of a mobile version to extend accessibility and scalability