# Gene-ius Click Dummy — Developer Handover

This package contains the interactive prototype (click dummy) of the Gene-ius mobile app.
It is a **React + Vite** single-page application with no backend — all data is
hardcoded in `src/App.jsx` and all state is persisted in `localStorage`.

The purpose of this prototype is to demonstrate UX, layout, and interactions.
It is not production code, but the JSX/CSS can be reused as visual reference.

---

## 1. Quick Start

```bash
# 1) Install dependencies
npm install

# 2) Start the dev server
npm run dev

# 3) Open in browser
http://localhost:5173
```

Production build:

```bash
npm run build      # outputs to dist/
npm run preview    # serves the build locally
```

**Requirements:** Node.js 18+ (tested with Node 20/24), npm 9+.

---

## 2. Project structure

```
GENEIUS APP/
├── index.html              # HTML entry
├── package.json            # Dependencies and scripts
├── package-lock.json
├── vite.config.js          # Vite dev server config (port 5173)
├── README.md
├── HANDOVER.md             # ← this file
├── public/                 # Static assets served at /
│   ├── *.png               # Nutrient icons, food icons, indicators
│   ├── White Stick Transparent.png   # Müsliriegel banner
│   └── raw mats.jpeg       # Spritesheet (fallback nutrient image)
├── src/
│   ├── main.jsx            # React entry — mounts <App /> on #root
│   ├── App.jsx             # ENTIRE APP: screens, state, modals, data
│   ├── Icons.jsx           # SVG icon components
│   ├── Logo.jsx            # GENeIUS wordmark / logo
│   └── styles.css          # ALL styling (~1100+ lines)
└── .claude/
    └── launch.json         # Dev server config (used by Claude Code IDE)
```

> **Heads-up:** the app is intentionally kept in a **single `App.jsx`** so a
> non-developer can quickly find any string or color. For a production rewrite,
> split the screens into separate components and extract the data arrays
> (`NUTRIENTS`, `FOODS`, `REPORTS`, etc.) into their own modules.

---

## 3. Tech stack

| Layer        | Tech                                    |
| ------------ | --------------------------------------- |
| UI framework | React 18                                |
| Build tool   | Vite 5                                  |
| Styling      | Plain CSS (`src/styles.css`)            |
| Fonts        | Google Fonts: Roboto, Roboto Condensed  |
| State        | React `useState` + custom `useLocal`    |
| Persistence  | Browser `localStorage`                  |
| Voice input  | Web Speech API (`SpeechRecognition`)    |

No state library, no router, no backend, no testing framework, no CI.
The single-page UX is implemented via internal state (`tab`, `openReport`, …).

---

## 4. Architecture overview

### 4.1 Top-level state (in `App` component)

| State          | Purpose                                         |
| -------------- | ----------------------------------------------- |
| `tab`          | Active bottom-nav tab (`coach` / `quickStart` / `reports` / `nutrients`) |
| `device`       | Device viewport simulation (see §6)             |
| `chats`        | Array of chat sessions (multi-chat like Claude) |
| `currentChatId`| ID of the active chat                          |
| `chatMenuOpen` | Whether the chat drawer is visible              |
| `user`         | Current user (or `null` if logged out)          |
| `openReport`   | Currently opened report (for detail screen)     |
| `openNutrient` | Currently opened nutrient                       |
| `openAction`   | Currently opened "ask coach" action             |
| `openLogin`    | Whether the login modal is visible              |

### 4.2 Persistence (`useLocal`)

Custom hook that mirrors `useState` but reads/writes to `localStorage`:

```js
const [favs, setFavs] = useLocal('gi.favs', {})
```

Keys used: `gi.tab`, `gi.chats`, `gi.currentChat`, `gi.user`, `gi.favs`.
Clear them in DevTools → Application → Local Storage to reset the demo.

### 4.3 Screens

Each tab renders one of the following functions:

