### Install and Login Vercel CLI - Bash

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT.md

Instructions for installing the Vercel Command Line Interface globally using npm and logging into your Vercel account to manage deployments.

```bash
# Install Vercel CLI
npm install -g vercel

# Login to Vercel
vercel login
```

--------------------------------

### Deploy to Preview and Production - Bash

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT.md

Commands to deploy the CrossFit Tracker application to a preview environment and then to the production environment using npm scripts.

```bash
# Deploy to Preview
npm run deploy:preview

# Deploy to Production
npm run deploy:vercel
```

--------------------------------

### Run Quick Verification (Bash)

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/post-deployment-verification.md

Executes a subset of essential post-deployment verification tests, providing a faster check of critical functionalities.

```bash
npm run verify:production -- --quick
```

--------------------------------

### Run Development Server

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/cypress/README.md

Starts the CrossFit Tracker application locally for testing purposes. This is a prerequisite before running the E2E tests.

```Bash
npm run dev
```

--------------------------------

### Verify Production Deployment - Bash

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT.md

Runs a script to verify the production deployment of the CrossFit Tracker application by hitting the specified production URL and performing necessary checks.

```bash
PRODUCTION_URL=https://your-app.vercel.app npm run verify:production
```

--------------------------------

### Quick Deployment Commands - Bash

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT.md

Provides essential bash commands for quickly deploying the CrossFit Tracker application to Vercel, including checking deployment readiness, deploying to production, and verifying the production deployment.

```bash
# Quick deployment check
npm run deploy:check

# Deploy to production
npm run deploy:vercel

# Verify deployment
PRODUCTION_URL=https://your-app.vercel.app npm run verify:production
```

--------------------------------

### Run Full Production Verification (Bash)

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/post-deployment-verification.md

Executes all available post-deployment verification tests for the production environment, including comprehensive checks across all functionalities.

```bash
npm run verify:production:full
```

--------------------------------

### GitHub Secrets for Vercel Deployment - Bash

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT.md

Lists the necessary environment variables that need to be configured as GitHub secrets for automating the deployment of the CrossFit Tracker application using GitHub Actions.

```bash
VERCEL_TOKEN=your_vercel_token
VERCEL_ORG_ID=your_org_id
VERCEL_PROJECT_ID=your_project_id
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
```

--------------------------------

### Deploy CrossFit Tracker using Vercel CLI

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT_CHECKLIST.md

This snippet details the steps to deploy the CrossFit Tracker application using the Vercel Command Line Interface. It includes installing the Vercel CLI, logging in, deploying to a preview environment, and finally deploying to production.

```bash
# 1. Install Vercel CLI
npm install -g vercel

# 2. Login to Vercel
vercel login

# 3. Deploy to preview (optional)
npm run deploy:preview

# 4. Deploy to production
npm run deploy:vercel
```

--------------------------------

### Supabase SQL Schema and RLS - SQL

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT.md

Outlines the essential SQL commands and configurations required for the Supabase database, including creating tables for exercises and workout records, enabling Row Level Security (RLS), and setting up performance indexes.

```sql
-- Run migrations in production
-- exercises table with 5 exercises
-- workout_records table with proper schema

-- Verify RLS policies are active
-- Users can only access their own data

-- Verify indexes on user_id, exercise_id, created_at
```

--------------------------------

### Running Cypress Tests

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/cypress/TESTING_SUMMARY.md

Bash commands to execute Cypress tests. This includes installing dependencies, running tests in headless mode, opening the interactive Cypress Test Runner, and running specific test files.

```Bash
# Install dependencies (already done)
npm install

# Run tests in headless mode
npm run test:e2e

# Open Cypress Test Runner (interactive mode)
npm run test:e2e:open

# Run specific test file
npx cypress run --spec "cypress/e2e/auth.cy.ts"
```

--------------------------------

### Run Deployment Check - Bash

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT.md

Executes a script to perform a comprehensive pre-deployment check for the CrossFit Tracker application, ensuring type checking, linting, unit tests, and application build are successful.

```bash
npm run deploy:check
```

--------------------------------

### Production Environment Variables - Bash

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT.md

Defines the necessary environment variables for the production build of the CrossFit Tracker application, focusing on Supabase configuration and Next.js settings. These should be stored in a `.env.production.local` file.

```bash
# Supabase Configuration (Production)
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_production_anon_key
SUPABASE_ACCESS_TOKEN=your_production_access_token

# Next.js Configuration
NODE_ENV=production
```

