💪 Personal Trainer Workout Timer

A cutting-edge, mobile-first fitness training platform that connects personal trainers with their clients in a futuristic, high-tech environment. Built with React, TypeScript, tRPC, and featuring a stunning cyberpunk aesthetic with neon pink and electric cyan accents.

✨ Features

👨‍🏫 Personal Trainer Features

Client Management Dashboard: View and manage all registered clients with detailed profiles
Workout Builder: Create custom workouts with multiple phases (warmup, main workout, cooldown)
Exercise Management: Add exercises with duration timers or repetition counts
Template System: Save workouts as reusable templates and assign them to multiple clients
Progress Tracking: Monitor client workout completions and performance metrics

💪 Client Features

Enhanced Registration: Complete profile with name, date of birth (auto-calculates age), goals, and equipment
Workout Library: View all assigned workouts with detailed previews
Interactive Timer: Real-time workout execution with countdown timers and navigation controls
Voice Guidance: Hands-free training with text-to-speech announcements for exercises and countdowns
Profile Management: Update personal information, goals, and available equipment
Progress History: Track workout completions and personal achievements

🎨 Design System

Cyberpunk Aesthetic: Deep black background with vibrant neon pink and electric cyan accents
Neon Glow Effects: Intense outer glow effects simulating neon signage
Mobile-First: Fully responsive design optimized for all devices
HUD-Style Elements: Minimalist technical lines and corner brackets
Smooth Animations: Polished transitions and hover effects

🛠️ Technology Stack

Frontend

React 19 - Modern UI library with latest features
TypeScript - Type-safe development
Tailwind CSS 4 - Utility-first styling with custom cyberpunk theme
tRPC Client - End-to-end type-safe API calls
Wouter - Lightweight routing solution
shadcn/ui - Beautiful, accessible component library
Web Speech API - Voice synthesis for workout guidance

Backend

Node.js - JavaScript runtime
Express 4 - Web application framework
tRPC 11 - Type-safe API layer
Drizzle ORM - TypeScript ORM for database operations
MySQL/TiDB - Relational database
Manus OAuth - Secure authentication system

Testing & Quality

Vitest - Fast unit testing framework
TypeScript Strict Mode - Enhanced type checking
ESLint - Code quality and consistency

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v22.13.0 or higher)
pnpm (v10.4.1 or higher)
MySQL or TiDB database instance
Git for version control

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/YOUR_USERNAME/personal-trainer-timer.git
cd personal-trainer-timer

2. Install Dependencies

pnpm install

3. Environment Setup

Create a .env file in the root directory with the following variables:

# Database
DATABASE_URL=mysql://user:password@host:port/database

# Authentication (provided by Manus platform)
JWT_SECRET=your-jwt-secret
OAUTH_SERVER_URL=https://api.manus.im
VITE_OAUTH_PORTAL_URL=https://portal.manus.im
VITE_APP_ID=your-app-id

# Owner Information
OWNER_OPEN_ID=your-open-id
OWNER_NAME=Your Name

# API Keys (provided by Manus platform)
BUILT_IN_FORGE_API_URL=https://forge.manus.im
BUILT_IN_FORGE_API_KEY=your-api-key
VITE_FRONTEND_FORGE_API_KEY=your-frontend-api-key
VITE_FRONTEND_FORGE_API_URL=https://forge.manus.im

4. Database Setup

Run database migrations to create all necessary tables:

pnpm db:push

This will create the following tables:

users - User accounts with role-based access
workouts - Workout definitions
workout_phases - Workout phases (warmup, main, cooldown)
exercises - Individual exercises
workout_templates - Reusable workout templates
template_phases - Template phases
template_exercises - Template exercises
workout_completions - Workout completion records
exercise_performance - Exercise performance metrics

5. Start Development Server

pnpm dev

The application will be available at http://localhost:3000

6. Run Tests

pnpm test

📖 Project Structure

personal-trainer-timer/
├── client/                  # Frontend application
│   ├── public/             # Static assets
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   │   └── ui/        # shadcn/ui components
│   │   ├── contexts/       # React contexts
│   │   ├── hooks/          # Custom React hooks
│   │   ├── lib/           # Utility libraries
│   │   │   └── trpc.ts    # tRPC client configuration
│   │   ├── pages/         # Page components
│   │   │   ├── Home.tsx
│   │   │   ├── TrainerDashboard.tsx
│   │   │   ├── ClientDetail.tsx
│   │   │   ├── WorkoutBuilder.tsx
│   │   │   ├── TemplateLibrary.tsx
│   │   │   ├── ClientWorkouts.tsx
│   │   │   ├── ClientProfile.tsx
│   │   │   ├── WorkoutPreview.tsx
│   │   │   └── WorkoutExecution.tsx
│   │   ├── App.tsx        # Main app component with routing
│   │   ├── main.tsx       # Application entry point
│   │   └── index.css      # Global styles with cyberpunk theme
│   └── index.html         # HTML template
├── server/                 # Backend application
│   ├── _core/             # Core server functionality
│   │   ├── index.ts       # Server entry point
│   │   ├── context.ts     # tRPC context
│   │   ├── trpc.ts        # tRPC router configuration
│   │   └── env.ts         # Environment variables
│   ├── db.ts              # Database query helpers
│   ├── routers.ts         # tRPC API routes
│   └── *.test.ts          # Unit tests
├── drizzle/               # Database schema and migrations
│   └── schema.ts          # Database table definitions
├── shared/                # Shared types and constants
├── package.json           # Project dependencies
├── tsconfig.json          # TypeScript configuration
├── tailwind.config.ts     # Tailwind CSS configuration
├── vite.config.ts         # Vite build configuration
└── drizzle.config.ts      # Drizzle ORM configuration

🎯 User Roles