gmsoudersjr/card-workout

A mobile-first, PWA, calisthenics challenge based on a deck of playing cards

SUIT YOURSELF

Overview

A mobile-first, web-based card workout app: SUIT YOURSELF

During the pandemic, I was intrigued by a video of a boxer using a deck of cards to determine the number of push-ups he would do. After trying it a few times...

Warning

Doing only one exercise for a full deck is OVERKILL!

My spin on it was to have each suit represent a different exercise instead of a full deck of push-ups.

Tip

♣️ = Crunches (core exercise)

♦️ = Jumping Jacks (4 corners, 4 body parts move)

♥️ = Push-ups (an exercise I love)

♠️ = Squats (leg exercise)

Also, friends were interested as well, but they did not want to carry around a deck of cards.

The Problem

Carrying around a deck of cards and remembering which exercise is for which suit in the middle of the workout.

Current Status

LIVE LINK: https://card-workout-tau.vercel.app

Future Plans

Note

Connect a backend so users can:

• login and track their exercises / workouts
• save a workout and continue later
• time workouts
• save completed workouts
• repeat workouts to see improvements in conditioning

Running the Project

This project is being built with Svelte using TypeScript and testing is done with Playwright.

To run a version locally on your own machine

Optional:

#make a directory and change into it:
mkdir newDirectory && cd newDirectory

Required:

#clone the repository into the current directory over SSH:
git clone [email protected]:GMSoudersJr/card-workout
#change into newly cloned directory:
cd card-workout
#run this command to install all dependencies:
npm install

for a local development server, run:

npm run dev

run this commmand to build:

npm run build

Dev Dependencies

• Svelte
• ESLint
• Prettier
• Vite
• Playwright

card-workout's Issues

feat(demos): all exercises need demo videos

All exercises do not demo videos

Make "Start" and "Next Card" work with Space and Enter keys on computer

Adding keyboard controls allows for easier usage on computer, if desired.

Document Title for SEO

Every page needs title to help with SEO and navigation.

feat(seo): add open graph protocols

Open Graph protocols add to seo and present the app better in social media posts