Phase 2 · Clickable Prototypes

Nutrition App — Prototypes

Every screen from screens.md, built in one green/cream design system. Start with the design system, then open the panel you want to review.

9 files ~90 screens Mobile · Web · Admin
Foundations

Design System & Component Library

Colours, type, buttons, cards, macro rings, tables, motion — the shared vocabulary every screen is built from.
Client Mobile · FlutterB1–B11 · 37 screens

B1–B3

Onboarding & auth, daily plan & tracking, AI food logging.

14 screens

B4–B8

Shopping, progress & goals, habits, psycho-dietetic tools, training.

15 screens

B9–B11

Discover & education, chat & comments, settings & profile.

8 screens
Client Web + Shared · Next.jsC1–D4 · 11 screens

C1–D4 · Client Web Panel & Shared

Desktop client panel (dashboard, plan, shopping, progress, chat, discover, settings) plus shared login, forgot-password, 404, and loading states.
Specialist Admin · Next.jsA1–A14 · 42 screens

A1–A5

Dashboard, CRM & patients, chat, diet-plan creator, meal & ingredient database.

16 screens

A6–A10

Training & workouts, surveys & intake, recommendations, psycho-dietetic tools, habits.

13 screens

A11–A14

Scheduling & calendar, shopping & PDF export, billing, settings & organization.

13 screens