--------------------------------

### Troubleshooting Build Failures with npm Commands

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT.md

This snippet demonstrates how to check for build failures by running TypeScript type checking and linting commands using npm. It also emphasizes verifying environment variables.

```bash
npm run type-check
npm run lint
```

--------------------------------

### Run Custom URL Verification (Bash)

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/post-deployment-verification.md

Performs post-deployment verification against a specified custom URL, allowing testing of different deployment environments or staging servers.

```bash
npm run verify:production -- --url https://your-app.vercel.app
```

--------------------------------

### Performing a Production Rollback with Vercel CLI

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT.md

This command allows for an immediate rollback to a previous deployment version using the Vercel CLI. It's a crucial step in the rollback procedure for addressing production issues.

```bash
vercel rollback
```

--------------------------------

### Run Production Verification in Verbose Mode

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/post-deployment-verification.md

Execute the production verification script with the --verbose flag to enable detailed logging. This includes request/response information, performance metrics, HTML content analysis, and error stack traces.

```bash
npm run verify:production -- --verbose
```

--------------------------------

### GitHub Actions Production Verification (YAML)

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/post-deployment-verification.md

Integrates post-deployment verification into a GitHub Actions workflow. This snippet runs the verification command after a deployment, using the deployed URL.

```yaml
- name: Verify Production Deployment
  run: |
    npm run verify:production -- --url ${{ steps.deploy.outputs.url }}
  env:
    PRODUCTION_URL: ${{ steps.deploy.outputs.url }}
```

--------------------------------

### Run Production Verification (Bash)

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/post-deployment-verification.md

Executes the post-deployment verification tests for the production environment. This command initiates a series of automated checks to ensure the application's core functionalities are working as expected after deployment.

```bash
npm run verify:production
```

--------------------------------

### Add Custom Verification Test in JavaScript

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/post-deployment-verification.md

Extend the verification script by adding custom test functions to `scripts/verify-production.js`. This example demonstrates how to test a custom API endpoint and log the success or failure.

```javascript
async verifyCustomFeature() {
  console.log('🔍 Testing custom feature...');
  
  try {
    const response = await this.makeRequest('/api/custom');
    
    if (response.statusCode === 200) {
      this.logSuccess('Custom feature working');
    } else {
      this.logFailure('Custom feature failed');
    }
  } catch (error) {
    this.logFailure('Custom feature error', error.message);
  }
}
```

--------------------------------

### Deploy using Vercel CLI

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/PRODUCTION_READINESS.md

The recommended method for deploying the application using the Vercel Command Line Interface.

```bash
npm run deploy:vercel
```

--------------------------------

### Perform Initial Performance Audit for CrossFit Tracker

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT_CHECKLIST.md

This section provides commands for performing an initial performance audit of the CrossFit Tracker application. It includes running Lighthouse audits and analyzing the application's bundle size.

```bash
# Run Lighthouse audit
npm run performance:audit

# Analyze bundle size
npm run build:analyze
```

--------------------------------

### Profile Configuration Flow Scenarios

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/__tests__/integration/README.md

Details key testing scenarios for the profile configuration flow, including end-to-end updates, photo uploads, BMI calculations, data persistence, and error recovery.

```TypeScript
// 1. End-to-end profile updates with validation
// 2. Photo upload with file type and size validation
// 3. BMI calculations with updated weight/height data
// 4. Data persistence to localStorage and database
// 5. Error recovery with invalid data correction

```

--------------------------------

### Deploy to Vercel Production

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/vercel-optimization.md

This command initiates a production deployment of the application to Vercel. It typically builds the project and deploys the latest changes to the live environment.

```bash
npm run deploy:vercel
```

--------------------------------

### User Settings Integration Tests Summary

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/__tests__/integration/README.md

This section summarizes the integration tests for the user settings feature, covering profile configuration, exercise management, preferences persistence, and navigation. It lists the test files and their coverage.

