feat: initial implementation — all 35 requirements across phases 1-3

Backend (Spring Boot 3.2 / Java 21 / PostgreSQL): - JWT auth with BCrypt password hashing - User profile + Mifflin-St Jeor BMR calculator - Food search + barcode via OpenFoodFacts API with local cache - Meal CRUD with user data isolation and ownership checks - AI photo analysis (OpenAI Vision) with confidence intervals - AI correction feedback loop for personalisation - Flyway DB migrations + RFC-7807 error responses Mobile (React Native / TypeScript): - Full navigation stack (Auth → Tabs → Home stack) - Design tokens (WCAG 2.2 AA colours, 8px grid, 48px touch targets) - 10 screens: Login, Register, Home, Search, Camera, AI Result, Edit Meal, Daily Details, History, Profile - Confidence-aware calorie display (kcal ± range) - Repeat last meal shortcut + macro tracking Docs: - docs/PLAN-AND-REQUIREMENTS.md - docs/traceability.csv (35 requirements, all Implemented)
2026-05-18 21:56:13 +03:00
commit 91cd18aec6
106 changed files with 13886 additions and 0 deletions
--- a/idea/figmaDetails.md
+++ b/idea/figmaDetails.md
@@ -0,0 +1,428 @@
+Perfect — let’s turn your wireframes into a **Figma-ready design system + component spec** that you (or Marta 👀) can directly implement.
+
+This is structured exactly how real product teams define UI systems so you can **scale later without redesigning everything**.
+
+***
+
+# 🎨 1. Design Tokens (FOUNDATION — define this first in Figma)
+
+## 🟢 Colors
+
+Create **Color Styles** in Figma:
+
+```
+Primary/Green        #22C55E   (main action)
+Primary/Dark         #16A34A
+
+Gray/900             #0F172A   (text)
+Gray/700             #334155
+Gray/500             #64748B
+Gray/300             #CBD5F5
+Gray/100             #F1F5F9
+
+Background           #FFFFFF
+Background/Muted     #F8FAFC
+
+Error/Red            #EF4444
+Warning/Yellow       #F59E0B
+```
+
+***
+
+## 🔤 Typography
+
+Create text styles:
+
+```
+Heading/Large      24px / SemiBold / Line 32
+Heading/Medium     20px / SemiBold
+Body/Large         16px / Regular
+Body/Medium        14px / Regular
+Caption            12px / Regular
+
+Number/Kcal        28px / Bold
+```
+
+👉 Font: **Inter / SF Pro** (mobile-friendly)
+
+***
+
+## 📏 Spacing System (8px grid)
+
+```
+4px
+8px
+16px
+24px
+32px
+48px
+```
+
+***
+
+# 🧱 2. Core Components (Figma Components)
+
+***
+
+## 🔘 Button Component
+
+Create **Component: Button**
+
+### Variants:
+
+```
+Type: Primary / Secondary / Ghost
+State: Default / Pressed / Disabled
+```
+
+***
+
+### Primary Button
+
+```
+Height: 48px
+Padding: 0 16px
+Radius: 12px
+
+Fill: Green/Primary
+Text: White / 16px / Medium
+```
+
+***
+
+### Secondary Button
+
+```
+Border: 1px Gray/300
+Fill: White
+Text: Gray/900
+```
+
+***
+
+## 🧩 Input Field
+
+```
+Height: 48px
+Radius: 10px
+Border: Gray/300
+
+States:
+- Focus → Green border
+- Error → Red border
+```
+
+***
+
+# 🍱 3. Meal Item Component (CRITICAL)
+
+```
+Component: MealItemRow
+
+Layout:
+[ Icon ] [ Name ]         [ kcal ]
+
+Height: 56px
+Padding: 12px
+
+Name: 16px / Medium
+Kcal: 14px / Gray/500
+```
+
+***
+
+### Variants:
+
+```
+Type:
+- Default
+- Editable
+- AI Suggested (badge)
+```
+
+***
+
+### AI Suggested Variant
+
+```
+Add:
+[ ⚡ Suggested ]
+
+Background: Light green tint
+```
+
+***
+
+# 🍽️ 4. Food Row (search results)
+
+```
+Component: FoodRow
+
+--------------------------------
+Chicken breast
+165 kcal / 100g
+--------------------------------
+```
+
+Height: 64px  
+Padding: 12px
+
+***
+
+# 📊 5. Progress Card (Home TOP section)
+
+```
+Component: CalorieCard
+
+--------------------------------
+🔥 1800 / 2200 kcal
+Remaining: 400
+
+[ Progress bar ]
+--------------------------------
+```
+
+***
+
+### Progress Bar Spec
+
+```
+Height: 8px
+Radius: 999px
+
+Background: Gray/200
+Fill: Green/Primary
+```
+
+***
+
+# ➕ 6. Floating Action Button (FAB)
+
+```
+Component: FAB
+
+Size: 56x56
+Radius: 50%
+Fill: Primary Green
+
+Icon: + (white)
+Shadow:
+  Y: 4
+  Blur: 12
+```
+
+***
+
+# 📷 7. AI Suggestion Card (MOST IMPORTANT COMPONENT)
+
+```
+Component: AISuggestionCard
+
+--------------------------------
+🍚 Rice        150g
+🍗 Chicken     120g
+
+Confidence: 78%
+
+[ Edit ]
+[ Confirm ]
+--------------------------------
+```
+
+***
+
+### Layout
+
+* Vertical stack
+* Items = **repeatable component**
+
+***
+
+### Item inside card
+
+```
+Component: AISuggestionItem
+
+Name (left)
+Grams (right)
+Confidence (small text)
+```
+
+***
+
+# 🎛️ 8. Slider Component (Edit Screen)
+
+```
+Component: PortionSlider
+
+--------------------------------
+Rice
+150g        [——●—————]
+
+--------------------------------
+```
+
+***
+
+### Specs:
+
+* Track height: 4px
+* Thumb: 16px circle
+* Active color: Green
+* Range: 0–500g
+
+***
+
+# 📱 9. Screen Layouts (Frame Specs)
+
+***
+
+## 🏠 Home Screen
+
+Frame: `Home`
+
+```
+Padding: 16px
+Vertical spacing: 16px
+
+Structure:
+
+[ Title ]
+
+[ CalorieCard ]
+
+[ Meal List (MealItemRow x N) ]
+
+[ Repeat Card ]
+
+[FAB floating bottom right]
+```
+
+***
+
+## 📷 AI Result Screen
+
+Frame: `AI_Result`
+
+```
+Padding: 16px
+
+[ Title ]
+
+[ AISuggestionCard ]
+
+[ Primary CTA: Confirm ]
+
+[ Secondary CTA: Edit ]
+```
+
+***
+
+## ✏️ Edit Meal Screen
+
+Frame: `Edit_Meal`
+
+```
+Padding: 16px
+
+List of:
+[ PortionSlider x items ]
+
+Bottom:
+[ Total calories ]
+
+Sticky Footer:
+[ Save Meal Button ]
+```
+
+***
+
+# 🔄 10. Component Hierarchy (IMPORTANT)
+
+```
+App
+ ├── Screens
+ │    ├── Home
+ │    ├── AddMeal
+ │    ├── AIResult
+ │    ├── EditMeal
+ │
+ ├── Components
+ │    ├── Button
+ │    ├── MealItemRow
+ │    ├── FoodRow
+ │    ├── AISuggestionCard
+ │    ├── Slider
+ │    ├── ProgressBar
+ │
+ ├── Tokens
+      ├── Colors
+      ├── Typography
+      ├── Spacing
+```
+
+***
+
+# 🧠 11. Interaction States (you must define in Figma)
+
+For each component:
+
+### Button
+
+* Default
+* Pressed (darker)
+* Disabled (opacity 40%)
+
+### Food Row
+
+* Hover (if web)
+* Selected
+
+### AI Suggestions
+
+* Pending
+* Edited
+* Confirmed
+
+***
+
+# ⚡ 12. Developer-Friendly Naming (IMPORTANT for you)
+
+Use naming like this in Figma:
+
+```
+btn/primary/default
+btn/primary/pressed
+
+meal-item/default
+meal-item/ai
+
+card/calorie
+card/ai-suggestion
+
+slider/portion
+fab/default
+```
+
+👉 This maps directly to code components later.
+
+***
+
+# 🚀 Final Result
+
+With this setup you get:
+
+✅ Scalable design system  
+✅ Fast implementation (React Native ready)  
+✅ Clean UX focused on speed
+
+***
+
+# 🎯 What I can do next (high value)
+
+I can generate:
+
+👉 **React Native component skeleton matching this design system**  
+👉 or **real Figma JSON/import structure (so you don’t rebuild manually)**
+
+Just tell me 👍