| Function           | Tab          | Notes                                |
| ------------------ | ------------ | ------------------------------------ |
| `CoachScreen`      | Coach        | Welcome screen + last 4 chats        |
| `ChatScreen`       | Coach (chat) | Multi-line input, voice, plus-menu   |
| `QuickStartScreen` | Quick Start  | 3-column grid of action tiles        |
| `ReportsScreen`    | Reports      | Tappable report cards                |
| `NutrientsScreen`  | Nutrients    | Nutrients tab + Food List tab        |
| `NutrientDetail`   | (modal-ish)  | Detail view with Update Recipe flow  |
| `FoodDetail`       | (overlay)    | Food card detail overlay             |
| `ReportDetail`     | (full screen)| PDF-style preview                    |
| `ProfileScreen`    | (top-right)  | Profile / Orders / Support tabs      |

### 4.4 Modals & overlays

- `.modal` — confirm dialogs (subscription cancel, order detail)
- `.food-detail-overlay` — fixed full-screen food card
- `.chat-menu-overlay` — sliding drawer for chat list

A global `MutationObserver` in `App` auto-scrolls the screen to the top
whenever a modal is added, so popups always appear in the visible area.

---

## 5. Data sources

All data is hardcoded as JS arrays at the top of `src/App.jsx`. To replace
with a real backend, swap these arrays with `useEffect` + `fetch` calls.

| Constant       | Purpose                                       |
| -------------- | --------------------------------------------- |
| `NUTRIENTS`    | Vitamin / mineral / other entries             |
| `FOODS`        | Food list with health/weight/sport ratings    |
| `REPORTS`      | Available analysis reports                    |
| `NUTRIENT_ACTIONS` | "Ask the Coach" predefined actions        |
| `NUTRIENT_PNG` | Map nutrient name → image file in /public     |
| `ORDERS`       | Mock order history (with included reports)    |

---

## 6. Device viewport switcher

A floating toolbar in the top-left lets you preview 5 viewport modes:

| Mode             | Class                        | Dimensions     |
| ---------------- | ---------------------------- | -------------- |
| Z Fold 7 Closed  | `.phone.device-foldClosed`   | 384 × 884      |
| Phone            | `.phone.device-phone`        | 390 × 820      |
| Z Fold 7         | `.phone.device-fold`         | 768 × 900      |
| 10" Tablet       | `.phone.device-tablet`       | 1280 × 800     |
| PC 4K            | `.phone.device-pc`           | 3840 × 2160 (content limited to 1280 wide, centered) |

The CSS uses `:has()` to apply contextual layout (e.g. multi-column grids
on tablet, persistent chat sidebar, etc.). To remove the switcher for a
production handover, delete the `.device-switch` block in `App.jsx`.

---

## 7. Known design conventions

- **Brand color:** `--purple: #5a1a4d` (CSS variable in `:root`)
- **Background:** `#e9eaee`
- **Card:** white, 14–18 px border-radius, subtle shadow
- **Font sizes:** Roboto 17 (body), Roboto 21/700 (headings), Roboto Condensed for labels
- **All animations** respect `prefers-reduced-motion`

---

## 8. Production rewrite notes

If/when this prototype is turned into a real product:

1. **Split** `App.jsx` into per-screen files under `src/screens/`.
2. **Extract data** to a `src/data/` folder or load from an API.
3. **Add a router** (React Router) so the URL reflects the current screen.
4. **Replace** the device switcher with proper responsive breakpoints, OR keep it as a `?device=tablet` debug query.
5. **Add auth** — `openLogin` currently just stores `{name: 'Daniel'}` in localStorage.
6. **Type-check** — convert to TypeScript; the prototype is intentionally untyped.
7. **i18n** — all strings are inline German/English in JSX; extract to translation files.

---

## 9. Contact

Original designer: Daniel Wallerstorfer, Novogenia GmbH.
Built collaboratively with Claude Code as a click-through prototype.