```TypeScript
/*
  userSettingsFlow.integration.test.tsx
  settings.integration.test.tsx
  completeUserSettingsIntegration.test.tsx
*/

// End-to-end profile configuration with validation and persistence
// Profile photo upload with error scenarios and validation
// Display name validation and real-time updates
// Personal data management (weight, height, gender, experience level)
// BMI calculations and health metrics
// Profile data synchronization across components
// Error handling and recovery for invalid profile data

// Data integrity during exercise management operations
// Exercise addition, editing, and deletion with validation
// Cascade cleanup of related goals and records when exercises are deleted
// Preservation of workout history when exercises are modified
// Exercise name uniqueness validation
// Category validation and management
// Progress tracking after exercise management changes

// Theme changes (light/dark/system) with immediate application and persistence
// Unit preferences (metric/imperial) with automatic conversions
// Language preferences and internationalization preparation
// 1RM formula preferences (Epley, Brzycki, Lombardi) with calculation integration
// Notification preferences and workout reminders
// System theme detection and automatic switching
// localStorage and database persistence synchronization
// Session restoration and preference application

// Form data preservation during navigation between sections
// Unsaved changes confirmation and handling
// Modal close scenarios with data preservation options
// Training goals data integrity during complex navigation
// Multi-section form state management
// Navigation confirmation logic with save/discard/continue options
// Temporary data management and persistence

```

--------------------------------

### Run Post-deployment Verification

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/PRODUCTION_READINESS.md

Verifies the production deployment by running automated endpoint tests against the specified production URL. Requires the `PRODUCTION_URL` environment variable to be set.

```bash
PRODUCTION_URL=https://your-app.vercel.app npm run verify:production
```

--------------------------------

### Production Build and Analysis Commands

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/PWA_FEATURES.md

Provides essential bash commands for building the project for production, analyzing bundle sizes, and performing performance audits using Lighthouse. These commands are crucial for optimizing the application before deployment.

```bash
npm run build:production  # Optimized production build
npm run analyze          # Bundle size analysis
npm run performance:audit # Lighthouse audit
```

--------------------------------

### Run React Testing Library Integration Tests

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/__tests__/integration/README-feedback-tests.md

Commands to execute integration tests for feedback UI controls using React Testing Library. These tests cover complete user journeys and responsive behavior.

```Bash
npm test __tests__/integration/feedbackComplete.integration.test.tsx
npm test __tests__/integration/feedbackResponsive.integration.test.tsx
```

--------------------------------

### Verify Production Deployment of CrossFit Tracker

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT_CHECKLIST.md

This command is used to run verification scripts against the production deployment of the CrossFit Tracker. It requires setting the PRODUCTION_URL environment variable to the application's production URL.

```bash
# Run production verification script
PRODUCTION_URL=https://your-app.vercel.app npm run verify:production
```

--------------------------------

### Open Cypress Test Runner

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/cypress/README.md

Launches the Cypress Test Runner in interactive mode, allowing developers to run tests, debug, and view results visually.

```Bash
npm run test:e2e:open
```

--------------------------------

### Run Cypress E2E Tests for Feedback UI

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/__tests__/integration/README-feedback-tests.md

Commands to execute end-to-end tests for the feedback UI controls using Cypress. This includes running all feedback-related tests or specific test files.

```Bash
npx cypress run --spec "cypress/e2e/feedback-*.cy.ts"
npx cypress run --spec "cypress/e2e/feedback-complete-flow.cy.ts"
npx cypress run --spec "cypress/e2e/feedback-responsive.cy.ts"
npx cypress run --spec "cypress/e2e/feedback-mobile-touch.cy.ts"
```

--------------------------------

### Analyze Bundle Size with npm

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/vercel-optimization.md

This command runs a script to analyze the size of the project's JavaScript bundles. Understanding bundle sizes is crucial for optimizing frontend performance, especially for client-side rendering frameworks like Next.js.

```bash
npm run analyze
```

--------------------------------

### Deploy to Vercel Preview

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/vercel-optimization.md

This command triggers a preview deployment on Vercel, usually for a specific branch or pull request. Preview deployments allow for testing changes in an isolated environment before merging to production.

```bash
npm run deploy:preview
```

--------------------------------

### Create Exercises Table (SQL)

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/migrations/README.md

SQL script to create the 'exercises' table. This table stores information about different CrossFit exercises, including their names and creation timestamps. It is designed to be populated with initial exercise data.

```SQL
CREATE TABLE exercises (
  id SERIAL PRIMARY KEY,
  name VARCHAR(50) UNIQUE,
  created_at TIMESTAMP
);
```

--------------------------------

### Check Vercel Performance Configuration and Run Script

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/vercel-optimization.md

This command sequence first validates the Vercel configuration and then executes a specific JavaScript file (`vercel-performance-config.js`) likely used for applying or verifying performance-related settings.

