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

Abstract


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

Full Text:

PDF

References


Abas, N., Hardi, N. M., & Nasir, N. M. (2025). Advanced AI chatbots for enhanced customer interaction: A comprehensive review of emerging trends and future directions. International Journal of Research and Innovation in Social Science (IJRISS), 9(9), 1–15. https://doi.org/10.47772/IJRISS.2025.909000785

Alabi, M. O. (2023). Food security and disruptions of the global food supply chains during COVID-19: Building smarter food supply chains for post COVID-19 era. British Food Journal, 125(1), 167–185. https://doi.org/10.1108/BFJ-03-2021-0333

Ali, M. J. (2024). Seamless service evolution: Enhancing customer satisfaction using AWS-driven AI chatbots for restaurant ordering. Proceedings of the 4th International Conference on Sustainable Expert Systems (ICSES 2024), 1312–1318. https://doi.org/10.1109/ICSES63445.2024.10762974

Alsaqqa, S., Sawalha, S., & Abdel-Nabi, H. (2020). Agile software development: Methodologies and trends. International Journal of Interactive Mobile Technologies, 14(11), 246–270. https://doi.org/10.3991/ijim.v14i11.13269

Aruna, S. (2024). A new mobile application design to empower local communities through seamless resources sharing. Proceedings of the 2024 International Conference on Cognitive Robotics and Intelligent Systems (ICC ROBINS 2024), 916–920. https://doi.org/10.1109/ICC-ROBINS60238.2024.10533894

Astuti, L. (2023). Development of SME canteens ordering system utilizing single moving average and economic order quantity for prediction of inventory. AIP Conference Proceedings, 2680(1). https://doi.org/10.1063/5.0127646

Ausat, A. M. A., & Peirisal, T. (2021). Determinants of e-commerce adoption on business performance: A study of MSMEs in Malang City, Indonesia. Jurnal Optimasi Sistem Industri, 20(2), 104–114. https://doi.org/10.25077/josi.v20.n2.p104-114.2021

Barska, A. (2020). E-consumers and local food products: A perspective for developing online shopping for local goods in Poland. Sustainability, 12(12). https://doi.org/10.3390/su12124958

Bernatska, N. (2023). React library: A case study on the effective instruments of the design of an environmental monitoring system. International Scientific and Technical Conference on Computer Sciences and Information Technologies. https://doi.org/10.1109/CSIT61576.2023.10324124

Chen, T., Kornblith, S., Norouzi, M., & Hinton, G. (2020). A simple framework for contrastive learning of visual representations. In Proceedings of the 37th International Conference on Machine Learning (pp. 1597–1607). PMLR.

Christianto, K., Bernanda, D. Y., Lee, F. S., Andry, J. F., & Karepowan, N. N. (2023). Testing quality web-application e-commerce BookCorner using ISO 9126. International Journal of Open Information Technologies, 11(7), 46–52.

Dodeja, L., Tambwekar, P., Hedlund-Botti, E., & Gombolay, M. (2024). Towards the design of user-centric strategy recommendation systems for collaborative human–AI tasks. International Journal of Human-Computer Studies, 184, 103216. https://doi.org/10.1016/j.ijhcs.2023.103216

Dron, M. (2025). Web application state management: A review of leading React frameworks. IEEE Software. https://doi.org/10.1109/MS.2025.3621269

Dubey, A., Chaturkar, K., Pawar, R., Sarode, A., & Shirbhate, D. D. (2024). A comprehensive review of JavaScript frameworks. Grenze International Journal of Engineering & Technology, 10(1), 2621–2627.

Dwivedi, Y. K., Ismagilova, E., Hughes, D. L., Carlson, J., Filieri, R., Jacobson, J., ... & Wang, Y. (2021). Setting the future of digital and social media marketing research: Perspectives and research propositions. International Journal of Information Management, 59, 102168. https://doi.org/10.1016/j.jinfomgt.2020.102168

Edward, E., Sugianto, M., & Sutrisno, J. (2024). Increasing efficiency and effectiveness through digitalization in batik cooperative business processes (Kombas). Jurnal Indonesia Sosial Teknologi, 5(6). https://doi.org/10.59141/jist.v5i6.1164

