Building a App using AI – Bell Curve Tabata / HIIT
Here is my experience to build a App using Open AI and Deepseek.
I wanted to create a HIIT workout timer that automatically generates a Tabata workout with variable times. I’m using a Bell Curve algorithm to determine the duration of each work and rest round. I’ve been brainstorming this idea for a while because I don’t enjoy static work and rest intervals in HIIT training.
The Bell Curve idea ensures that the workout starts slowly, builds up intensity, and then tapers down.
I wanted the inputs to be simple, duration and number of rounds.. Overthinking is the killer of motivation.
I put allot of thought into this design to support motivation;
- Rest and Go Count Down time is different, so you don’t have to look at the timer.
- Go and Rest announcement again so you don’t have to look at the timer.
- Visual Count down, so you know how long to go.
- Animated GIF exercises displayed randomly, some of the best free standing body weight exercises. No need for any gym equipment.
- Allot more..
I was able to build this in just half a day this morning using https://chat.deepseek.com/.
I know enough JavaScript, HTML, and CSS to get by, but not enough to spend excessive time on this project myself.
For the audio, I used ElevenLabs, and I resized the GIFs using GIMP, sourcing some from the internet.
Here it is – http://www.detectx.com.au/apps/tabata/
I also converted this to a a progressive web app (PWA), is a website that functions like a native app. PWAs are built using web technologies and can run on multiple devices and platforms and using Bootstrap. So it behaves like a native iPhone App/icon.
Steps to Add the Website to Your iPhone Home Screen:
- Open Safari:
- Launch the Safari browser on your iPhone.
- Go to the Website:
- In the address bar, type or paste the URL: http://www.detectx.com.au/apps/tabata/.
- Tap the Share Icon:
- Once the website loads, tap the Share icon at the bottom of the screen (it looks like a square with an upward arrow).
- Select “Add to Home Screen”:
- Scroll down in the Share menu and select “Add to Home Screen”.
- Customize the Name:
- You can edit the name of the icon if you’d like (e.g., “Tabata Timer”).
- Tap “Add” in the top-right corner.
- Find the Icon on Your Home Screen:
- The website icon will now appear on your home screen. You can tap it to open the website directly.
Research
- iPhone Feedback – https://www.apple.com/feedback/iphone/
- Progressive web apps – https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
- Overview of Progressive Web Apps (PWAs) – https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/
- What is a progressive web app? https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/What_is_a_progressive_web_app
- Testing iPhone capability – Chrome / Developer Tools / Dimensions / Select iPhone and / Application
- PWA Image Generator – https://www.pwabuilder.com/imageGenerator
- PWA Builder – https://www.pwabuilder.com/