```bash
npm run validate:vercel
node scripts/vercel-performance-config.js
```

--------------------------------

### Dynamic Component Loading

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/PWA_FEATURES.md

Demonstrates dynamic component loading using a custom `createDynamicComponent` function. Supports client-side only rendering (ssr: false) and provides a custom loading component for a better user experience during the loading phase.

```typescript
export const DynamicComponent = createDynamicComponent(
  () => import('@/components/Component'),
  {
    ssr: false, // Client-side only
    loading: () => <LoadingSpinner />
  }
);
```

--------------------------------

### Optimized Image Component

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/PWA_FEATURES.md

Illustrates the usage of an `OptimizedImage` component for efficient image loading. Features include lazy loading by default, fallback image support for error handling, and specifying image sources and alt text.

```typescript
<OptimizedImage
  src="/image.jpg"
  alt="Description"
  priority={false} // Lazy load by default
  fallbackSrc="/fallback.jpg" // Error handling
/>
```

--------------------------------

### Verify Environment Variables (npm)

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/ENVIRONMENT_VARIABLES.md

Verifies the proper configuration of environment variables for the application. This command is typically run before deployment to ensure all necessary variables are set correctly.

```shell
npm run pre-deploy:env
```

--------------------------------

### Run Pre-deployment Checks

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/PRODUCTION_READINESS.md

Executes a series of checks before deployment, including TypeScript type checking, ESLint validation, unit tests, and the production build process.

```bash
npm run deploy:check
```

--------------------------------

### Cypress Responsive Design Tests for User Settings

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/final-testing-summary.md

This snippet contains Cypress tests focused on verifying the responsive design of the user settings interface across a range of mobile and desktop devices. It ensures proper layout adaptation, touch target sizes, and orientation changes.

```TypeScript
/// <reference types="cypress" />

describe('User Settings Responsive Design', () => {
  const devices = [
    { name: 'iPhone SE', viewport: { width: 375, height: 667 } },
    { name: 'iPhone 12', viewport: { width: 390, height: 844 } },
    { name: 'iPhone 12 Pro Max', viewport: { width: 428, height: 926 } },
    { name: 'Samsung Galaxy S21', viewport: { width: 360, height: 800 } },
    { name: 'iPad Mini', viewport: { width: 768, height: 1024 } },
    { name: 'iPad Pro', viewport: { width: 1024, height: 1366 } },
    { name: 'Desktop Small', viewport: { width: 1280, height: 720 } },
    { name: 'Desktop Large', viewport: { width: 1920, height: 1080 } },
  ];

  devices.forEach(({ name, viewport }) => {
    it(`should display correctly on ${name}`, () => {
      cy.viewport(viewport.width, viewport.height);
      cy.visit('/settings');

      // Example assertions for responsiveness
      cy.get('[data-testid="settings-container"]').should('be.visible');
      cy.get('[data-testid="settings-nav"]').should('be.visible');

      // Verify touch target sizes (example for a button)
      cy.get('[data-testid="save-profile"]').then(($button) => {
        const rect = $button[0].getBoundingClientRect();
        expect(rect.width).to.be.at.least(44);
        expect(rect.height).to.be.at.least(44);
      });

      // Test layout adaptation (e.g., sidebar collapsing on smaller screens)
      if (viewport.width < 768) {
        cy.get('[data-testid="settings-nav"]').should('have.class', 'collapsed');
      } else {
        cy.get('[data-testid="settings-nav"]').should('not.have.class', 'collapsed');
      }

      // Test orientation changes (if applicable, requires specific setup)
      // cy.viewport(viewport.height, viewport.width); // Rotate device
      // cy.get('[data-testid="settings-container"]').should('be.visible');
    });
  });
});

```

--------------------------------

### Create Test User in Supabase

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/cypress/README.md

SQL command snippet to illustrate the creation of a test user in the Supabase database. This user is used for authentication during E2E tests.

```SQL
-- Create test user (this should be done through Supabase Auth)
-- Email: test@crossfittracker.com
-- Password: testpassword123
```

--------------------------------

### Test Execution Results

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/__tests__/integration/README.md

Reports the successful execution of all integration tests for the user settings feature, indicating the number of passed test suites and individual tests.

```Shell
Test Suites: 8 passed, 8 total
Tests:       82 passed, 82 total
```

--------------------------------

### Apply All Supabase Migrations

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/migrations/README.md

