Replike

Fixed alot of nasty bugs!

In this session I fixed a bug where the cards would pop up when hovered over but the ones on the edges of the page would get a straight edge because of the page layering. Right now they pop up without issue. And the big stuff I added:

app/hooks/useIsMobile.ts — a hook that detects touch devices via pointer: coarse media query. Any component can import it to make device-aware decisions.

app/components/BottomNav.tsx — a glass-morphism bottom tab bar with svg icons for: Home, Workout, History, Builder, Settings
Added it to AppShell.tsx so it’s on every page
It’s hidden at desktop sizes and only shows on mobile (max-width: 768px)

So basically the website understands when it is being used on mobile and changes the UI so its easier to use. This was my try at a more detailed devlog let me know if I am going in the right direction! :D

Made it so that the repetition counter is in the camera section , so you can both see yourself and the repetition counter at the same time! And I heard that some people, when voting, have difficulty seeing the AI use section, so I’m going to be giving a copy of how I used AI in this project down below»

                                                            How I used AI:

i designed the concept, features, and ui for this project. i used ai tools to help implement the code since I’m still learning programming. i iterated on the implementation, tested the features, and deployed the final app. Im doin my best to be the one doing the creative thinking with all my projects including this one. and i am aware that these projects might not be as valuable as other ones made by writing each line of code. however i hope that since i do all the creative thinking, review and implementation, my projects are closer to hand-written projects than they are to vibe-coded ones. P.S: I try to understand how a project works before publishing it so anything you see in the devlogs will be written by me thorough and in a detailed manner. Thank you for stopping by! :D

I changed the feel and design of the website a lot because I got some feedback that said the website was generic and honestly looked AI-generated. I looked for a more warm option, and I am so grateful for all that feedback because I think these new changes significantly improved the website. Special thanks to everyone that gave feedback, THANK YOU!!!!

I changed the color palette and a few design elements to be more warm and alive, I added a orange glow to the bottom of the pages, I made it so that the glow didnt interfere with the camera and I made sure the changes work in Dark and Light modes!

In this session I; Added Light/Dark theme, Added a lovely loading animation for when the model is being started (it is a limb with joints moving up and down, great for the projects core idea), There was also a bug where the animation would get stuck and I thankfully fixed that as well, I also made the resume button appear as “Start Workout” at the beginning (before I changed it it said resume even before any exercise was started.), I removed the Lifestyle logging (sleep time and hydration) as it was really unnecessary and a pain to keep track of, I rewrote parts of the about page because I wanted to answer some questions from testers about privacy and how the camera is used (if you are curious you can check the page), I fixed a bug where the background gradient would make this weird line in the background,

In this session I; added a new page for trends which lets you log your sleep hours and hydration levels,
added a string of text that scrolls of to the side and out of view that lists the exercises you can accurately count using Replike and I also changed some text in the about page. Cant wait for your feedback!

This is the first update to this project, so here is what I did:
I got the idea of counting repetitions when I was actually exercising. I was very annoyed on both focusing on the quality of my exercises and trying to keep up with the count, so I made this. In this update, I created the web app, the user interface, the design, and also created pose detection logic that allows you to, with your phone or laptop’s camera, in real time detect your exercise repetitions.