PROJECT OVERVIEW: The goal is to develop a single-page application (SPA) named "Zinde Sürücü" (Fit Driver) dedicated to empowering professional drivers to proactively manage their cognitive health, reduce stress, and enhance overall well-being. The core problem addressed is the increased risk of cognitive decline, including conditions like Alzheimer's disease, among professional drivers due to occupational stressors such as long working hours, irregular schedules, high cognitive load from navigation and decision-making, and demanding work environments. This can severely impact their personal health, road safety, and overall quality of life. The application's fundamental value proposition is to provide an accessible, personalized platform for drivers to continuously monitor key cognitive health indicators, engage in interactive brain exercises, track their mood and stress levels, and receive tailored wellness recommendations. By offering early insights into potential issues and actionable steps for prevention and management, "Zinde Sürücü" aims to mitigate long-term health risks, improve mental resilience, promote safer driving practices, and ultimately contribute to a better quality of life for individuals in a highly demanding profession. This application serves as a comprehensive self-care tool focused on longevity and peak performance for drivers.TECH STACK: The application will be built using React for the frontend, leveraging functional components and hooks (`useState`, `useEffect`, `useReducer`) for efficient state management and component logic. Tailwind CSS will be utilized for styling, enabling rapid and consistent UI development with a utility-first approach. All user-specific data, including cognitive test results, mood entries, and reminder settings, will be persisted locally using `localStorage` to simulate backend interaction for the MVP. State management for complex data structures will be handled efficiently with `useReducer`, while simpler states will use `useState`. Conditional rendering will manage different views within the single-page application without requiring an external routing library. Heroicons will be used for scalable vector icons, and Recharts will be integrated for visualizing data trends, specifically for mood and stress history.CORE FEATURES:1. Dashboard (Main View): This is the landing page for users. Upon opening the app, the user will be presented with a personalized dashboard. It will provide a concise overview of their current health status. It displays a prominent "Cognitive Score" card showcasing their latest assessment score and a small trend indicator (e.g., "+5% from last week"). A "Mood & Stress Overview" card will show their average mood and stress levels for the past week, potentially with a mini-line chart. A "Today's Wellness Tips" section will highlight 2-3 relevant tips. Finally, an "Upcoming Reminders" section will display any active reminders, like "Take a break in 30 mins." Quick action buttons such as "Start Cognitive Test" and "Log My Mood" will be readily available.2. Cognitive Assessment Module: Users can initiate a cognitive test by clicking "Start Cognitive Test" on the dashboard or navigating to the dedicated "Tests" section. The module will present a series of short, engaging mini-games (1-2 minutes each) designed to assess different cognitive functions. For the MVP, implement three games:a. Memory Match: A classic card-matching game where users flip cards to find pairs. The game tracks time taken and errors made.b. Reaction Time Test: A simple test where users click a button as quickly as possible when a visual cue appears. Average reaction time is recorded.c. Pattern Recognition: Users are presented with a sequence or pattern and must identify the next logical item or an anomaly.After each test, a score is calculated and stored. An overall "Cognitive Health Score" will be computed based on these results, showing trends over time. Immediate, encouraging feedback will be provided, and results will be stored for historical progress tracking.3. Stress & Mood Tracker: Accessible via the "Log My Mood" button on the dashboard or the "Mood" section. Users can log their current mood and stress level through a simple, intuitive form. It includes a set of emoji-based buttons for mood selection (e.g., 😊 Great, 🙂 Good, 😐 Neutral, 😟 Stressed, 😩 Exhausted) and a slider for stress level (1-5 scale). An optional text input allows users to add brief notes about their day. All entries are stored and displayed as a historical chart (e.g., line or bar chart using Recharts) showing trends over the past day, week, or month.4. Personalized Wellness Tips & Reminders: Wellness tips are displayed contextually on the dashboard. Users can also browse all tips and configure reminders in a dedicated settings section. The app will feature a curated database of pre-defined tips covering nutrition, exercise, sleep hygiene, mindfulness, and stress reduction. Tips are dynamically displayed based on the user's cognitive scores, reported stress levels, and time of day (e.g., if stress is high, suggest a mindfulness exercise). Users can set customizable reminders for breaks (e.g., "Take a 15-minute break every 2 hours"), hydration, or specific cognitive exercises. Reminders can be set with frequency and time windows. Users can mark tips as "helpful" or "done" and dismiss reminders.UI/UX DESIGN:The overall aesthetic should be clean, modern, intuitive, and calming, prioritizing readability and ease of use for professional drivers. It will adopt a mobile-first responsive design approach using Tailwind CSS's utility classes and breakpoints (`sm`, `md`, `lg`, `xl`).The layout is a single-page application with logical section separation using conditional rendering. It will feature a fixed header containing the app title, logo, and primary navigation (Dashboard, Tests, Mood, Tips). The main content area will adapt dynamically, and a consistent footer or floating action buttons will provide quick access to key features.The color palette will be primarily calming blues and greens, with a calm deep ocean blue (`#2A628F`) as the primary color, complemented by a lighter sky blue (`#6A9ACA`) or soft grey (`#E0E0E0`). An energizing accent color like a golden yellow (`#FFD700`) or teal (`#20B2AA`) will be used for interactive elements and highlights. Text will be dark grey (`#333333`) for main content and lighter grey (`#666666`) for secondary information, against a white (`#FFFFFF`) background.Typography will use clean, highly readable sans-serif fonts: Poppins or Montserrat for headings (bold, clear) and Inter or Lato for body text.Accessibility (A11y) is crucial: Ensure semantic HTML, sufficient color contrast, keyboard navigation support for all interactive elements, clear focus indicators, and appropriate ARIA attributes.DATA MODEL:All user-specific data will be stored in `localStorage` under a single JSON key (e.g., `zindeSurucuData`). The global state, managed by `useReducer`, will have the following structure:```javascriptconst initialState = { cognitiveResults: [], // Array of CognitiveTestResult objects moodEntries: [], // Array of MoodEntry objects userSettings: { reminders: [] // Array of Reminder objects }, currentTips: [] // Array of Tip objects (selected for display)};```Each data type will conform to the following schema:1. `CognitiveTestResult` Object:```javascript{ id: string, // Unique ID (UUID recommended) date: string, // ISO date string (e.g.,