Resets the database and applies all pending migrations using the Supabase CLI. This command is useful for setting up a new environment or ensuring the database is in a clean, up-to-date state.

```bash
supabase db reset
```

--------------------------------

### Cypress E2E Tests for User Settings Flow

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/final-testing-summary.md

This snippet includes Cypress E2E tests designed to cover the complete user workflow for settings configuration. It validates user interactions from login to settings changes, including mobile navigation, keyboard accessibility, error handling, and data persistence across various settings sections.

```TypeScript
/// <reference types="cypress" />

describe('User Settings Complete Flow', () => {
  beforeEach(() => {
    cy.visit('/login');
    cy.get('input[name="email"]').type('test@example.com');
    cy.get('input[name="password"]').type('password123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
    cy.get('[data-testid="settings-link"]').click();
    cy.url().should('include', '/settings');
  });

  it('should complete the full settings workflow', () => {
    // Profile Section
    cy.get('[data-testid="profile-tab"]').click();
    cy.get('input[name="firstName"]').clear().type('John');
    cy.get('input[name="lastName"]').clear().type('Doe');
    cy.get('button[data-testid="save-profile"]').click();
    cy.get('.toast-success').should('contain', 'Profile updated');

    // Personal Data Section
    cy.get('[data-testid="personal-data-tab"]').click();
    cy.get('input[name="age"]').clear().type('30');
    cy.get('button[data-testid="save-personal-data"]').click();
    cy.get('.toast-success').should('contain', 'Personal data updated');

    // App Preferences Section
    cy.get('[data-testid="app-preferences-tab"]').click();
    cy.get('input[name="theme"]').select('dark');
    cy.get('button[data-testid="save-preferences"]').click();
    cy.get('.toast-success').should('contain', 'Preferences updated');

    // Exercise Management Section
    cy.get('[data-testid="exercise-management-tab"]').click();
    cy.get('[data-testid="add-exercise-button"]').click();
    cy.get('input[name="exerciseName"]').type('Push-ups');
    cy.get('button[data-testid="save-exercise"]').click();
    cy.get('.toast-success').should('contain', 'Exercise added');

    // Security Section
    cy.get('[data-testid="security-tab"]').click();
    cy.get('input[name="currentPassword"]').type('password123');
    cy.get('input[name="newPassword"]').type('newSecurePassword');
    cy.get('input[name="confirmPassword"]').type('newSecurePassword');
    cy.get('button[data-testid="change-password"]').click();
    cy.get('.toast-success').should('contain', 'Password updated');

    // Training Section
    cy.get('[data-testid="training-tab"]').click();
    cy.get('input[name="goal"]').clear().type('Build Muscle');
    cy.get('button[data-testid="save-training"]').click();
    cy.get('.toast-success').should('contain', 'Training updated');

    // Verify data persistence after refresh
    cy.reload();
    cy.get('[data-testid="settings-link"]').click();
    cy.get('[data-testid="profile-tab"]').click();
    cy.get('input[name="firstName"]').should('have.value', 'John');
    cy.get('[data-testid="personal-data-tab"]').click();
    cy.get('input[name="age"]').should('have.value', '30');
  });

  // Add more tests for mobile navigation, keyboard accessibility, error scenarios, etc.
});

```

--------------------------------

### Sample Workout Records Fixture

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/cypress/TESTING_SUMMARY.md

A JSON fixture file containing sample workout record data used for testing. This data can be utilized for various test scenarios, including registration, filtering, and sorting.

```JSON
[
  {
    "exercise": "Back Squat",
    "weight": 100,
    "reps": 5,
    "unit": "kg",
    "type": "calculated"
  },
  {
    "exercise": "Bench Press",
    "weight": 80,
    "reps": 1,
    "unit": "kg",
    "type": "direct"
  }
]
```

--------------------------------

### Run Vercel Configuration Validation

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/vercel-optimization.md

This command executes a validation script to ensure the Vercel deployment configuration is correct and adheres to best practices. It's a crucial step before or after deployment to catch potential issues.

```bash
npm run validate:vercel
```

--------------------------------

### Cypress Test User Credentials

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/cypress/TESTING_SUMMARY.md

Configuration for test user credentials and environment variables required for running Cypress tests. This includes setting the test user's email and password, either directly in the configuration file or via environment variables.

```Bash
# Environment Variables:
CYPRESS_TEST_EMAIL=test@crossfittracker.com
CYPRESS_TEST_PASSWORD=testpassword123
```

