How To Use Introductory Slideshows
Session Builder
The Generated Session
The Mobile Workout (Mobile version)
The Active Workout

Inspiration

Going to the gym does not always mean knowing exactly what to do once you get there.

You might know you want to train upper body, hit legs, do some cardio, or simply get moving, but then comes another set of decisions: Which exercises should I do? How long should I train? What order should I do them in? And what am I actually going to listen to?

I wanted to explore whether AI could remove some of that decision-making and turn a simple intention — such as "I have 45 minutes and want a hard leg session" — into an experience someone could actually use in the gym.

That became GymBeat: your workout and your soundtrack, built together.

What it does

GymBeat is an AI-powered gym companion that generates a structured workout and matching soundtrack based on how the user wants to train.

Users can choose:

🏋️ Their workout type
⏱️ How much time they have
🔥 Their current energy level
🎵 An optional artist preference

For users who do not want to configure everything manually, GymBeat also supports Surprise Me and natural-language requests such as:

"I have 45 minutes and want a hard leg session."

GymBeat then generates a complete session with warm-up, main workout and cool-down phases, alongside music recommendations that change with the intensity of the workout.

The experience does not stop at generating a plan. Users can enter Active Workout Mode, where they can progress through exercises, use exercise timers, pause or reset them, see what exercise is coming next, and access their recommended music while they train.

How I built it

GymBeat was created through an AI-assisted development process. I used AI extensively throughout the project to help turn my initial idea and designs into a working application, rather than building every part of the code independently from scratch.

I used AI tools throughout development to help with generating and refining code, debugging problems, improving the UI and responsive design, restructuring features, and iterating on the overall user experience. My role involved defining what I wanted GymBeat to do, making design and feature decisions, testing the generated solutions, identifying problems, giving feedback, and repeatedly refining the application until it matched the experience I wanted to create.

The final application uses HTML, CSS and JavaScript on the frontend, with a Node.js and Express.js backend.

AI is also a core part of the product itself. The backend communicates with the Anthropic API, which allows GymBeat to take the user's workout type, available time, energy level and optional music preference and generate structured workout and soundtrack data.

Rather than simply displaying the AI response as a block of text, GymBeat processes that generated information and transforms it into different parts of the interface, including workout phases, exercises, durations, music recommendations and the Active Workout experience.

I also used AI throughout the development process to help troubleshoot issues such as responsive behaviour, application state, API integration and deployment.

This project was therefore both an exploration of building with AI and building an experience powered by AI.

Challenges I ran into

One of the biggest challenges was making generative AI output predictable enough to power an interface.

GymBeat needs more than a written workout. The response has to contain information that can consistently be separated into workout phases, exercises, durations and soundtrack recommendations before being displayed throughout the application.

Responsive design was another major challenge. The desktop version can display the workout and soundtrack side-by-side, but that amount of information does not translate directly to a phone screen. The active workout interface therefore needed a mobile experience that prioritises the current exercise, timer, navigation and music recommendations.

I also had to think carefully about API security and deployment. The Anthropic API key is handled server-side using environment variables rather than being exposed in the frontend or public repository.

Accomplishments that I'm proud of

I'm particularly proud that GymBeat became more than an AI prompt with a styled response.

The generated workout becomes an interactive session that the user can actually follow, with timers, exercise progression, workout phases and matching music recommendations.

I'm also proud of getting the application deployed, creating a responsive mobile experience, securely integrating the API and taking the project from an initial idea through to a working end-to-end prototype.

What I learned

Building GymBeat taught me that using AI to create an application still requires a lot of decision-making, experimentation and iteration.

One of my biggest takeaways was learning how to work with AI as a development tool. I became better at explaining exactly what I wanted, breaking larger features into smaller tasks, providing useful context, identifying when an AI-generated solution was not working, and refining my prompts based on the results.

I also learned that AI-generated code is not automatically a finished solution. Throughout the project, I still had to test features, identify bugs, make design decisions and decide whether the generated implementation actually matched the experience I wanted for GymBeat.

Through the project, I gained more experience with:

Using AI tools throughout a software development workflow
Prompting AI effectively for coding, debugging and UI improvements
Integrating the Anthropic API into an application
Working with structured AI-generated data
Understanding how a frontend communicates with a Node.js and Express backend
Managing API credentials securely with environment variables
Testing and improving responsive desktop and mobile experiences
Using Git and GitHub for version control
Deploying a Node.js application

Most importantly, I learned the difference between simply asking AI to generate code and actually directing AI to help build a product. GymBeat required me to continually evaluate what the AI produced, identify what needed to change and iterate until the different pieces worked together as one experience.

What's next for GymBeat

There are several directions I would like to explore next, including deeper Spotify and YouTube Music integration, in-app playback where platform APIs allow it, user accounts, saved workouts, workout history, favourite exercises and songs, equipment-aware generation, and the ability to regenerate individual exercises or tracks.

I would also continue refining session-state handling to make transitions between starting, ending and rebuilding workouts more consistent.

Long term, I would like GymBeat to become a training companion that understands both how you want to train and what you want to hear while doing it.