You are an AI assistant tasked with building a single-page React application for a mobile-first experience using Next.js and Tailwind CSS. The application, named 'Sauna Health', aims to help users optimize their sauna experiences for enhanced immune response and overall well-being, based on scientific insights.
**1. PROJECT OVERVIEW:**
Sauna Health is a mobile-first wellness application that empowers users to track their sauna sessions and provides personalized insights and recommendations to strengthen their immune system. The core value proposition is to translate the scientific understanding of how sauna heat exposure impacts immune cells and cytokine responses into actionable advice for the everyday user. It bridges the gap between complex scientific research and practical self-care, helping users leverage the health benefits of saunas effectively.
**2. TECH STACK:**
- **Framework:** Next.js (for SSR/SSG capabilities, API routes if needed later, and a robust development environment)
- **UI Library:** Tailwind CSS (for rapid, utility-first styling)
- **State Management:** React Context API (for global state management of user data and settings) and local component state (useState, useReducer).
- **Routing:** Next.js built-in routing.
- **Deployment:** Vercel (recommended for Next.js projects)
- **Icons:** lucide-react (for clean, accessible icons)
- **Date Handling:** date-fns (for robust date and time manipulation)
**3. CORE FEATURES:**
* **Sauna Session Tracker:**
* **User Flow:** User navigates to the 'Track Session' page. They input details like session duration (e.g., in minutes), temperature (e.g., in Celsius or Fahrenheit), and optional notes (e.g., how they felt, any specific activities). Upon submission, the session data is saved locally or to a mock API endpoint.
* **Details:** The input form should be intuitive with clear labels and input fields. Duration can be a number input with increment/decrement buttons or a simple text input. Temperature should also be a number input, with a unit toggle (C/F) if desired.
* **Immune Response Summary:**
* **User Flow:** The 'Dashboard' or 'Summary' page displays an overview of the user's sauna habits and a simplified representation of potential immune system impact. This section aggregates data from past sessions.
* **Details:** This feature will be simplified for MVP. It will show metrics like 'Total Sessions', 'Average Session Duration', 'Frequency (Sessions per Week)'. A basic visualization (e.g., a chart or a simple score) might indicate a trend related to immune support based on consistent sauna use, referencing the core scientific premise.
* **Personalized Recommendations:**
* **User Flow:** Based on tracked data (frequency, duration, potentially user-reported feelings), the 'Recommendations' section offers tailored advice. For example, 'Consider increasing your session duration slightly next time' or 'Ensure adequate hydration after your next sauna.'
* **Details:** For MVP, recommendations will be rule-based. E.g., If sessions are consistently short (<10 mins), suggest slightly longer sessions. If frequency is low, encourage regularity. If notes mention feeling unwell post-sauna, suggest hydration or shorter duration. These rules will be hardcoded initially.
* **Educational Content:**
* **User Flow:** A dedicated 'Learn' or 'Articles' section provides bite-sized information about saunas, heat exposure, and the immune system.
* **Details:** This section will display a list of articles. Each article will have a title, a short excerpt, and a link to a detailed view (which can just be a static display of the full content for MVP). Content will focus on explaining the scientific premise in simple terms.
**4. UI/UX DESIGN:**
- **Layout:** Mobile-first, single-page application feel. A persistent navigation bar (bottom or side) for key sections (Dashboard, Track, Recommendations, Learn, Settings). Clean, uncluttered interface.
- **Color Palette:** Calming and natural colors. Primary: A deep, calming blue or green. Secondary: A warm, earthy tone (like terracotta or sand). Accent: A brighter, energetic color (like a subtle coral or yellow) for calls to action and highlights. Neutral: Whites, off-whites, and grays for background and text.
- **Typography:** Clean, readable sans-serif fonts. Example: Inter or Poppins for headings and body text. Ensure good contrast ratios.
- **Responsive Design:** The layout must adapt seamlessly from small mobile screens to larger tablet and desktop views. Use Tailwind's responsive prefixes (sm:, md:, lg:) extensively. Ensure touch targets are adequately sized on mobile.
- **Component Structure:** A clear hierarchy. Avoid deeply nested structures where possible. Utilize sections and cards to organize information.
**5. DATA MODEL:**
- **State Structure (Context API):**
```javascript
// Example state structure
{
userProfile: {
// User preferences like unit system (C/F), notification settings etc.
},
saunaSessions: [
{
id: string; // UUID
timestamp: Date; // Date and time of session
durationMinutes: number;
temperature: number;
temperatureUnit: 'C' | 'F';
notes: string;
// future: immuneResponseScore: number;
}
],
// Potentially derived stats for dashboard
dashboardStats: {
totalSessions: number;
averageDuration: number;
averageTemperature: number;
frequency: string; // e.g., 'Low', 'Medium', 'High'
}
}
```
- **Local Storage:** Use `localStorage` to persist the `saunaSessions` and `userProfile` data client-side for the MVP. No backend database initially.
- **Mock Data Formats:** Session data will follow the structure defined above. Educational content will be an array of objects, each with `id`, `title`, `excerpt`, `content`.
**6. COMPONENT BREAKDOWN:**
* **`Layout.jsx`:**
* Props: `children` (page content).
* Responsibility: Overall page structure, including Header, Footer, and Navigation.
* **`Header.jsx`:**
* Props: None.
* Responsibility: Application title/logo, potentially user status indicator.
* **`Navigation.jsx`:**
* Props: `currentPath` (string).
* Responsibility: Main navigation links (Dashboard, Track, Recommendations, Learn). Highlights the active link.
* **`Dashboard.jsx`:**
* Props: `sessions` (array).
* Responsibility: Displays the `ImmuneResponseSummary` and `Recommendations` components. Fetches and displays derived stats.
* **`SessionTracker.jsx`:**
* Props: `addSession` (function).
* Responsibility: Form for inputting new sauna session data.
* Sub-components: `DurationInput.jsx`, `TemperatureInput.jsx`, `NotesInput.jsx`, `SubmitButton.jsx`.
* **`SessionList.jsx`:**
* Props: `sessions` (array).
* Responsibility: Displays a list or cards of past sauna sessions.
* **`RecommendationCard.jsx`:**
* Props: `recommendation` (object).
* Responsibility: Displays a single personalized recommendation.
* **`ArticleList.jsx`:**
* Props: `articles` (array).
* Responsibility: Displays a list of educational articles (title and excerpt).
* **`ArticleView.jsx`:**
* Props: `article` (object).
* Responsibility: Displays the full content of a selected educational article.
* **`StatsCard.jsx`:**
* Props: `title` (string), `value` (string | number).
* Responsibility: Reusable card for displaying dashboard statistics.
**7. ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/fade-out transitions between pages/views using Next.js's router events or a library like Framer Motion (optional for MVP).
- **Button Hovers:** Slight scale-up or background color change on interactive elements like buttons and links.
- **Loading States:** When fetching or processing data (even from local storage simulation), display subtle spinners or skeleton loaders. For MVP, if local storage is slow, a simple 'Loading...' text.
- **Form Feedback:** Visual feedback on input fields (e.g., border color change) during validation or on focus.
- **Micro-interactions:** Smooth opening/closing of modals or accordions. Subtle animation on chart elements.
**8. EDGE CASES:**
- **Empty States:** Dashboard, Session List, Recommendations, and Learn sections should display user-friendly messages when there is no data (e.g., 'Track your first sauna session to see your dashboard!' or 'No articles available yet.').
- **Error Handling:** If `localStorage` fails to read/write, display a user-friendly error message. Input validation should prevent submission of nonsensical data (e.g., negative duration).
- **Validation:** Ensure duration and temperature inputs are numbers and within reasonable ranges (e.g., duration > 0, temperature within a plausible range like 40-120°C/100-250°F).
- **Accessibility (a11y):** Use semantic HTML elements. Ensure sufficient color contrast. All interactive elements should be focusable via keyboard. Use ARIA attributes where necessary (e.g., for screen readers).
**9. SAMPLE DATA:**
* **Sauna Session Data (`saunaSessions` array):**
```json
[
{
"id": "uuid-1",
"timestamp": "2024-03-15T10:30:00.000Z",
"durationMinutes": 15,
"temperature": 80,
"temperatureUnit": "C",
"notes": "Felt good, slightly tired after."
},
{
"id": "uuid-2",
"timestamp": "2024-03-17T18:00:00.000Z",
"durationMinutes": 12,
"temperature": 75,
"temperatureUnit": "C",
"notes": "Short session, felt refreshed."
},
{
"id": "uuid-3",
"timestamp": "2024-03-20T09:15:00.000Z",
"durationMinutes": 20,
"temperature": 85,
"temperatureUnit": "C",
"notes": "Longest session yet. Felt invigorated."
}
]
```
* **Educational Article Data (`articles` array):**
```json
[
{
"id": "article-1",
"title": "Sauna ve Bağışıklık Sistemi: Bilim Ne Diyor?",
"excerpt": "Finlandiya saunasının vücut üzerindeki etkileri ve bağışıklık hücrelerinin aktivasyonu hakkında güncel araştırmalar...",
"content": "Araştırmalar, düzenli sauna kullanımının, özellikle fin saunası gibi yüksek sıcaklıklara maruz kalmanın, vücudun bağışıklık tepkilerini nasıl şekillendirdiğini göstermektedir. Sitokinlerin yanı sıra, bağışıklık hücrelerinin kendilerinde de önemli değişiklikler gözlemlenmiştir. Bu durum, enfeksiyonlarla mücadelede ve genel sağlık durumunun iyileştirilmesinde saunanın potansiyel faydalarını vurgulamaktadır. Kullanıcıların seanslarını optimize ederek bu faydaları en üst düzeye çıkarması hedeflenmektedir... (daha fazla içerik)"
},
{
"id": "article-2",
"title": "Sağlıklı Sauna Seansı İçin İpuçları",
"excerpt": "Sauna deneyiminizi güvenli ve etkili hale getirmek için dikkat etmeniz gerekenler...",
"content": "Sağlıklı bir sauna deneyimi için bol sıvı tüketimi, seans öncesinde ve sonrasında vücudu dinlendirme, ve vücudunuzu dinleme kilit öneme sahiptir. Aşırı sıcaklıklardan kaçınmak ve seans sürelerini kademeli olarak artırmak, vücudunuzun ısıya adaptasyonunu kolaylaştıracaktır... (daha fazla içerik)"
}
]
```
**10. DEPLOYMENT NOTES:**
- **Build Command:** Use `next build` for production builds.
- **Environment Variables:** For MVP using local storage, no specific environment variables are strictly needed. However, plan for `NEXT_PUBLIC_API_URL` if a backend is introduced later.
- **Performance Optimizations:** Utilize Next.js's built-in image optimization (`next/image`) if images are added to educational content. Code splitting is handled automatically by Next.js. Ensure efficient state management to prevent unnecessary re-renders.
- **Static Assets:** Place static assets like icons or placeholder images in the `public/` directory.
- **Linting/Formatting:** Integrate ESLint and Prettier for code quality and consistency.
- **Framework Features:** Leverage Next.js features like API Routes for potential future backend integrations (e.g., user authentication, data persistence on a server) and Server-Side Rendering (SSR) or Static Site Generation (SSG) for specific pages if performance requires it (though for this SPA-like app, client-side rendering might be sufficient for most parts initially).