75 SMART Challenge Tracker

An interactive React web application for tracking your 75-day fitness journey with Sustainable Momentum And Real Transformation.

Features

📝 Daily Input Tracking

Weight tracking with daily measurements
Calorie consumption tracking (2000 calorie target)
Running data including:
- Time (minimum 20 minutes)
- Distance
- Calories burned
- Average pace per mile
- Elevation gain
- Average heart rate
Additional workout tracking:
- Strength training or recovery sessions
- Length (minimum 20 minutes)
- Calories burned
- Average heart rate

📊 Interactive Dashboard

Progress overview with key statistics
Weight progress line chart over 75 days
Calorie intake tracking vs 2000 target
Running performance visualization
Workout type distribution pie chart
Recent activity timeline

🔗 Sharing Capability

Shareable dashboard link without input UI
Perfect for sharing progress with friends/trainers

Tech Stack

React 18 with TypeScript
Vite for fast development and building
ShadCN UI components for beautiful, accessible interface
Tailwind CSS for responsive styling with custom CSS variables
Recharts for data visualization
Lucide React for icons
Local Storage for data persistence
Radix UI primitives for accessible components
Date-fns for date handling
Class Variance Authority for component variants

ShadCN UI Components

The project uses ShadCN UI with the following configuration:

Configuration (`components.json`)

