vibe build

Create a comprehensive e-commerce admin dashboard using Next.js 15 with the App Router and shadcn/ui components. LAYOUT & NAVIGATION: - Implement a responsive sidebar navigation with collapsible sections - Include navigation items: Dashboard (home), Products, Orders, Customers, Analytics, Settings - Add a top header with search bar, notifications bell icon, and user profile dropdown - On mobile (< 768px), convert sidebar to a slide-out drawer with hamburger menu - Include breadcrumb navigation showing current page hierarchy DASHBOARD PAGE: - Display 4 metric cards in a grid showing: Total Revenue (with percentage change), Total Orders, Active Customers, and Conversion Rate - Add a large area chart showing revenue trends over the last 30 days using Recharts - Include a bar chart comparing sales by product category - Show a "Recent Orders" table with columns: Order ID, Customer, Date, Status, Amount - Add a "Top Products" section with product images, names, and sales count - Implement real-time updates using SWR or React Query PRODUCTS PAGE: - Create a data table with sortable columns: Image, Name, Category, Price, Stock, Status - Add filtering by category, price range, and stock status - Implement search functionality with debouncing - Include bulk actions: Delete, Update Status, Export - Add pagination with customizable page size (10, 25, 50, 100 items) - Create a "Add Product" button that opens a modal with form fields: Name, Description, Category, Price, Stock, Images (with drag-and-drop upload) - Implement inline editing for quick updates ORDERS PAGE: - Display orders table with columns: Order #, Customer, Date, Items, Total, Status, Actions - Add status badges with colors: Pending (yellow), Processing (blue), Shipped (purple), Delivered (green), Cancelled (red) - Implement advanced filtering: date range picker, status filter, amount range - Create order detail view showing: customer info, shipping address, order items with images, payment method, order timeline - Add ability to update order status with confirmation dialog - Include "Export to CSV" functionality CUSTOMERS PAGE: - Show customer list with: Avatar, Name, Email, Total Orders, Total Spent, Join Date - Add customer segmentation: All, VIP (>$1000 spent), Active (ordered in last 30 days), Inactive - Implement customer detail view with: order history, lifetime value chart, contact information - Add notes section for customer service annotations TECHNICAL REQUIREMENTS: - Use TypeScript for type safety - Implement proper error boundaries and loading states - Add toast notifications for user actions (success, error, info) - Use Zod for form validation - Implement optimistic updates for better UX - Add keyboard shortcuts for common actions (Cmd+K for search, etc.) - Ensure WCAG 2.1 AA accessibility compliance - Use React Server Components where appropriate for better performance - Implement proper SEO with metadata STYLING: - Use Tailwind CSS with shadcn/ui design system - Implement dark mode support with theme toggle - Add smooth transitions and micro-interactions - Use consistent spacing scale (4px base unit) - Ensure responsive design works on mobile, tablet, and desktop

