DEV Community: Alverto Ortega-Garcia

Kinetix Fitness AI: Your Fitness Journey, Elevated by Gemini AI.

Alverto Ortega-Garcia — Mon, 15 Sep 2025 04:00:12 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

Introducing Kinetix Fitness AI: an intelligent training partner and Fitness tracker that solves the biggest problem with fitness apps: generic, one-size-fits-all plans. It creates a truly personalized and adaptive workout experience that grows and changes right alongside you.

The app guides the user through a seamless, AI-driven fitness journey:

A Plan That's Truly Yours: The experience begins with a detailed profile. You tell the AI your fitness level, goals, available equipment, and even your height, weight, and any injuries. The AI uses this to craft a plan that is 100% yours.
Smart & Safe Sessions: Each workout begins with a custom, AI-generated warm-up. During the session, an automated rest timer guides you. If an exercise doesn't feel right, you can instantly swap it for an AI-suggested alternative.
Effortless Progression: After each exercise, you give simple feedback ("Easy", "Good", "Hard"). When you finish your weekly plan, the AI analyzes your performance and this feedback to automatically generate your next, more challenging plan. You never plateau.
Motivation & Insights: To keep you engaged, the app tracks your workout streak and provides AI-powered summaries of your performance, highlighting your achievements.

Kinetix stands out by creating a smart feedback loop. Your performance directly informs the AI's next move, making every plan a precise, effective, and safe step forward in your fitness journey.

Demo

Live App Link: https://kinetix-fitness-ai-1083848138513.us-west1.run.app/

Github Repo Link: https://github.com/Alverto-Ortega/kinetic-fitness-ai.git

Video(YouTube) Link: https://youtu.be/FWn5_AlVph4?si=pdPQ3Tzz1LUFxrjM

Screenshots:

Planner - Deep Customization	Dashboard - Your Week at a Glance

Active Workout - Guided Session	AI Physique Analysis - Visual Progress

How I Used Google AI Studio

Kinetix is powered by the Gemini API, using the gemini-2.5-flash model as the application's core "brain." My main goal was to make the AI not just a feature, but a reliable and intelligent foundation for the entire user experience.

My core strategy was to master Gemini's JSON Mode. Instead of asking the AI for plain text and trying to guess its structure, I command it to respond with perfectly formatted, structured data. This transforms the AI from a creative writer into a dependable backend, which is the key to the app's stability.

Here are the key ways Kinetix uses the Gemini API:

Structured Plan Generation: My main prompt is a detailed set of instructions for an "expert fitness coach" persona. It combines the user's profile, critical safety rules for injuries, and past performance data to generate a complete workout plan as a clean JSON object that the app can use instantly.
On-the-Fly Intelligence: This JSON-first approach powers all the small, smart features that make the app feel alive, from generating tailored warm-ups to finding context-aware exercise alternatives on the spot.
Multimodal Physique Analysis: I used Gemini's ability to understand images and text simultaneously. By sending a user's photo along with a prompt containing strict safety rules, the AI can provide a motivational visual assessment.

Multimodal Features

I implemented two distinct multimodal functionalities that are critical to the app's success: one for a key user feature, and one for ensuring the app is incredibly reliable.

Feature 1: AI Physique Analysis, Image + Text

This feature demonstrates the classic multimodal capability of combining different data types in a single prompt.

How it Enhances the Experience: This feature brings progress to life. It gives users a way to track their transformation that's more tangible and motivational than just numbers on a screen. By combining the image with a text-based safety prompt, the feature is delivered in a responsible and encouraging way.
How it Works: The user uploads a photo. The app sends the image data to Gemini along with a text prompt that sets the rules for the analysis (e.g., "be motivational," "do not give medical advice"). The AI processes both at once to provide its textual feedback.

Feature 2: Reliable AI with Structured JSON Output (Text to JSON)

This leverages the model's ability to output a different modality of data (structured JSON) from a text input, which is a powerful and technically sophisticated use of multimodality.

How it Enhances the Experience: This is the secret to the app's professional feel. It eliminates the errors and unpredictable formatting common in many AI apps, ensuring the user gets a perfect workout plan every time. Especially useful for importing and exporting your complete personal fitness journey data used on this app to keep your workout history. This technical choice results in a seamless, trustworthy, and frustration-free experience.
How it Works: For almost every AI request, I provide a detailed text prompt but instruct the Gemini API to respond in the "modality" of structured JSON, not plain text. I provide it with a strict schema, and the model's output is guaranteed to match my app's data structures perfectly, making it a robust and dependable backend for the application.

Example of the AI-Generated JSON for Users’ Fitness Data Before Starting a Workout

Workout plan: One day per week, Beginner fitness level, barbell equipment, and other optional choices auto-generated by AI. Includes AI-analyzed summary of the user's initial 'before' picture.:

{ "plan": [ { "day": "Wednesday", "goal": "Full Body Strength", "targetBodyParts": "Chest, Back, Legs, Shoulders, Arms", "exercises": [ { "name": "Barbell Squats", "sets": "3", "reps": "8-10", "rest": 90, "suggestedWeight": "65 lbs" }, { "name": "Barbell Bench Press", "sets": "3", "reps": "8-10", "rest": 90, "suggestedWeight": "65 lbs" }, { "name": "Bent-Over Barbell Rows", "sets": "3", "reps": "8-10", "rest": 90, "suggestedWeight": "45 lbs" }, { "name": "Standing Barbell Overhead Press", "sets": "3", "reps": "8-10", "rest": 90, "suggestedWeight": "45 lbs" }, { "name": "Barbell Bicep Curls", "sets": "3", "reps": "10-12", "rest": 60, "suggestedWeight": "40 lbs" }, { "name": "Barbell Triceps Extensions (Skullcrushers)", "sets": "3", "reps": "10-12", "rest": 60, "suggestedWeight": "30 lbs" } ] } ], "workoutHistory": [], "analysisHistory": [ { "date": "2025-09-15T03:58:04.179Z", "result": "Here's a Kinetix analysis of your impressive physique:\n\n1. **Overall Impression:** You've clearly put in dedicated effort, building a solid and balanced foundation!\n2. **Key Strengths:**\n * **Shoulder Definition:** Your deltoids show good shape and development, particularly in the anterior and lateral heads, contributing to a strong upper body silhouette.\n * **Arm Muscularity:** There's noticeable size and shape in your arms, indicating consistent work on both biceps and triceps.\n * **Forearm Strength & Leanness:** Your forearms exhibit impressive leanness and visible vascularity, highlighting your overall conditioning and grip strength.\n3. **Areas for Focus:**\n * **Core Definition:** Focusing on targeted core exercises can further enhance abdominal separation and overall midsection leanness.\n * **Upper Chest Development:** Incorporating movements that specifically target the upper pectorals can add more fullness and balance to your chest, complementing your strong shoulders.\n * **Triceps Detail:** While your arms are strong, isolating the triceps more intensely could bring out greater detail and separation, enhancing arm aesthetics.\n4. **Actionable Tip:** To boost your upper chest development, try incorporating **Incline Dumbbell Presses** with a controlled tempo into your routine." } ], "streak": { "current": 0, "lastWorkoutDate": "" }, "preferences": { "fitnessLevel": "Beginner", "daysPerWeek": "1", "duration": "", "equipment": [ "Barbell" ], "desiredGoals": [ "" ], "excludedGoals": [], "specificDays": [], "height": "5'9", "weight": "150", "injuries": "" }, "completedDays": [], "hasCompletedFirstPhase": false }

Example JSON showing post-workout data.


  "workoutHistory": [
    {
      "date": "2025-09-15T06:05:50.249Z",
      "day": "Monday",
      "exercises": [
        {
          "exerciseName": "Barbell Squat",
          "sets": [
            {
              "reps": 9,
              "weight": 50
            },
            {
              "reps": 8,
              "weight": 55
            }
          ]
        }
      ]
    }
  ],
  "analysisHistory": [],
  "streak": {
    "current": 1,
    "lastWorkoutDate": "2025-09-15T06:05:50.249Z"
  },

Try the app yourself, it’s a wonderful experience that can greatly enhance your fitness journey. I’m already following the plan generated by this elegant Fitness AI, and it’s been both motivating and easy to use.

Peace, love and good Health! :)

WebGL's Animation loop, gaming on browsers - One Byte Explainer

Alverto Ortega-Garcia — Wed, 25 Sep 2024 04:50:10 +0000

This is a submission for the Web Game Challenge: One Byte Explainer

Explainer

WebGL's animation loop concept powers browser games, creating smooth motion by rapidly rendering frames. Imagine flipping through pages of an illustrated book quickly, creating a fluid sequence of images as animated. This is the magic behind animations.

Additional Context

I remember creating little booklets as a kid, filling the pages with images and symbols. When I flipped through them quickly, the pictures seemed to come alive, just like a simple animation. This is similar to how objects appear to move on a screen: images are refreshed rapidly, creating the illusion of motion..

Web Development Algorithms...

Alverto Ortega-Garcia — Mon, 16 Sep 2024 22:04:25 +0000

These are algorithms that I consider very important, in particular for Web Development.

Web Development Algorithms

Algorithm types

Sorting, Search, Hashing, Graph, Tree Traversal, Dynamic programming, Catching, Compression, Security.

Bonus:

Regular Expressions for pattern matching and text processing.
Concurrency and Asynchronous programming.

Patterns and Algorithms to focus on most for the Front-end of Web Development:

