Lovable Prompt Creator - AI Prompt Generator

 PROJECT SETUP
The project structure for the gym app will be organized as follows:

```
/gym-app
│
├── /src
│   ├── /components
│   │   ├── Heatmap.jsx
│   │   ├── Timer.jsx
│   │   ├── WorkoutEditor.jsx
│   │   ├── WorkoutHistory.jsx
│   │   ├── OneRepMaxCalculator.jsx
│   │   └── StreakTracker.jsx
│   │
│   ├── /hooks
│   │   └── useWorkout.js
│   │
│   ├── /contexts
│   │   └── WorkoutContext.js
│   │
│   ├── /utils
│   │   └── calculations.js
│   │
│   ├── App.jsx
│   ├── index.js
│   └── styles.css
│
├── /public
│   └── index.html
│
├── package.json
└── README.md
```

DESIGN REQUIREMENTS
- Visual Style: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- Color Mode: Light theme with dark text on light backgrounds
- Primary Color: #1978E5 (accent for buttons, links, highlights)
- Typography: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- Border Radius: 8px (moderately rounded) for buttons, cards, and inputs

CORE COMPONENTS
1. **Heatmap**: A visual representation of muscle group engagement, using a realistic color scheme for muscle activation.
2. **Timer**: A rest timer that auto-starts between sets and provides sound notifications.
3. **WorkoutEditor**: Component for editing and deleting saved workouts.
4. **WorkoutHistory**: Displays a history of past workout sessions organized by date.
5. **OneRepMaxCalculator**: A built-in calculator for determining the one-rep max for each exercise.
6. **StreakTracker**: Weekly workout streak tracker presented as a calendar heatmap, similar to GitHub's contribution graph.

IMPLEMENTATION APPROACH
1. **Heatmap Component**: 
   - Use a library like Chart.js to create the heatmap.
   - Ensure realistic color mapping based on muscle group activation.

   Example:
   ```jsx
   import { Heatmap } from 'react-chartjs-2';

   const MuscleHeatmap = () => {
       const data = {
           // Data structure for heatmap
       };
       return <Heatmap data={data} />;
   };
   ```

2. **Timer Component**: 
   - Implement useEffect for timing and sound notification.
   
   Example:
   ```jsx
   const Timer = () => {
       const [time, setTime] = useState(0);
       useEffect(() => {
           const timer = setInterval(() => setTime(prev => prev + 1), 1000);
           return () => clearInterval(timer);
       }, []);
       return <div>{time}s</div>;
   };
   ```

3. **WorkoutEditor Component**: 
   - Include forms for editing and deleting workouts.
   
   Example:
   ```jsx
   const WorkoutEditor = ({ workout }) => {
       const handleDelete = () => {
           // Logic to delete workout
       };
       return (
           <div>
               <h2>Edit Workout</h2>
               <button onClick={handleDelete}>Delete</button>
           </div>
       );
   };
   ```

ARCHITECTURE CONSIDERATIONS
- Utilize React Context for managing global state related to workouts.
- Follow a component-based architecture to ensure reusability and separation of concerns.
- Implement hooks for shared logic, such as workout calculations and timers.

ERROR HANDLING
- Implement try-catch blocks in asynchronous functions for API calls.
- Validate user input in forms to prevent errors (e.g., non-numeric values in the One Rep Max Calculator).

TESTING STRATEGY
- Use Jest and React Testing Library for unit tests on components.
- Ensure integration tests cover interactions between components, especially for the WorkoutEditor and WorkoutHistory.
- Implement end-to-end tests using Cypress to simulate user behavior throughout the app.

This prompt is crafted to provide detailed, production-ready code that follows best practices for Cursor, addressing all specified needs for your gym app.