El-Kaliouby, S. S. (2021). Native mobile applications UI code conversion. Proceedings of the 2021 16th International Conference on Computer Engineering and Systems (ICCES 2021). https://doi.org/10.1109/ICCES54031.2021.9686093

Elrom, E. (2021). React and libraries: Your complete guide to the React ecosystem. Apress. https://doi.org/10.1007/978-1-4842-6696-0

Felix, A & Rembulan, G. D. (2023). Analysis of key factors for improved customer experience, engagement, and loyalty in the e-commerce industry in Indonesia. APTISI Transactions on Technopreneurship, 5(2), 196–208. https://doi.org/10.34306/att.v5i2sp.350

Felix, A., Bernanda, D. Y., Kembau, A. S., Makarawung, R. J. N., Sutrisno, J., & Berliano, B. (2025). Factors influencing e-commerce skincare purchase decisions through consumer behavior models. In 2025 4th International Conference on Creative Communication and Innovative Technology (ICCIT). IEEE. https://doi.org/10.1109/ICCIT65724.2025.11167313

Felix, A., Rembulan, G. D., Yurisca, D., Kembau, A. S., Sutrisno, J., & Susilo, S. R. (2024). Analisa customer delight UMKM di Indonesia dalam penggunaan aplikasi e-commerce B2B. YUME: Journal of Management, 7(3), 167–179. https://doi.org/10.37531/yum.v7i3.7118

Fujimoto, M. (2024). Integrating GeoGebra with React and WebAssembly: A web-based approach for mathematical software development. In Lecture Notes in Computer Science (Vol. 14749, pp. 343–353). https://doi.org/10.1007/978-3-031-64529-7_35

Global Wellness Institute. (2023). 2023 global wellness economy monitor (2019–2022 data). https://globalwellnessinstitute.org/industry-research/2023-global-wellness-economy-monitor/

Ha, H. M., Jung, Y. J., Hong, Y. R., & Choi, S. Y. (2024). Nutrition supply and growth post nutrition support team activity in neonatal intensive care unit. Pediatric Gastroenterology, Hepatology & Nutrition, 27(5), 313–321. https://doi.org/10.5223/pghn.2024.27.5.313

Haryanti, T. (2022). E-commerce acceptance in the dimension of sustainability. Journal of Modelling in Management, 17(2), 715–745. https://doi.org/10.1108/JM2-05-2020-0141

Hyzy, M., Bond, R., Mulvenna, M., Bai, L., Dix, A., Leigh, S., & Hunt, S. (2022). System usability scale benchmarking for digital health apps: Meta-analysis. JMIR mHealth and uHealth, 10(8). https://doi.org/10.2196/37290

International Food Information Council. (2023). 2023 food and health survey. https://foodinsight.org/2023-food-and-health-survey/

Jaya, S., Zaharudin, R., Hashim, S. N. A., Ithnin, M. A., Zaid, S. M., Majabil, J., & Nordin, M. N. (2021). Employing design and development research (DDR) approach in designing next generation learning spaces (NGLS) in teachers’ pedagogy and technology tools. Review of International Geographical Education Online, 11(7), 1–15.

Khan, M., Azam, F., Rashid, M., Samea, F., Anwar, M. W., Muzaffar, A. W., & Butt, W. H. (2022). A retargetable model-driven framework for the development of mobile user interfaces. Journal of Circuits, Systems and Computers, 31(1). https://doi.org/10.1142/S0218126622500189

Kwon, P., Hariyani, R. S., Christiansen, R., Juan, J., Wen, M. K., Chandra, N., Andryani, N. A. C., & Alam, I. N. (2023). Android-based smart nutrition application for children nutritional awareness. In 2023 IEEE 9th Information Technology International Seminar (ITIS) (pp. 1–9). IEEE. https://doi.org/10.1109/ITIS59651.2023.10420296

Li, Q. (2021). Application of nanocellulose as particle stabilizer in food Pickering emulsion: Scope, merits and challenges. Trends in Food Science and Technology, 110, 573–583. https://doi.org/10.1016/j.tifs.2021.02.027

