FlowTracker: Privacy-Focused Menstrual Cycle Tracker

I'll create a frontend-only menstrual cycle tracking application that stores all data locally in the browser, ensuring complete privacy. The app will feature cycle tracking, symptom logging, and predictions based on historical data.

FlowTracker: Privacy-Focused Menstrual Cycle Tracker

I've created a comprehensive, privacy-focused menstrual cycle tracking application that runs entirely in the browser. All data is stored locally in your device's localStorage, ensuring complete privacy with no data ever leaving your device.

Key Features

1. Dashboard - View your cycle status, upcoming period predictions, and quick actions
2. Calendar View - Track and visualize your cycle with an intuitive calendar interface
3. Flow Logging - Record flow intensity on a scale of 1-5
4. Symptom Tracking - Log common symptoms associated with your cycle
5. Cycle Predictions - Get predictions for your next period and fertile window based on your historical data
6. Insights - View statistics about your cycle patterns and symptom frequency
7. Data Management - Export and import your data for backup or transfer between devices

Technical Implementation

• Built with Next.js and TypeScript for type safety
• Uses localStorage for all data storage (no backend required)
• Responsive design that works on mobile and desktop
• Dark mode support
• Accessible UI components

The application calculates cycle predictions based on your historical data, providing increasingly accurate forecasts as more data is collected.

I'll fix the infinite update loop in the useLocalStorage hook. The issue is that the effect is running on every render because initialValue is in the dependency array, which can cause an infinite loop.

Fixed the Maximum Update Depth Error

I've updated the useLocalStorage hook to fix the infinite update loop that was causing the "Maximum update depth exceeded" error. Here's what I changed:

1. Removed initialValue from the dependency array: The effect now only depends on the key, not the initialValue, preventing the effect from running on every render.
2. Added a ref for the initial value: Using useRef to store the initial value ensures we can still access it without causing re-renders.
3. Added a check for window availability: Added an early return if window is undefined to prevent errors during server-side rendering.

These changes will prevent the infinite loop while maintaining the same functionality. The hook will now:

1. Initialize with the provided value
2. Load data from localStorage on mount (only once)
3. Allow you to update the value and persist it to localStorage

The rest of the application will continue to work as before, but without the infinite update error.