Skelenote - Joint Health Tracker

A modern React application for tracking joint health and pain over time.

Features

• 📊 Visual Tracking: Front and back view skeleton diagrams with clickable joint indicators
• ✅ Interactive Checkboxes: Track 20 different joints organized by body area
• 🎯 Click to Mark: Click directly on joint circles in the skeleton diagrams - they turn red when marked
• 💾 Local State: Current entry is managed in local state for instant UI updates
• 📝 Notes: Add a text note to each log entry using the textarea below the skeletons
• 📅 Timestamped Logs: Save multiple logs per day, each with exact timestamp
• ⏮️ Navigation: Browse through previous logs with fixed-position left/right chevron buttons
• 🗑️ Remove Entry: Delete logs with confirmation; after deletion, the next oldest log is shown, or the newest, or a new entry if none remain
• 🔔 Toast Notifications: Save actions show a dismissible toast in the bottom right, auto-hiding after 5 seconds
• 🎨 Modern UI: Clean, responsive design with dark/light mode support

Project Structure

skelenote/
├── src/
│   ├── components/          # React components
│   │   ├── SkeletonFront.tsx      # Front view skeleton SVG
│   │   ├── SkeletonBack.tsx       # Back view skeleton SVG
│   │   ├── JointCheckbox.tsx      # Individual joint checkbox
│   │   ├── JointChecklist.tsx     # Organized list of all joints
│   │   ├── SkeletonContainer.tsx  # Container for skeletons + checklist
│   │   ├── LogNavigation.tsx      # Navigation controls
│   │   └── Toast.tsx              # Toast notification component
│   ├── hooks/               # Custom React hooks
│   │   ├── useJointState.ts       # Manage individual joint state
│   │   └── useLogNavigation.ts    # Handle log browsing
│   ├── types/               # TypeScript type definitions
│   │   └── index.ts               # JointName, JointState, LogEntry types
│   ├── utils/               # Utility functions
│   │   └── storage.ts             # Local storage helpers
│   ├── App.tsx              # Main application component
│   ├── App.css              # Application styles
│   └── main.tsx             # Application entry point

Tracked Joints

Head & Neck

• Neck

Upper Body

• Left/Right Shoulders
• Left/Right Elbows
• Left/Right Wrists
• Left/Right Hands

Back

• Upper Back
• Lower Back

Lower Body

• Left/Right Hips
• Left/Right Knees
• Left/Right Ankles
• Left/Right Feet

How to Use

1. New Entry: By default, you'll see the "New Entry" page with current timestamp
2. Mark Joints:
   • Click directly on joint circles in the skeleton diagrams (they turn red)
   • Both front and back skeletons are independent
3. Add Notes: Enter any additional information in the textarea below the skeletons; this is saved with the log
4. Save Log: Click the button at the bottom to save to local storage with timestamp; a toast will confirm the save
5. Multiple Logs Per Day: You can save multiple logs on the same day - each gets its own timestamp
6. Browse History: Use the left/right chevron buttons (fixed at about 35% from each side, inside a 60rem container) to navigate through saved logs
7. Remove Entry: Click "Remove Entry" to delete the current log; confirm deletion to proceed. After deletion, the next oldest log is shown, or the newest, or a new entry if none remain
8. Toast Notifications: Save actions show a toast in the bottom right; click "X" to dismiss or wait 5 seconds for it to disappear

Technology Stack

• React 19 with TypeScript
• Vite for fast development and building
• Local State for current entry
• Local Storage for persistent log history
• Custom SVG diagrams for visual representation

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production (base URL is set to '.')
npm run build

# Preview production build
npm run preview

Architecture Highlights

Modular Design

• Separated concerns with dedicated folders for components, hooks, types, and utilities
• Reusable components that can be easily extended or modified
• Type-safe with comprehensive TypeScript definitions

State Management

• Local state for temporary joint selections and notes
• Local storage for persistent log history
• Custom hooks encapsulate storage logic

User Experience

• Intuitive navigation between logs
• Visual skeleton diagrams for easy joint identification
• Responsive design works on all screen sizes
• Toast notifications for feedback

Future Enhancements

• Export logs to CSV/JSON
• Chart/graph visualization of trends
• Multi-language support
• PWA capabilities for offline use

---

Note: Please keep this README up to date with every new feature or change to ensure accurate documentation.