Turning SprynnAI into a mobile app
How I translated an existing AI nutrition website into a native-feeling mobile frontend, keeping the brand intact while rebuilding the experience around a phone.
The brief
SprynnAI is a personalized nutrition product. A person can talk to it, photograph a plate, or describe a craving, then use the result to understand meals, macros, and daily guidance. It already existed as a web product. My task was to turn that product into a proper app rather than put the website inside a mobile shell.
Choosing the stack
The existing product uses TypeScript and React, so I chose React Native with Expo. That keeps one codebase for Android and iOS, lets a small team carry its component language across platforms, and gives motion-heavy screens a clean path through Reanimated. Expo also keeps the future distribution path straightforward without tying the frontend to a backend choice.
Carrying the visual system across
The website's dark canvas, electric-green accent, surface hierarchy, radii, and glows became a typed mobile theme. The pulse-and-leaf mark appears in headers, the opening sequence, and the central voice orb. The aim was continuity: someone moving between the website and app should recognize the same product immediately.
High contrast keeps nutrition data legible and gives the green brand mark room to glow.
The bright green marks actions and active state; macro categories use color only where it carries meaning.
What makes it feel native
A short opening, not a loading wall
A soft green glow reveals the logo, the name arrives letter by letter, and the line Predict. Personalize. Perform. settles beneath it. The sequence stays under three seconds, then fades into login.
Navigation shaped by reach
Voice, Meals, Scan, and Health sit in a floating glass bottom bar. Scan is the raised center action because camera capture is the most physical feature. Community, Fitness, Profile & Goals, and About live in a blur-backed sidebar opened from the header. Primary flows remain one tap away; secondary ones stay one gesture away.
The voice orb
The assistant is represented as a layered breathing orb rather than a plain microphone icon. Its rings shift through idle, listening, and thinking states so the interface communicates presence and progress without extra text.
Onboarding in three steps
Profile basics, eating preferences, and body context are split into small screens with progress, clear goal chips, and a skip route. Personalization feels like an offer instead of paperwork.
The frontend map
- Animated opening and login with a clean Google-auth seam
- Three-step onboarding and goal selection
- Voice home with prompts and daily summary
- Meal generation, macro cards, and history states
- Food Vision capture and analysis-result states
- Health dashboard with energy, macros, hydration, and weekly activity
- Community, fitness, profile, and product-information screens
Every future service touchpoint is represented honestly as a frontend seam. The UI is complete and navigable; account and AI connections can be wired later without redesigning the screens.
What I would connect next
- Attach real authentication to the finished login flow.
- Connect meal and image-analysis actions to approved service endpoints.
- Persist onboarding and session state locally.
- Run internal Android and iOS device testing, then tune motion and accessibility from real usage.
The result
The finished frontend covers the full product shell and decisive user flows while remaining faithful to the original identity. The important change is not the framework. It is the interaction model: the web product explains a system; the mobile app makes that system feel close, immediate, and ready for daily use.