Build a full-featured Kanban-style task management application with advanced collaboration features. BOARD LAYOUT: - Create a horizontal scrollable board with columns: Backlog, To Do, In Progress, In Review, Done - Each column should have a header showing: column name, task count, and "Add Task" button - Implement smooth drag-and-drop between columns using @dnd-kit/core - Add visual feedback during drag: semi-transparent dragged item, drop zone highlighting - Support keyboard navigation for accessibility (Space to grab, Arrow keys to move, Escape to cancel) TASK CARDS: - Display task cards with: title, description (truncated with "show more"), priority badge, due date, assignee avatars - Priority levels: Critical (red), High (orange), Medium (yellow), Low (gray) - Show progress indicator for tasks with subtasks (e.g., "3/5 subtasks completed") - Add labels/tags with color coding (Bug, Feature, Enhancement, Documentation) - Include attachment count icon if files are attached - Show comment count icon with number of comments - Add quick actions on hover: Edit, Delete, Duplicate, Move to... TASK DETAIL MODAL: - Open detailed view when clicking a task card - Include sections: Title (editable inline), Description (rich text editor with markdown support), Status dropdown, Priority selector, Due date picker, Assignees (multi-select with avatar display) - Add subtasks section with checkboxes and ability to add/remove items - Implement attachments area with drag-and-drop file upload (support images, PDFs, docs) - Create activity timeline showing: task created, status changes, comments, assignee changes with timestamps - Add comments section with: user avatar, name, timestamp, comment text, edit/delete options - Include @mentions functionality in comments to notify team members BOARD FEATURES: - Add board header with: board name, star/favorite toggle, share button, board settings - Implement filters: by assignee, priority, labels, due date - Add search functionality to find tasks across all columns - Create "My Tasks" view showing only tasks assigned to current user - Implement "Calendar View" showing tasks on a monthly calendar by due date - Add "List View" as alternative to Kanban board COLLABORATION: - Show real-time presence indicators (who's viewing the board) - Display "User X is editing this task" when someone has a task open - Implement real-time updates when tasks are moved or edited by other users - Add notification system for: task assignments, mentions, due date reminders, status changes DATA MANAGEMENT: - Use Zustand or Redux for state management - Implement localStorage persistence with automatic save - Add undo/redo functionality (Cmd+Z / Cmd+Shift+Z) - Create data export feature (JSON, CSV) - Implement data import from CSV or JSON ADDITIONAL FEATURES: - Add keyboard shortcuts panel (press ? to view) - Implement bulk operations: select multiple tasks, bulk edit, bulk move - Create task templates for common task types - Add time tracking: start/stop timer, log time spent - Implement recurring tasks with customizable schedules - Add task dependencies: block tasks until others are complete TECHNICAL IMPLEMENTATION: - Use TypeScript with strict mode - Implement proper error handling and loading states - Add optimistic updates for instant feedback - Use React Query for server state management (if using backend) - Implement proper form validation with Zod - Add comprehensive keyboard shortcuts - Ensure mobile responsiveness with touch-friendly interactions - Use React.memo and useMemo for performance optimization DESIGN: - Use shadcn/ui components for consistent design - Implement smooth animations with Framer Motion - Add empty states with helpful illustrations and CTAs - Use skeleton loaders during data fetching - Implement dark mode with system preference detection

Create a comprehensive weather dashboard application with real-time data, forecasts, and interactive visualizations. MAIN DASHBOARD: - Display current weather conditions prominently: large temperature display, weather condition icon (animated), "feels like" temperature, weather description - Show key metrics in a grid: Humidity (with percentage), Wind Speed & Direction (with compass icon), Visibility, UV Index (with safety level), Pressure, Dew Point - Add sunrise/sunset times with visual indicator showing current position of sun - Display air quality index (AQI) with color-coded badge and health recommendations - Show moon phase with visual representation LOCATION MANAGEMENT: - Implement location search with autocomplete using geocoding API - Add "Use My Location" button with geolocation API - Create saved locations list (up to 10 locations) with ability to reorder, rename, and delete - Show current location with pin icon - Display local time for each saved location FORECAST SECTIONS: - Hourly Forecast: scrollable horizontal timeline showing next 48 hours with temperature, precipitation chance, wind speed, and weather icons - Daily Forecast: 14-day forecast cards showing high/low temps, precipitation probability, wind, and conditions - Precipitation Map: radar showing rain/snow in the area with animation of movement - Temperature Map: heat map showing temperature variations across region DETAILED WEATHER DATA: - Create expandable sections for: Precipitation (rain/snow accumulation, probability by hour), Wind (speed, gusts, direction with compass), Temperature (hourly breakdown, record highs/lows), Humidity & Dew Point (comfort level indicator) - Add "Weather Alerts" section showing: severe weather warnings, watches, advisories with severity levels and affected areas - Implement "Historical Weather" view comparing current conditions to historical averages INTERACTIVE MAPS: - Integrate Mapbox or Leaflet for interactive map display - Add map layers toggle: Temperature, Precipitation, Clouds, Wind, Pressure - Implement map controls: zoom, pan, layer selection, full-screen mode - Show weather stations as markers with popup details - Add animation controls for radar/satellite imagery CHARTS & VISUALIZATIONS: - Temperature Chart: line chart showing temperature trends over 24 hours with high/low markers - Precipitation Chart: bar chart showing hourly precipitation amounts - Wind Chart: line chart with direction indicators - Pressure Chart: line chart showing barometric pressure trends - UV Index Chart: area chart showing UV levels throughout the day - Humidity Chart: line chart with comfort zone highlighting WEATHER COMPARISON: - Add "Compare Locations" feature showing side-by-side weather for multiple cities - Create comparison table with key metrics - Show visual differences with color coding NOTIFICATIONS & ALERTS: - Implement weather alert notifications for saved locations - Add customizable alerts: temperature thresholds, precipitation warnings, severe weather - Show notification badge count on app icon - Create notification history log ADDITIONAL FEATURES: - Add "Weather News" section with relevant articles and updates - Implement "Weather Camera" showing live webcams from the area - Create "Pollen Forecast" for allergy sufferers - Add "Beach/Ski Conditions" for recreational planning - Implement "Astronomy" section: sunrise/sunset, moon phases, planet visibility DATA SOURCES: - Use OpenWeatherMap API for primary weather data - Integrate National Weather Service API for US alerts - Use AirVisual API for air quality data - Implement Weather Underground for additional data points TECHNICAL REQUIREMENTS: - Use Next.js 15 with App Router and React Server Components - Implement SWR or React Query for data fetching with automatic revalidation - Add proper error handling for API failures with retry logic - Use TypeScript for type safety with API response types - Implement rate limiting and caching to avoid API quota issues - Add loading skeletons for all data sections - Use Recharts for all chart visualizations - Implement responsive design for mobile, tablet, desktop PERFORMANCE: - Lazy load map components to reduce initial bundle size - Implement image optimization for weather icons - Use React.memo for expensive components - Add service worker for offline functionality - Cache API responses in localStorage with expiration DESIGN: - Use glassmorphism design style for modern look - Implement smooth transitions between weather states - Add animated weather icons (rain, snow, clouds, sun) - Use color gradients based on temperature (blue for cold, red for hot) - Implement dark mode with automatic switching based on time of day - Add weather-appropriate background images or gradients - Use consistent spacing and typography from shadcn/ui

Build a production-ready AI chat interface using the Vercel AI SDK with advanced features and optimal UX. CHAT LAYOUT: - Create a three-column layout: Sidebar (conversations list), Main Chat Area, Settings Panel (collapsible) - Implement responsive design: on mobile, show only active chat with slide-out sidebar - Add sticky header with: conversation title (editable), model selector, settings icon, new chat button - Create sticky footer with input area that stays at bottom MESSAGE DISPLAY: - Design distinct message bubbles for user and assistant with different styling - User messages: right-aligned, primary color background, white text - Assistant messages: left-aligned, muted background, with AI avatar - Add message metadata: timestamp, token count, model used - Implement markdown rendering with syntax highlighting for code blocks using react-markdown and prism - Add copy button for each message with success feedback - Show "Copied!" tooltip on successful copy - Implement message actions menu: Copy, Edit, Regenerate, Delete, Share STREAMING IMPLEMENTATION: - Use Vercel AI SDK's useChat hook for streaming responses - Display typing indicator with animated dots while waiting for response - Show streaming text with cursor animation at the end - Implement smooth scroll to bottom as new content arrives - Add "Stop Generation" button during streaming with prominent placement - Show token count incrementing in real-time during generation INPUT AREA: - Create auto-expanding textarea that grows with content (max 5 lines) - Add character/token counter with warning when approaching limit - Implement "Shift+Enter" for new line, "Enter" to send - Add attachment button for file uploads (images, PDFs, text files) - Show file previews with remove option before sending - Implement voice input button with recording indicator - Add emoji picker button - Show "AI is typing..." indicator when processing CONVERSATION MANAGEMENT: - Display conversation list in sidebar with: title (auto-generated from first message), timestamp, preview of last message, message count - Implement search across all conversations - Add filters: Today, Yesterday, Last 7 Days, Last 30 Days, Archived - Create folder/tag system for organizing conversations - Add star/favorite conversations for quick access - Implement conversation export (Markdown, JSON, PDF) - Add conversation sharing with public link generation MODEL SELECTION: - Create model selector dropdown with: GPT-4, GPT-3.5, Claude 3.5 Sonnet, Claude 3 Opus, Gemini Pro - Show model capabilities: context window, strengths, pricing - Display current model badge in chat header - Add model comparison view - Implement model switching mid-conversation with context preservation ADVANCED FEATURES: - Add "Prompt Templates" library with categories: Coding, Writing, Analysis, Creative - Implement "System Prompt" customization for conversation personality - Create "Memory" feature: save important facts about user across conversations - Add "Suggested Prompts" that appear when starting new chat - Implement "Follow-up Questions" generated by AI after each response - Add "Conversation Branching": create alternate responses from any message - Create "Multi-turn Planning": AI breaks down complex tasks into steps CODE HANDLING: - Detect code blocks automatically and add language label - Implement syntax highlighting with theme matching (light/dark) - Add "Run Code" button for supported languages (JavaScript, Python) - Create code diff view for comparing versions - Add "Explain Code" button that asks AI to explain the code - Implement "Copy Code" button separate from message copy IMAGE HANDLING: - Support image uploads with drag-and-drop - Show image previews in chat with lightbox on click - Implement image generation requests with DALL-E or Stable Diffusion - Display generated images with download and regenerate options - Add image editing capabilities: resize, crop, filters ERROR HANDLING: - Show user-friendly error messages for: API failures, rate limits, network issues, invalid inputs - Implement automatic retry with exponential backoff - Add "Report Issue" button on errors - Display error details in collapsible section for debugging - Implement offline mode with queue for pending messages SETTINGS PANEL: - Add temperature slider (0-2) with explanation - Implement max tokens input with validation - Create top-p slider for nucleus sampling - Add frequency penalty and presence penalty controls - Implement "Streaming" toggle - Add "Show Token Count" toggle - Create "Auto-scroll" toggle - Implement "Sound Effects" toggle for notifications KEYBOARD SHORTCUTS: - Cmd/Ctrl + K: New conversation - Cmd/Ctrl + /: Focus search - Cmd/Ctrl + Shift + C: Copy last response - Cmd/Ctrl + R: Regenerate last response - Cmd/Ctrl + E: Edit last message - Cmd/Ctrl + D: Delete conversation - Esc: Close modals/panels - Add shortcuts help modal (?) PERFORMANCE OPTIMIZATIONS: - Implement virtual scrolling for long conversations - Use React.memo for message components - Lazy load conversation history - Implement message pagination (load more on scroll up) - Add debouncing for search and auto-save - Use IndexedDB for local conversation storage - Implement service worker for offline support ACCESSIBILITY: - Add ARIA labels for all interactive elements - Implement keyboard navigation for all features - Add screen reader announcements for new messages - Ensure proper focus management - Use semantic HTML elements - Add skip links for navigation - Implement high contrast mode support TECHNICAL STACK: - Next.js 15 with App Router - Vercel AI SDK for streaming and chat management - TypeScript with strict mode - Tailwind CSS with shadcn/ui components - Zustand for client state management - React Query for server state - Zod for validation - react-markdown for markdown rendering - prismjs for syntax highlighting DESIGN SYSTEM: - Use consistent spacing scale (4px base) - Implement smooth animations with Framer Motion - Add loading skeletons for all async content - Use toast notifications for user feedback - Implement dark mode with system preference detection - Add glassmorphism effects for modern look - Use gradient accents for primary actions

Create a comprehensive design system documentation site with interactive component playground and complete developer resources. SITE STRUCTURE: - Implement three-column layout: Navigation Sidebar, Main Content Area, Table of Contents (right sidebar) - Navigation categories: Getting Started, Foundation (Colors, Typography, Spacing, Icons), Components (organized by type), Patterns, Resources - Add breadcrumb navigation showing current location - Implement search with keyboard shortcut (Cmd+K) that searches across all documentation - Create mobile-responsive layout with collapsible navigation GETTING STARTED SECTION: - Installation guide with package manager tabs (npm, yarn, pnpm, bun) - Quick start tutorial with code examples - Configuration guide for Next.js, Vite, Create React App - Theming setup instructions - Accessibility guidelines overview - Contributing guidelines - Changelog with version history FOUNDATION PAGES: Colors: - Display color palette with: color swatches, hex/rgb/hsl values, usage guidelines - Show semantic color tokens: primary, secondary, accent, success, warning, error, info - Include neutral scale (50-950) with all shades - Add color contrast checker tool - Show dark mode color mappings - Provide color usage examples in context - Include accessibility notes (WCAG compliance) Typography: - Display font families with live preview text - Show type scale with sizes, line heights, letter spacing - Include heading hierarchy (H1-H6) with examples - Display body text variants (large, base, small) - Show font weights with examples - Add code/monospace font examples - Include responsive typography guidelines - Provide CSS/Tailwind classes for each style Spacing: - Display spacing scale (0-96) with visual representation - Show margin and padding examples - Include layout spacing guidelines - Add responsive spacing patterns - Show gap utilities for flexbox/grid Icons: - Create searchable icon library with all available icons - Display icons in grid with names - Add copy button for icon name/import statement - Show icon sizes (xs, sm, md, lg, xl) - Include usage guidelines - Provide accessibility notes for icons COMPONENT PAGES (for each component): Component Header: - Component name and description - Status badge (Stable, Beta, Deprecated) - Version number - Links to: GitHub source, Figma designs, Related components Live Preview Section: - Interactive component playground with real-time rendering - Props controls panel with: dropdowns for enums, toggles for booleans, text inputs for strings, number inputs for numbers, color pickers for colors - Code preview showing current configuration - Multiple example tabs: Basic, Variants, States, Compositions - Responsive preview with device frame selector (mobile, tablet, desktop) - Theme toggle to preview in light/dark mode - Copy code button with syntax highlighting Variants Section: - Show all component variants with live examples - Display variant names and use cases - Include visual comparison grid - Add code snippets for each variant Props Documentation: - Comprehensive props table with columns: Name, Type, Default, Description, Required - Add type definitions with syntax highlighting - Include prop examples with code snippets - Show deprecated props with migration guide Usage Guidelines: - When to use this component - When not to use this component - Best practices and recommendations - Common patterns and compositions - Accessibility considerations - Performance notes Code Examples: - Basic usage example - Advanced usage with all props - Composition examples with other components - Form integration examples - State management examples - Custom styling examples - TypeScript examples with proper typing Accessibility: - ARIA attributes used - Keyboard navigation support - Screen reader behavior - Focus management - Color contrast compliance - Testing recommendations COMPONENT CATEGORIES: Layout Components: - Container, Grid, Flex, Stack, Spacer, Divider, Separator Navigation Components: - Navbar, Sidebar, Breadcrumb, Tabs, Pagination, Menu, Dropdown Form Components: - Input, Textarea, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker, ColorPicker, FileUpload Data Display: - Table, List, Card, Badge, Avatar, Chip, Tag, Tooltip, Popover, Progress, Skeleton Feedback: - Alert, Toast, Modal, Dialog, Drawer, Notification, Loading Spinner, Empty State Actions: - Button, IconButton, ButtonGroup, FAB (Floating Action Button), Link PATTERNS SECTION: - Form patterns: validation, multi-step forms, inline editing - Navigation patterns: breadcrumbs, tabs, pagination - Data patterns: tables, lists, cards, infinite scroll - Feedback patterns: loading states, error handling, success messages - Layout patterns: dashboard, sidebar, header-footer, split view INTERACTIVE FEATURES: - Code playground with live editing using CodeMirror or Monaco Editor - Copy code button with success feedback - Export component as CodeSandbox or StackBlitz - Share button generating shareable URL with current configuration - Theme customizer showing real-time changes across all components - Responsive preview with device frames - Dark mode toggle affecting all examples SEARCH FUNCTIONALITY: - Full-text search across all documentation - Component search with filtering by category - Search results showing: component name, description, category, preview - Keyboard navigation in search results - Recent searches history - Search suggestions and autocomplete RESOURCES SECTION: - Design tokens JSON/CSS export - Figma design kit download - Sketch library download - Icon package download - VS Code snippets extension - ESLint plugin for component usage - Migration guides between versions - FAQ section - Community showcase - Blog with updates and tutorials TECHNICAL IMPLEMENTATION: - Use Next.js 15 with App Router for optimal performance - Implement MDX for documentation content with custom components - Use Shiki or Prism for syntax highlighting - Implement Algolia or Fuse.js for search - Use Zustand for playground state management - Add React Live or Sandpack for live code editing - Implement proper SEO with metadata for each page - Use TypeScript with strict mode - Add analytics to track popular components PERFORMANCE: - Lazy load component examples - Implement code splitting per page - Use dynamic imports for heavy components - Add loading skeletons for async content - Optimize images with Next.js Image component - Implement service worker for offline access - Use React.memo for expensive renders DESIGN: - Use the design system itself for the documentation site - Implement smooth page transitions - Add micro-interactions for better UX - Use consistent spacing and typography - Implement responsive design for all screen sizes - Add dark mode with system preference detection - Use glassmorphism or modern design trends - Include empty states with helpful illustrations

Build a comprehensive mobile-first fitness tracking Progressive Web App with workout logging, progress tracking, and social features. APP STRUCTURE: - Implement bottom tab navigation with 5 tabs: Home, Workouts, Progress, Social, Profile - Use mobile-first design principles with touch-friendly targets (min 44x44px) - Add pull-to-refresh on all list views - Implement swipe gestures for quick actions (swipe left to delete, swipe right to edit) - Create smooth page transitions with slide animations - Add haptic feedback for important actions HOME TAB: - Display daily summary card: workouts completed today, calories burned, active minutes, current streak - Show "Quick Start Workout" section with recently used workout templates - Add motivational quote or tip of the day - Display upcoming scheduled workouts - Show achievement badges earned recently - Add "Today's Goal" progress ring (steps, calories, active minutes) - Include weather widget for outdoor workout planning WORKOUTS TAB: Workout Library: - Display workout templates organized by: Muscle Group (Chest, Back, Legs, Arms, Shoulders, Core), Workout Type (Strength, Cardio, HIIT, Yoga, Stretching), Equipment (Bodyweight, Dumbbells, Barbell, Machines, Resistance Bands) - Add search and filter functionality - Show workout preview with: exercise list, estimated duration, difficulty level, equipment needed - Implement favorite workouts with quick access - Add custom workout builder with drag-and-drop exercise ordering Active Workout Screen: - Display current exercise with: name, animated demonstration GIF/video, target muscles highlighted on body diagram - Show set tracking table with columns: Set #, Weight, Reps, Completed (checkbox) - Add quick weight adjustment buttons (+5, +10, -5, -10 lbs) - Implement rest timer with: countdown display, pause/resume, skip rest, custom duration - Show progress through workout (Exercise 3 of 8) - Add notes field for each exercise - Include "Replace Exercise" button with similar alternatives - Add "Superset" mode for combining exercises - Implement volume tracking (total weight × reps) Rest Timer: - Display large countdown timer with circular progress indicator - Add preset time buttons (30s, 60s, 90s, 2min, 3min) - Show next exercise preview during rest - Include skip rest and add time buttons - Add notification sound when rest is complete - Show heart rate if connected to wearable Exercise Database: - Comprehensive exercise library with 500+ exercises - Each exercise includes: name, description, primary/secondary muscles, equipment needed, difficulty level, demonstration video/GIF, step-by-step instructions, common mistakes, variations - Add search with filters: muscle group, equipment, difficulty - Implement custom exercise creation with photo/video upload - Show exercise history: personal records, last performed, total volume PROGRESS TAB: Dashboard: - Display key metrics cards: Total Workouts, Total Volume Lifted, Personal Records, Current Streak - Show body measurements tracking: weight, body fat %, muscle mass, measurements (chest, waist, arms, legs) - Add progress photos gallery with before/after comparison slider - Display workout frequency heatmap (GitHub-style contribution graph) Charts & Analytics: - Volume Chart: line chart showing total volume lifted over time (weekly, monthly, yearly) - Workout Frequency: bar chart showing workouts per week - Muscle Group Distribution: pie chart showing training balance - Strength Progress: line charts for major lifts (bench, squat, deadlift, overhead press) - Body Weight Trend: line chart with trend line and goal indicator - Personal Records Timeline: list of PRs with date achieved and previous record - Exercise-specific Progress: detailed charts for any exercise showing weight/reps progression Calendar View: - Monthly calendar showing workout days with color coding by type - Click day to see workout details - Add workout scheduling with reminders - Show rest days and active recovery days - Display monthly statistics summary Body Measurements: - Track multiple measurements with date stamps - Show measurement trends with line charts - Add progress photos with date and weight - Implement photo comparison view (side-by-side, overlay, slider) - Add body fat percentage calculator - Include measurement reminders SOCIAL TAB: - Activity feed showing: friends' workouts, achievements, personal records, progress photos - Add like and comment functionality - Implement follow/unfollow system - Show leaderboards: weekly volume, workout streak, specific exercise PRs - Add challenges: 30-day challenges, group challenges, personal challenges - Create workout sharing with public links - Implement direct messaging for workout buddies - Add gym check-in feature with location PROFILE TAB: User Profile: - Display profile photo, name, bio, join date - Show statistics: total workouts, total volume, current streak, longest streak - Add achievement badges showcase - Display personal records list - Show workout history timeline Settings: - Account settings: email, password, profile info - App preferences: units (lbs/kg), rest timer sound, haptic feedback, theme (light/dark/auto) - Notification settings: workout reminders, rest timer, achievement notifications, social notifications - Privacy settings: profile visibility, workout sharing, leaderboard participation - Data management: export data (CSV, JSON), import data, delete account - Connected apps: Apple Health, Google Fit, Strava, MyFitnessPal Goals & Plans: - Set fitness goals: weight goal, strength goals, workout frequency - Create workout plans: weekly schedule, progressive overload programs - Add goal tracking with progress indicators - Implement workout reminders based on schedule ADDITIONAL FEATURES: Workout Templates: - Pre-built programs: 5x5 StrongLifts, PPL (Push/Pull/Legs), Upper/Lower Split, Full Body, Bro Split - Beginner programs with progression built-in - Custom program builder with periodization - Program sharing and community programs Exercise Recommendations: - AI-powered exercise suggestions based on: equipment available, muscle groups trained recently, time available, fitness level - Automatic progressive overload suggestions - Deload week recommendations - Exercise substitutions for injuries Nutrition Integration: - Calorie and macro tracking - Meal logging with barcode scanner - Nutrition goals based on fitness goals - Water intake tracking - Integration with MyFitnessPal API Wearable Integration: - Connect to Apple Watch, Fitbit, Garmin - Real-time heart rate monitoring during workouts - Automatic workout detection - Sync steps and active calories - Sleep tracking integration Offline Support: - Full offline functionality for workout logging - Sync when connection restored - Download workout videos for offline viewing - Cache exercise database locally TECHNICAL IMPLEMENTATION: - Build as Progressive Web App with service worker - Use Next.js 15 with App Router - Implement IndexedDB for local data storage - Use React Query for server state management - Add Zustand for client state (active workout, timer) - Implement Web Push API for notifications - Use Web Share API for sharing workouts - Add Vibration API for haptic feedback - Implement Web Audio API for timer sounds - Use Intersection Observer for infinite scroll - Add Web Workers for heavy calculations PERFORMANCE: - Lazy load images and videos - Implement virtual scrolling for long lists - Use React.memo for workout components - Add optimistic updates for instant feedback - Implement request batching for sync - Use image optimization with WebP format - Add skeleton loaders for all async content DESIGN: - Use mobile-first responsive design - Implement bottom sheet modals for mobile - Add floating action button for quick workout start - Use card-based layouts for content - Implement smooth animations with Framer Motion - Add empty states with motivational messages - Use progress indicators for all loading states - Implement dark mode with high contrast for gym lighting - Add color coding for exercise types and muscle groups - Use large, touch-friendly buttons and inputs