GGL Fitness App

[abdulrcs]

---

slug: ggl-fitness-app
date: 12-July-2024
summary: Fitness app packed with features like calorie counter, workouts, and measurement journal to help users achieve their fitness goals.
techStack: Next.js, Chakra UI
category: Full-time at GGL
deployLink: https://app.ggl.life
image: https://github.com/user-attachments/assets/384704ba-2ca6-44de-84d4-5b0362ecee78

Overview

GGL (Gak Gendut Lagi) is a fitness app packed with features like calorie counting, a measurement journal, workout tutorials, meal planning, and personalized mentoring to help users achieve their fitness goals.

Project Goals

The primary goal of this project was to rebuild the web app of GGL from scratch. The existing web app was outdated, both in terms of design and technology, and it did not align with the current mobile app's features and aesthetics. The objective was to "migrate" the web app using modern technologies and design principles consistent with the mobile app, ensuring a seamless and cohesive user experience across all platforms.

Tech Stack

To achieve this, the following technologies were used:

• Next.js: For server-side rendering and optimized web performance.
• Chakra UI: To implement a cohesive and responsive design system.
• Rematch: For efficient and maintainable state management.

Features ✨

Meal Plan (Calorie Counter)

Tutorial

Workout

Measurement

Goal Section

Challenges

One of the main challenges was developing the web app in parallel with the mobile team. Since the mobile team began their development earlier, maintaining zero feature disparity with the mobile app became crucial. Ensuring consistency across both platforms in terms of design and functionality required meticulous attention to detail and continuous communication between teams.

Initiatives

To make the app lightning-fast & improve user experience, I focused on optimizing the app’s performance. By implementing an effective caching strategy, I achieved a significant boost in loading speed:

Before Caching (Dashboard)

After Caching (Dashboard)

This optimization resulted in a 33.8% improvement in the dashboard’s loading speed. Testing across various pages, including the dashboard, meal plan, and measurement pages, showed an average performance increase of 39%.

Details of this optimization process were documented in my college thesis and later published in the Journal of Informatics and Computer Science (JINACS). You can read the publication here.

Learnings and Takeaways

1. Overcommunicate Effectively: Working alongside the mobile team emphasized the importance of clear communication, it's essential to align design and development goals to ensure feature parity and consistency across platforms.
2. Performance Matters: Implementing caching strategies taught me the value of performance metrics and how even a minor technical changes can significantly enhance user experience.
3. Design for Scalability & Speed: Leveraging Chakra UI helped streamline the development process and ensure that the app maintained a responsive and accessible design.

Rebuilding the GGL web app was a journey, building a webapp for an existing company with over 300K users was definitely rewarding. This project pushed me to grow as a developer and collaborate effectively while staying focused on delivering value for users 🚀