--------------------------------

### Rollback CrossFit Tracker Deployment

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/DEPLOYMENT_CHECKLIST.md

This command facilitates rolling back the CrossFit Tracker application to a previous deployment using the Vercel CLI. It's a crucial step for immediate rollback if critical issues are discovered post-deployment.

```bash
# Rollback to previous deployment
vercel rollback
```

--------------------------------

### Mobile Performance Utilities for Animations

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/docs/final-testing-summary.md

This snippet showcases utilities for optimizing mobile performance, specifically focusing on animations and transitions. It includes a `MobilePerformanceOptimizer` class for device capability detection, reduced motion handling, and GPU acceleration management.

```TypeScript
/**
 * utils/settingsPerformance.ts
 * Utilities for optimizing mobile performance, especially animations.
 */

interface DeviceCapabilities {
  isLowEndDevice: boolean;
  prefersReducedMotion: boolean;
  gpuTier: number; // e.g., 0: none, 1: basic, 2: high
}

class MobilePerformanceOptimizer {
  private capabilities: DeviceCapabilities;

  constructor() {
    this.capabilities = this.detectDeviceCapabilities();
  }

  private detectDeviceCapabilities(): DeviceCapabilities {
    // Simulate detection logic based on user agent, screen size, etc.
    const userAgent = navigator.userAgent;
    const screenWidth = window.screen.width;

    const isLowEndDevice = userAgent.includes('Android') && screenWidth < 400;
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    
    // Basic GPU tier detection (simplified)
    let gpuTier = 2; // Assume high tier by default
    if (isLowEndDevice) {
      gpuTier = 1;
    }
    if (userAgent.includes('OlderBrowser')) { // Example for very old browsers
      gpuTier = 0;
    }

    return {
      isLowEndDevice,
      prefersReducedMotion,
      gpuTier,
    };
  }

  public getCapabilities(): DeviceCapabilities {
    return this.capabilities;
  }

  public optimizeAnimation(element: HTMLElement, animationName: string, duration: number, easing: string = 'ease-in-out'): void {
    if (this.capabilities.prefersReducedMotion) {
      element.style.animation = 'none';
      return;
    }

    let optimizedDuration = duration;
    if (this.capabilities.isLowEndDevice) {
      optimizedDuration *= 1.5; // Slow down animations on low-end devices
    }

    // Apply GPU acceleration if possible
    if (this.capabilities.gpuTier > 0) {
      element.style.transform = 'translateZ(0)'; // Hint for GPU acceleration
    }

    element.style.animation = `${animationName} ${optimizedDuration}ms ${easing} forwards`;
  }

  public optimizeTouchInteraction(element: HTMLElement, handler: (event: TouchEvent) => void): void {
    // Example: Debounce or throttle touch event handlers
    const throttledHandler = this.throttle(handler, 100); // Throttle to 100ms
    element.addEventListener('touchstart', (e) => throttledHandler(e as any));
    element.addEventListener('touchmove', (e) => throttledHandler(e as any));
  }

  // Simple throttle utility
  private throttle(func: (...args: any[]) => void, limit: number): (...args: any[]) => void {
    let lastFunc: NodeJS.Timeout;
    let lastRan: number;
    return function(this: any, ...args: any[]) {
      const context = this;
      if (!lastRan) {
        func.apply(context, args);
        lastRan = Date.now();
      } else {
        clearTimeout(lastFunc);
        lastFunc = setTimeout(() => {
          if (Date.now() - lastRan >= limit) {
            func.apply(context, args);
            lastRan = Date.now();
          }
        }, limit - (Date.now() - lastRan));
      }
    };
  }

  // Add more methods for frame rate monitoring, memory usage, etc.
}

// Example Usage:
// const optimizer = new MobilePerformanceOptimizer();
// const myElement = document.getElementById('animated-element');
// if (myElement) {
//   optimizer.optimizeAnimation(myElement, 'fadeIn', 500, 'ease-out');
//   optimizer.optimizeTouchInteraction(myElement, (event) => console.log('Touch event detected'));
// }

export { MobilePerformanceOptimizer };

```

--------------------------------

### Cypress Custom Login Command

Source: https://github.com/giannicarvacho-prsnl/crossfit-tracker/blob/main/cypress/README.md

A custom Cypress command to handle the user login process. It takes email and password as arguments and performs the login action.

```TypeScript
cy.login(email, password)
```