López, C. C. (2023). Redefining e-commerce engagement: Exploring the demographic impact of WhatsApp chatbots in the Mexican market. In ACM International Conference Proceeding Series. https://doi.org/10.1145/3630970.3631056

Mendiratta, D. (2023). Use of the geriatric nutritional risk index to assess risk for postoperative complications following posterior cervical decompression/fusion. International Journal of Spine Surgery, 17(6), 866–874. https://doi.org/10.14444/8551

Qin, Z., Wang, G., Deng, W., & Hao, Y. (2025). E-commerce in theory and practice: Introduction to e-commerce. Springer.

Radhiya, M. (2022). Sentiment analysis on food review from website Zomato using K-nearest neighbor (KNN) algorithm. In 2022 1st International Conference on Software Engineering and Information Technology (ICoSEIT 2022) (pp. 250–255). https://doi.org/10.1109/ICoSEIT55604.2022.10030024

Sahu, A. (2024). Vehicle rental management system: On-demand vehicle ride. In 2024 International Conference on Advances in Computing Research on Science Engineering and Technology (ACROSET 2024). https://doi.org/10.1109/ACROSET62108.2024.10743592

Selvaraju, T. (2025). Food detection and estimation of calories and other macronutrients and features to support healthy lifestyle. AIP Conference Proceedings, 3279(1). https://doi.org/10.1063/5.0263063

Shevchenko, Y., Kuhlmann, T., & Reips, U.-D. (2021). Samply: A user-friendly smartphone app and web-based means of scheduling and sending mobile notifications for experience-sampling research. Behavior Research Methods, 53(4), 1710–1730. https://doi.org/10.3758/s13428-020-01527-9

Sungboonlue, P., Thanakaew, S., Rangseepanya, K., Tangpatong, T., & Siriborvornratanakul, T. (2022). A study of redesigning food delivery application in Thailand. TELKOMNIKA, 20(5), 1080–1088. https://doi.org/10.12928/telkomnika.v20i5.24094

Sutrisno, J., Vanessa, V., Tjandra, N., & Juliana, V. (2024). Perancangan manajemen proyek digital sistem rekomendasi F&B MealNow. DigismaTech: Jurnal Program Studi Bisnis Digital, 4(2). https://doi.org/10.30813/digismantech.v4i2.7247

Sutrisno, J., Makarawung, R. J. N., Bernanda, D. Y., Kembau, A. S., Felix, A., & Doa, F. N. (2025). Easy Kost UI/UX design for streamlined boarding house management. In 2025 4th International Conference on Creative Communication and Innovative Technology (ICCIT). IEEE. https://doi.org/10.1109/ICCIT65724.2025.11167538

Vinutha, K. (2025). Dynamic content generation for learning management system using generative AI. In Proceedings of the 2025 International Conference on Computing for Sustainability and Intelligent Future (COMP SIF 2025). https://doi.org/10.1109/COMP-SIF65618.2025.10969929

Whalen, L. (2022). On creating a comprehensive food database. In Proceedings of the 2022 International Conference on Computational Science and Computational Intelligence (CSCI 2022) (pp. 1610–1614). https://doi.org/10.1109/CSCI58124.2022.00288

Yao, S., Zhao, J., Yu, D., Du, N., Shafran, I., Narasimhan, K., & Cao, Y. (2023). ReAct: Synergizing reasoning and acting in language models. In Proceedings of the 11th International Conference on Learning Representations (ICLR 2023).




DOI: http://dx.doi.org/10.30813/digismantech.v5i2.9201

Refbacks

  • There are currently no refbacks.


RECOMMENDED TOOLS

    Turnitin logo

 

INDEXED BY

p-ISSN 2798-1819

e-ISSN 2798-0189

    

 

UNIVERSITAS BUNDA MULIA PRESS
PROGRAM STUDI BISNIS DIGITAL
Lantai 6 Kampus Ancol - Universitas Bunda Mulia
Jl. Lodan Raya No. 2, Ancol – Jakarta Utara 14430, Indonesia
Telp: +62 21 692 9090 ext.1624
Email: [email protected]