Dev.to

Workout app to visualize max weights for free with Next.js + Typescript + Cursor

Introduction I'd like to share about a workout app I developed for personal use that can visualize max weights. Application This is a web application with PWA feature. https://maxweightlog.vercel.app/ You can create a shortcut of this application in our device https://web.dev/learn/pwa/installation Background: Why I Built This App As I works out regularly, I feel two main challenges below: 1. Existing Workout Apps Were Difficult to Use Frequent ads interrupting workout recording Too many unnecessary features making apps cumbersome Recording process not optimized, making it tedious to log workouts 2. Couldn't Track Personal Max Weights I want to consider my workout menu based on previous max weights But couldn't find an existing app with this feature Tech Stack As a personal project, I chose a following tech stack that would be free to run. (Cursor is an exception since it is used regardless of this project) Category Technology Description Language TypeScript Statically typed JavaScript extension Framework Next.js 13 (App Router) React-based full-stack framework Styling Tailwind CSS Utility-first CSS framework Database Supabase PostgreSQL-based BaaS. Using free tier. Authentication Clerk Auth platform. Using free tier. UI Library shadcn/ui Reusable UI components Infrastructure Vercel Hosting service. Using free tier. Editor Cursor AI code editor. Using paid plan. Features Category Feature Description Workout Records CRUD Create, read, update, delete workout records Workout Records Search Search records by body part and exercise type Workout Records Copy Create new records by copying existing ones Workout Analysis Max Weight Check View historical max weights by body part and exercise Settings Body Part CRUD Manage body part data Settings Exercise CRUD Manage exercise type data Application Characteristics 1. Simple Workout Recording It is designed for easy recording during a workout by keeping it simple. Specific application characteristics include: List Page Search functionality for existing records Used for the "Copy Existing Record" feature below "Copy Existing Record" feature Minimizes input effort Create/Update Page Default of Date/time is set to current date because I want to record today's workout record. Default of reps is set to 10 because I always aim at 10 for each exercise Be able to input set for easy input for same exercise/rep combinations 2. Max Weight Visualization Progress is visualized clearly to track improvements: Graph display of historical max weights by exercise Graph display of records by date

Mar 23, 2025 - 05:48
 0
Workout app to visualize max weights for free with Next.js + Typescript + Cursor

Introduction

I'd like to share about a workout app I developed for personal use that can visualize max weights.

Application

This is a web application with PWA feature.

Image description

https://maxweightlog.vercel.app/

You can create a shortcut of this application in our device

https://web.dev/learn/pwa/installation

Background: Why I Built This App

As I works out regularly, I feel two main challenges below:

1. Existing Workout Apps Were Difficult to Use

  • Frequent ads interrupting workout recording
  • Too many unnecessary features making apps cumbersome
  • Recording process not optimized, making it tedious to log workouts

2. Couldn't Track Personal Max Weights

  • I want to consider my workout menu based on previous max weights
  • But couldn't find an existing app with this feature

Tech Stack

As a personal project, I chose a following tech stack that would be free to run.

(Cursor is an exception since it is used regardless of this project)

Category Technology Description
Language TypeScript Statically typed JavaScript extension
Framework Next.js 13 (App Router) React-based full-stack framework
Styling Tailwind CSS Utility-first CSS framework
Database Supabase PostgreSQL-based BaaS. Using free tier.
Authentication Clerk Auth platform. Using free tier.
UI Library shadcn/ui Reusable UI components
Infrastructure Vercel Hosting service. Using free tier.
Editor Cursor AI code editor. Using paid plan.

Features

Category Feature Description
Workout Records CRUD Create, read, update, delete workout records
Workout Records Search Search records by body part and exercise type
Workout Records Copy Create new records by copying existing ones
Workout Analysis Max Weight Check View historical max weights by body part and exercise
Settings Body Part CRUD Manage body part data
Settings Exercise CRUD Manage exercise type data

Application Characteristics

1. Simple Workout Recording

It is designed for easy recording during a workout by keeping it simple.
Specific application characteristics include:

List Page

  • Search functionality for existing records
    • Used for the "Copy Existing Record" feature below
  • "Copy Existing Record" feature
    • Minimizes input effort

Create/Update Page

  • Default of Date/time is set to current date because I want to record today's workout record.
  • Default of reps is set to 10 because I always aim at 10 for each exercise
  • Be able to input set for easy input for same exercise/rep combinations

2. Max Weight Visualization

Progress is visualized clearly to track improvements:

  • Graph display of historical max weights by exercise
  • Graph display of records by date
Read More

Tags:

Previous Article

[Snowflake's New Feature] Alert on New Data, and try with Monitoring Tasks and D...

Next Article

Automatically generate diagrams from resources deployed in AWS

Related Posts

The Cloud Container Iceberg - At least 105 ways to run a container in the cloud

The Cloud Container Iceberg - At least 105 ways to run ...

Feb 28, 2025  0

On Product Hunt

On Product Hunt

Mar 13, 2025  0

Banking Infrastructure on Cloud

Banking Infrastructure on Cloud

Mar 13, 2025  0