Debounce: A Pattern technique used for search inputs or API calls where there may be a heavy usage of user inputs that can overwork the system.
Throttle: A Pattern technique used for optimizing performance when handling continuous events. Examples: scrolling, mouse movements...
Merge Sort: A sorting algorithm that is reliable and efficient, implemented by JavaScript as a .sort() method. Examples: Optimize data-heavy User Interfaces.
Binary Search : searching in sorted arrays/lists. In larger datasets this is more efficient than Linear search. Example usage: search filters, autocomplete suggestions.
Regular expressions(regex): A technique used for String validation and pattern matching. Examples: Form validations for emails and passwords, search bars, and text formatting.
Depth-first search(DFS) and Preorder Traversal: These two recursion Tree-traversal algorithms are useful for traversing, manipulating or rendering nested components like React component trees and DOM. Example: Rendering hierarchical UIs such as menus.

Feel free to add more to this list of Web Development algorithms in the comments below! :D

Simple Food Recipe-sharing Starter Kit (vite, react, express, graphql, neon)

Alverto Ortega-Garcia — Mon, 02 Sep 2024 06:58:11 +0000

This is a submission for the Neon Open Source Starter Kit Challenge : Ultimate Starter Kit

My Kit

Welcome to my Food Recipe-sharing Starter Kit, a full-stack recipe management application designed to help you quickly start your own recipe-sharing platform. This starter kit is built with a modern tech stack including React for the frontend, Apollo Client for GraphQL interactions, and NEON as the PostgreSQL database. It features real-time updates with GraphQL subscriptions, a clean and responsive UI, and is structured to be easily extendable and customizable.

Key Features:

Full-Stack Integration: Utilizes Apollo Server with GraphQL for data management, and React for a dynamic and responsive user interface.

Real-Time Updates: Implements GraphQL subscriptions to provide real-time updates for new recipe additions.

Simple Design: Not much to feature here lol Unfortunately, I didn't have enough time to implement the design aspect of my starter kit.

NEON Database: Uses NEON, a powerful PostgreSQL database, for reliable and scalable data management.

Demo Video

Watch the demo video here.
or directly on here:

Link to Kit

You can explore the Recipe Starter Kit and its source code here. The repository includes a comprehensive README with detailed instructions on how to set up and run the project. Make sure to review the setup guidelines to get started quickly.

Your Journey

Choosing this stack was a deliberate decision to leverage cutting-edge technologies and best practices. React was selected for its flexibility and efficiency in building interactive UIs, while Apollo Client and Apollo Server provide a robust solution for managing GraphQL queries and real-time data. The integration of NEON as the PostgreSQL database ensures a reliable backend with scalability in mind.

Throughout the development process, I learned the intricacies of combining these technologies into a cohesive system. Implementing GraphQL subscriptions for real-time updates was a significant learning curve, as it involved managing both client-side and server-side state seamlessly. Additionally, integrating NEON as the database allowed me to explore advanced features of PostgreSQL and understand the benefits of a managed database solution.

This project not only helped me on my journey to mastering the use of modern development tools but also in appreciating the importance of designing scalable and maintainable applications. I hope this starter kit serves as a valuable resource for others looking to build similar applications.

Soon, I will further improve this starter kit and implement a User account profile, sign up/login system, and food image input. I will then build my own official food-recipe sharing platform from this starter kit. Look out for an upcoming blog post on updates!
Peace :}

Introvertish to Extrovertish

Alverto Ortega-Garcia — Fri, 05 Apr 2024 19:40:06 +0000

Through my self-awareness, I have noticed a strange phenomenon occurring within my personality. Ever since I entered the field of Computer Science and started working with Web/Software Technology, my time spent with computers—both at work and during my leisure time—has increased significantly. I don’t mind this at all since it’s my passion; however, it seems that something deep within me did get affected, as my personality trait has shifted from the introverted side of the spectrum to somewhere in the middle, leaning towards the extroverted side.

I’ve noticed this change in myself as I now initiate conversations more often, even with strangers in public. This is not to say that I used to be anti-social (I'm more inclined to be anti-social-media, hehe); I enjoy socializing, but I didn’t often initiate conversations before. Maybe it's just an age thing as I start my new chapter of life in my 30s :') or perhaps the Web Development field lowkey improves your social skills, which is certainly not a bad thing! I'm not complaining, but I worried that this field would make me even more introverted, which is not entirely a bad thing.

This evolution, however, has proven advantageous, particularly in my role as a front-end web developer. Effective communication is paramount in understanding clients’ needs and collaborating with a development team to devise solutions. The ability to step forward and connect with others has enriched these professional exchanges and I look forward to applying myself in my career.

I’m curious to know if other introverts have experienced a similar transformation or conversely, have any extroverts found themselves gravitating towards introversion? Either way, you're all cool :)

(PS - my first post, salud!)