{
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Installed Components

Located in src/components/ui/:

Badge (badge.tsx) - Status indicators and labels
Button (button.tsx) - Primary interaction buttons with variants
Calendar (calendar.tsx) - Date selection calendar
Card (card.tsx) - Content containers with header/content structure
DatePicker (date-picker.tsx) - Date input with popover calendar
Input (input.tsx) - Form input fields
Label (label.tsx) - Form field labels
Popover (popover.tsx) - Floating content containers
Progress (progress.tsx) - Progress bars and indicators
Select (select.tsx) - Dropdown select menus
Separator (separator.tsx) - Visual dividers
Tabs (tabs.tsx) - Tabbed navigation interface

Component Usage Pattern

// Example: Using Card and Button components
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

// Components follow ShadCN conventions with CSS variables for theming

Project Architecture

Directory Structure

/
├── public/
├── src/
│   ├── components/
│   │   ├── ui/                 # ShadCN UI components
│   │   │   ├── badge.tsx
│   │   │   ├── button.tsx
│   │   │   ├── calendar.tsx
│   │   │   ├── card.tsx
│   │   │   ├── date-picker.tsx
│   │   │   ├── input.tsx
│   │   │   ├── label.tsx
│   │   │   ├── popover.tsx
│   │   │   ├── progress.tsx
│   │   │   ├── select.tsx
│   │   │   ├── separator.tsx
│   │   │   └── tabs.tsx
│   │   ├── App.tsx             # Secondary app wrapper (unused)
│   │   ├── DailyInput.tsx      # Daily entry form component
│   │   ├── Dashboard.tsx       # Progress visualization component
│   │   └── HistoryView.tsx     # Historical data view component
│   ├── lib/
│   │   └── utils.ts            # Utility functions (cn, date helpers)
│   ├── types/
│   │   └── index.ts            # TypeScript type definitions
│   ├── App.tsx                 # Main application component
│   ├── index.css               # Global styles and ShadCN variables
│   └── main.tsx                # Application entry point
├── components.json             # ShadCN CLI configuration
├── tailwind.config.js          # Tailwind CSS configuration
├── tsconfig.json               # TypeScript configuration
├── vite.config.ts              # Vite bundler configuration
└── package.json                # Dependencies and scripts

Data Models

The application uses strongly typed interfaces defined in src/types/index.ts:

interface DailyEntry {
  date: string;           // ISO date string
  weight: number;
  calories: number;
  run: RunData;
  additionalWorkout: AdditionalWorkoutData;
}

interface RunData {
  time: number;           // in seconds
  distance: number;       // in miles
  calories: number;
  avgPacePerMile: string; // "MM:SS" format
  elevationGain: number;  // in feet
  avgHeartRate: number;   // bpm
}

interface AdditionalWorkoutData {
  type: 'strength' | 'recovery';
  length: number;         // in minutes
  calories: number;
  avgHeartRate: number;   // bpm
}

interface ChallengeData {
  startDate: string;      // ISO date string
  entries: Record<string, DailyEntry>; // key is date string
  targetCalories: number; // default 2000
}

Configuration Details

Vite Configuration

Path Aliases: @/* maps to src/*
React Plugin: Hot reload and JSX transform
TypeScript: Full TypeScript support with strict mode

Tailwind CSS Setup

CSS Variables: Uses HSL color space for theming
ShadCN Integration: Custom CSS properties for light/dark themes
Component Classes: Pre-configured utility classes for ShadCN components

TypeScript Configuration

Strict Mode: Enabled for type safety
Path Mapping: @/* alias for clean imports
JSX: React JSX transform

Getting Started

Prerequisites

Node.js 18+ installed
npm or yarn package manager

Installation

Install dependencies:
```
npm install
```
Start development server:
```
npm run dev
```
Open your browser: Visit http://localhost:5173

Building for Production

npm run build      # TypeScript compilation + Vite build
npm run preview    # Preview production build locally

Adding New ShadCN Components

To add additional ShadCN components:

npx shadcn-ui@latest add [component-name]

This will:

Add the component to src/components/ui/
Install required dependencies
Update imports automatically

Usage

Daily Entry

Navigate to the Daily Input tab
Fill out your daily metrics:
- Date, weight, and calories consumed
- Running session details
- Additional workout information
Click Save Daily Entry

Viewing Progress

Switch to the Dashboard tab
View your progress charts and statistics
Track your journey over the 75-day challenge

Viewing History

Navigate to the History tab
Browse all previous entries
Filter and search historical data
Edit or delete past entries

Sharing Your Progress

Click the Share Dashboard button
Copy the generated link
Share with friends - they'll see your dashboard without editing access

Exporting Data for Deployment

Click the Export Data button
JSON data is copied to clipboard
Paste into public/data.json
Commit and push to update deployed version
Deployed site will show your latest progress

The 75 SMART Challenge

Core Principles

40 minutes of intentional movement, 7 days per week
20 minutes minimum cardio every single day
20 minutes additional work (weights or extended cardio)
2,000 calorie daily tracking
Progressive overload in all areas

Success Rules

Something is better than nothing - 10 minutes beats zero
Form over everything - Quality over quantity
Track honestly - Accurate data leads to real results
Progress photos and measurements - Take them every 2 weeks

Data Storage & Persistence

Data Loading Priority

Remote Data (public/data.json) - Primary source for deployed version
Local Storage (localStorage) - Fallback and working storage for daily entries
Default State - Empty challenge with today's date

Data Architecture

The application uses a hybrid approach:

Production/Shared View: Loads from public/data.json (read-only)
Local Development: Uses localStorage for real-time updates
Data Export: Manual sync from localStorage to data.json

Data Persistence Workflow

Daily Usage: Input data through UI → saved to localStorage
Export: Click "Export Data" button → copies localStorage JSON
Deploy Update: Paste exported JSON into public/data.json → commit/push
Public Access: Deployed site loads updated data from data.json

Data Structure

All data follows the ChallengeData interface:

interface ChallengeData {
  startDate: string;      // ISO date string (e.g., "2024-01-15")
  entries: Record<string, DailyEntry>; // key is date string
  targetCalories: number; // default 2000
}

Storage Keys

localStorage: 75-smart-challenge-data
Migration: 75-smart-challenge-migration-v1
Remote: /public/data.json

Deployment Options

Static Hosting (Recommended)

The app is designed for static hosting with JSON data files:

Deployment Platforms:

Netlify: Automatic deployments from GitHub, free tier
Vercel: Zero-config deployments, automatic HTTPS
GitHub Pages: Free hosting directly from repository
Firebase Hosting: Google's fast global CDN

Deployment Steps:

Build the application: npm run build
Deploy dist/ folder to your hosting platform
Update public/data.json to sync your progress
Configure automatic deployments from your Git repository

Environment Configuration

No Environment Variables: All configuration in code
No Backend Required: Pure frontend with JSON data
HTTPS Recommended: For clipboard API and modern web features

Data Sync Strategy

Development: Use UI normally, data saves to localStorage
Production Update: Export localStorage → update data.json → commit
Automation: Consider GitHub Actions to periodically sync data

Development

Key Dependencies

Runtime Dependencies:

react & react-dom: React framework
@radix-ui/*: Headless UI primitives for ShadCN
class-variance-authority: Component variant management
clsx & tailwind-merge: Conditional CSS class handling
lucide-react: Icon library
recharts: Chart visualization library
date-fns: Date manipulation utilities
react-day-picker: Calendar component

Development Dependencies:

vite: Fast build tool and dev server
typescript: Type checking and compilation
tailwindcss: Utility-first CSS framework
eslint: Code linting and formatting
@vitejs/plugin-react: React support for Vite

Available Scripts

npm run dev - Start development server with hot reload
npm run build - TypeScript compilation + production build
npm run lint - Run ESLint for code quality
npm run preview - Preview production build locally

Code Style and Conventions

TypeScript: Strict mode enabled, explicit typing required
Components: Functional components with TypeScript interfaces
Styling: Tailwind CSS classes, ShadCN component variants
State Management: React hooks (useState, useEffect) with localStorage
File Naming: PascalCase for components, camelCase for utilities
Data Loading: Async/await pattern for fetching remote data
Error Handling: Try/catch blocks with console logging and user feedback

Data Management Patterns

Hybrid Storage: Remote JSON file (public) + localStorage (working)
Priority Loading: Try remote data.json first, fallback to localStorage
Export Functionality: One-click copy of localStorage to clipboard
Migration Support: Automatic data format migrations with version tracking

AI Development Guidelines

For future AI agents working on this codebase:

Architecture Understanding

Main App: src/App.tsx - handles data loading, state management, routing
Components: Feature-based components in src/components/
UI Library: ShadCN components in src/components/ui/
Types: Centralized in src/types/index.ts
Utils: Helper functions in src/lib/utils.ts

Data Flow

Load: data.json → localStorage → default state
Update: UI → state → localStorage (auto-save)
Export: localStorage → clipboard → manual paste to data.json
Share: Generate URL with ?share=true parameter

Key Implementation Details

Time Storage: All times stored in seconds, converted to MM:SS for display
Date Handling: ISO date strings (YYYY-MM-DD) as keys
Chart Data: Computed from entries in useMemo hooks
Form Validation: Minimum 20 minutes for run time
Migration: Automatic data format updates with version checking

Adding Features

New UI Components: Use existing ShadCN components when possible
Data Fields: Update types/index.ts interfaces first
Charts: Use Recharts with consistent styling patterns
Storage: Maintain backward compatibility with migration functions

Testing Approach

Manual Testing: All three tabs (Input, History, Dashboard)
Data Persistence: Test localStorage and data.json loading
Share Mode: Verify read-only dashboard works
Export Function: Confirm JSON clipboard copy works
Responsive: Test on mobile and desktop viewports

Contributing

For Human Developers

Fork the repository
Create a feature branch
Make your changes following the established patterns:
- Use existing ShadCN components when possible
- Follow TypeScript strict mode requirements
- Maintain data model consistency
- Update type definitions as needed
Test thoroughly (all tabs, data persistence, sharing)
Submit a pull request

For AI Agents

Read the Architecture: Understand the hybrid data storage model
Follow Type Safety: Update src/types/index.ts for any data model changes
Maintain Backward Compatibility: Use migration functions for breaking changes
Test Export Flow: Ensure localStorage → JSON export works correctly
Preserve UI Patterns: Follow existing ShadCN component usage
Update Documentation: Keep this README current with any architectural changes

Testing Checklist

All three tabs load and function correctly
Daily input saves to localStorage
Data export copies valid JSON to clipboard
Share mode shows read-only dashboard
Remote data.json loading works (if file exists)
localStorage fallback works (if no remote data)
Charts render with proper data
Form validation prevents invalid entries
Responsive design works on mobile/desktop

License

MIT License - See LICENSE file for details

Your future self is counting on the decisions you make today. Make them proud.

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
dist		dist
public		public
src		src
.gitignore		.gitignore
75_smart_challenge.md		75_smart_challenge.md
README.md		README.md
components.json		components.json
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

benkrogh/75smart

Folders and files

Latest commit

History

Repository files navigation