We will be undergoing planned maintenance on January 16th, 2026 at 1:00pm UTC. Please make sure to save your work.

HackMuscles

HackMuscles is an online fitness web app that offers workout plans/tutorial to help body. With HackMuscles, you can get the most out of your fitness routine, reach your goals faster, & stay motivated.

Comment

Inspiration

Creating a HackMuscles web app can be a great way to provide a personalized experience for your users while helping them reach their goals. With a HackMuscles web app, we provide a tailored experience for each user, giving them the tutorials and guidance they need to reach their fitness goals. We also provide easy access to tracking tools, fitness advice, and challenges to keep them motivated. By creating a HackMuscles web app, we help our users to stay motivated, reach their goals, and enjoy a healthier, happier lifestyle.

What it does

HackMuscles is an online platform designed to help individuals stay fit and healthy. It provides users with detailed animations and descriptions of each exercise, as well as video demonstrations from YouTube, and recommendations of similar exercises. It also offers advice on how to best perform each exercise, and provides tips on diet and nutrition.

How we built it

HackMuscles is a React application built with @emotion/react and @emotion/styled that allows users to build their own custom components and style them with JavaScript. With HackMuscles, users have access to dynamic styling based on props and can use the @emotion/babel-plugin to target other emotion components. Additionally, users have the ability to customize prop forwarding and compose dynamic styles. I have used Youtube recommendation with Cohere query search.

Challenges we ran into

When creating HackMuscles with React and emotion/styled, some of the challenges we ran into included performance issues that arose from using CSS-in-JS, understanding the differences between emotion and react-emotion, and finding the best way to style components using Emotion. We also had to choose between using the style prop to pass an object of CSS properties or using Emotion, as well as dealing with the complexities of nested selectors and media queries. Additionally, we had to make sure that we used the correct version of the @emotion/react and @emotion/styled packages, as well as inform Babel to customize the automatic runtime import.

Accomplishments that we're proud of

I am proud to have created the HackMuscles Fitness App, which provides animation based exercises and YouTube recommended links. Finally, I have developed a comprehensive list of free animation offer frame by frame animation, tweening, easing in and out, custom animations, and more. Making use of Cohere to get youtube links.

What we learned

I have learned how to use Emotion Styled Library and it's implementation in real project. I also used Material UI first time so it's was great to use. MUI provides a simple, customizable, and accessible library of React components and it's super easy to use by a web developer like me. It helped me in creating HackMuscles in very easy and customized way like I want to. Youtube query search with cohere and basic of cohere.

What's next for HackMuscles

Next I will be adding the customized diet plan to be followed for every different types of users. And providing the native Android/IOS version of HackMuscles.

Built With

Share this project:

Updates