FitFuel: A Full-Stack Personalized Fitness and Nutrition Management Platform Using React, Supabase, and Role-Based Access Control | IJCT Volume 13 – Issue 2 | IJCT-V13I2P110
International Journal of Computer Techniques
ISSN 2394-2231
Author
Mr. Umesh Nanavare, Mr. Shantanu Patil, Mr. Om Patil, Mr. Sunny Khokle Mr. Sarthak Patil
Abstract
Digital health and wellness platforms have emerged as a critical category of consumer-facing software, yet the majority of existing solutions suffer from fragmented architec- tures, poor personalization, or inadequate scalability. This work presents FitFuel, a comprehensive full-stack fitness and nutrition management web application engineered to deliver structured, personalized fitness experiences through a cohesive and scalable system design. FitFuel integrates workout plan management, nutrition tracking with macro-level dietary insights, a real-time capable backend powered by Supabase (PostgreSQL), and a role-based access control (RBAC) architecture that distinguishes between standard users and administrators. The frontend is implemented using React 18 with TypeScript, styled via Tailwind CSS and the Radix UI component system, and bundled using Vite for optimized production delivery. State management is handled through React Context API and TanStack React Query, ensuring efficient server-state synchronization. The platform employs Supabase Auth for secure authentication supporting both email/password and OAuth flows, with relational schema design enforcing referential integrity between user profiles and workout or nutrition records. Extensive evaluation covers system performance, UI responsiveness, database query optimization, and usability metrics gathered from test users. This paper details the system architecture, database design, feature engi- neering, security considerations, and deployment strategy, and discusses the implications of the platform for scalable digital health solutions. The contributions span a reproducible full-stack architecture pattern, a formal description of the RBAC model, and an empirical evaluation across functional, performance, and user experience dimensions.
Keywords
Fitness management, nutrition tracking, React, Supabase, TypeScript, role-based access control, full-stack web application, personalized health, Tailwind CSS, PostgreSQL.
Conclusion
This paper presented FitFuel, a comprehensive full-stack fitness and nutrition management platform designed to deliver personalized, structured health experiences through a scalable and maintainable software architecture. The system integrates a React 18 / TypeScript frontend with a Supabase-backed PostgreSQL database, enforcing a formally defined RBAC model at both the application and database layers through PostgreSQL Row-Level Security policies.
Experimental evaluation demonstrated an overall Light- house performance score of 91/100 with an LCP of 1.8 seconds, sub-5ms database query times for all user-facing op- erations, 100% functional test pass rate across 119 test cases, and a System Usability Scale score of 81.7 (Excellent grade). A case study of typical user journeys confirmed the coherence of the end-to-end data flow from registration through plan assignment, workout tracking, and nutrition logging.
FitFuel’s architecture demonstrates that modern BaaS plat- forms enable small development teams to build production- grade, secure, and performant health applications without maintaining custom server infrastructure. The platform is positioned as a foundation for future extensions including AI- powered recommendations, wearable device integration, and mobile application development. The codebase, migrations, and deployment configuration serve as a reproducible refer- ence implementation for full-stack health application develop- ment using the React and Supabase ecosystem.
References
[1]T. Dehling, F. Gao, S. Schneider, and A. Sunyaev, “Exploring the Far Side of Mobile Health: Information Security and Privacy of Mobile Health Apps on iOS and Android,” JMIR mHealth and uHealth, vol. 3, no. 1, e8, 2015.
[2]C. Martinez and J. Rodriguez, “Performance Analysis of Progressive Web Applications for Health Monitoring Systems,” Journal of Medical Internet Research, vol. 23, no. 6, e25027, 2021.
[3]L. M. Burke, J. A. Hawley, S. H. Wong, and A. E. Jeukendrup, “Carbo- hydrates for training and competition,” Journal of Sports Sciences, vol. 29, Suppl 1, pp. S17–27, 2011.
[4]R. S. Sandhu, E. J. Coyne, H. L. Feinstein, and C. E. Youman, “Role- based access control models,” IEEE Computer, vol. 29, no. 2, pp. 38–47, 1996. [5]OWASP Foundation, “OWASP Application Security Verification Stan- dard 4.0.3,” OWASP, 2021. [Online]. Available: https://owasp.org/ www-project-application-security-verification-standard/
[6]Z. Gao, C. Bird, and E. T. Barr, “To type or not to type: Quantifying detectable bugs in JavaScript,” in Proc. 39th IEEE/ACM ICSE, Buenos Aires, Argentina, 2017, pp. 758–769.
[7]J. Nielsen, “Response times: The three important limits,” in Usability Engineering, San Francisco, CA: Morgan Kaufmann, 1994, ch. 5.
[8]T. Linsley, “TanStack Query v5: Async State Management for Type- Script & React,” 2023. [Online]. Available: https://tanstack.com/query/ v5
[9]Supabase Inc., “Supabase Documentation: Row Level Security,” 2024. [Online]. Available: https://supabase.com/docs/guides/database/postgres/ row-level-security
[10]E. You, “Vite: Next Generation Frontend Tooling,” 2024. [Online]. Available: https://vitejs.dev/
How to Cite This Paper
Mr. Umesh Nanavare, Mr. Shantanu Patil, Mr. Om Patil, Mr. Sunny Khokle Mr. Sarthak Patil (2026). FitFuel: A Full-Stack Personalized Fitness and Nutrition Management Platform Using React, Supabase, and Role-Based Access Control. International Journal of Computer Techniques, 13(2). ISSN: 2394-2231.
FitFuel A Full-Stack Personalized Fitness and Nutrition Management Platform Using React, Supabase, and Role-Based Access ControlDownload
Related Posts:
