8080.AI
DesignReqsTasksUser FlowArchitecture
Log inSign up for free

strong-health

byworkspace

create a mobile application Brief Description A mobile app that lets users scan or search packaged food items by name (e.g., Maggi, Hide & Seek) and instantly see detailed health information: whether it’s healthy (with reasons), nutritional breakdown (protein, fat, calories), diet classification (veg, non-veg, vegan), allergen warnings, age suitability, a health score (1–10), daily intake percentage, additives/preservatives flags, and healthier alternatives. The app includes a personalized onboarding flow (name, diet preference) with a smooth zoom animation, followed by a “For You” section that tailors recommendations and suitability labels based on the user’s profile. Features • User Onboarding – Ask name and diet preference (veg, non-veg, vegan, etc.). Show a professional zoom animation (icon moving closer to screen) after completion. • Smart Search – Fuzzy text search by product name + barcode scan icon (visual button). • Product Detail Screen – Shows: “Is it healthy?” (Yes/No + reason) Ingredient breakdown (Protein %, Fat %, Calories %) Diet type (Veg, Non-Veg, Vegan, etc.) Allergen alerts (nuts, gluten, dairy, soy, egg) Age suitability (kids, elderly, diabetics, pregnant women) Health Score (1–10, color-coded) Daily intake % meter (per serving) Additives/Preservatives flag (artificial colors, MSG, etc.) • Compare Mode – Compare two products side by side. • Favorites & History – Save items and view recent searches. • Alternatives Suggestion – “Healthier versions of this product” based on the searched item. • For You Section – After onboarding, display products that match the user’s diet preference with personalized suitability labels (e.g., “Great for vegans”). Integrate with search results to highlight “For You” tags. User Flow 1. First Launch – User sees onboarding screen: enter name, select diet preference (veg / non-veg / vegan / all). Tap “Continue”. 2. Animation – A logo/icon zooms in towards the camera (or scales up with a professional transition) lasting ~1.5 seconds. 3. Home Screen – App opens to “For You” tab showing recommended products based on diet. Bottom navigation includes: For You, Search, Compare, Favorites, Profile. 4. Search – User taps Search tab, types product name (fuzzy match) or taps barcode icon to scan. Results list appears. 5. Select Product – User taps a product; Detail Screen loads with all health info, “For You” tag if suitable (e.g., “This product is great for your diet: vegan”). 6. Compare – User can add two products from search/history to Compare Mode. 7. Favorites – User can save items from detail screen; view them later. 8. Alternatives – On detail screen, a button “See Healthier Alternatives” shows a list. Technical Stack • Frontend – React Native (Expo or bare) for iOS and Android • Backend – Supabase (PostgreSQL, Auth, Storage) or Firebase (Firestore, Auth) • Barcode scanning – react-native-camera + react-native-vision-camera or expo-barcode-scanner • Search – Postgres full-text search (Supabase) or Algolia (for fuzzy matching) • Animations – React Native Animated or Reanimated 2 for zoom effect • State Management – React Context or Zustand Design Guidelines • Color Palette – Primarily white background with green (healthy), red (unhealthy), orange (moderate). Accent color for “For You” – light blue. • Typography – San-serif (Roboto or System). Clear hierarchy: headings bold 18pt, body 14pt, labels 12pt. • Layout – Cards-based for search results; detail screen uses vertical scroll with sections (Health Score badge at top, then breakdown). • Navigation – Bottom tab bar with 5 tabs: For You, Search, Compare, Favorites, Profile. • Animation – Zoom-in animation uses scale from 0.3 to 1.0 with an icon (cutlery or food package). Keep it smooth and professional – no bounce, just ease-out. Backend Structure • Database Tables (Supabase): users – id, name, diet_preference, created_at products – id, name, barcode, image_url, is_healthy, health_reason, protein_pct, fat_pct, calories_pct, diet_type, allergens (array), age_suitability (array), health_score, daily_intake_pct, additives_flag, alternatives (array of product_id references), created_at favorites – id, user_id, product_id, saved_at history – id, user_id, product_id, searched_at • API Endpoints (Supabase auto-REST, but custom functions if needed): POST /auth/signup / login GET /products?search=term – fuzzy search using to_tsvector GET /products/:id – full product detail POST /favorites – add/remove favorite GET /favorites?user_id=... – list user favorites GET /history?user_id=... – recent searches GET /alternatives?product_id=... – returns products from alternatives field • Security – Row Level Security (RLS) on Supabase tables: users can only read/write their own favorites/history. In-Scope and Out-of-Scope Items In-Scope: • All features listed above (onboarding, animation, search, details, compare, favorites, history, alternatives, “For You” section) • Barcode scanning (visual icon, actual scan using device camera) • Fuzzy search on product names • Health score with color coding (1–10) • Daily intake % meter • Allergen and additive flags • Age suitability labels • Diet type classification • Personalization based on user’s diet preference • Mobile app for iOS and Android (React Native) Out-of-Scope: • Integration with real grocery store inventory or live barcode databases (product data will be pre-loaded or admin-uploaded) • User reviews or ratings • Barcode generation or product management by end-users • Advanced analytics dashboards • Multi-language support (initially English only) • Offline mode (requires internet connection)

HomeCompareSearchOnboardingAnimation
Home

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

Strong-Health System Requirements Document

1. Introduction

The Strong-Health project aims to develop a mobile application that provides users with detailed health information about packaged food items. The app will allow users to scan or search for products and receive insights into their healthiness, nutritional content, and suitability based on personal dietary preferences.

2. System Overview

Strong-Health is a mobile application designed for both iOS and Android platforms using React Native. It enables users to access health information about packaged food items through scanning or searching by name. The app provides personalized recommendations and health insights, making it easier for users to make informed dietary choices.

Page 2 of 5

3. Functional Requirements

  • As a User, I should be able to onboard by entering my name and selecting my diet preference (veg, non-veg, vegan, etc.).
  • As a User, I should see a professional zoom animation after completing the onboarding process.
  • As a User, I should be able to perform a fuzzy text search by product name.
  • As a User, I should be able to scan barcodes using a visual button.
  • As a User, I should see if a product is healthy or not, with reasons provided.
  • As a User, I should view the ingredient breakdown including protein, fat, and calories percentages.
  • As a User, I should see the diet type classification of a product (Veg, Non-Veg, Vegan, etc.).
  • As a User, I should receive allergen alerts for nuts, gluten, dairy, soy, and egg.
  • As a User, I should see age suitability labels for kids, elderly, diabetics, and pregnant women.
  • As a User, I should view a health score (1–10) with color coding.
  • As a User, I should see a daily intake percentage meter per serving.
  • As a User, I should be alerted about additives and preservatives.
  • As a User, I should be able to compare two products side by side.
  • As a User, I should be able to save items to my favorites and view my recent searches.
  • As a User, I should receive suggestions for healthier alternatives to a product.
  • As a User, I should see a "For You" section with products matching my diet preference and personalized suitability labels.
  • As a User, I should be able to access the app in all geographic regions.

4. User Personas

  • General User: Individuals interested in understanding the health impact of packaged foods based on their dietary preferences.
  • Health-Conscious User: Users who actively seek healthier alternatives and detailed nutritional information.
  • Parents/Caregivers: Users concerned about age suitability and allergen information for children or dependents.
Page 3 of 5

5. Core User Flows

  1. First Launch: User sees onboarding screen -> enters name -> selects diet preference -> taps "Continue".
  2. Animation: Logo/icon zooms in towards the camera with a smooth transition.
  3. Home Screen: App opens to "For You" tab showing recommended products -> bottom navigation includes: For You, Search, Compare, Favorites, Profile.
  4. Search: User taps Search tab -> types product name or taps barcode icon to scan -> results list appears.
  5. Select Product: User taps a product -> Detail Screen loads with health info and "For You" tag if suitable.
  6. Compare: User adds two products from search/history to Compare Mode.
  7. Favorites: User saves items from detail screen -> views them later.
  8. Alternatives: On detail screen, user taps "See Healthier Alternatives" -> list appears.

6. Visuals Colors and Theme

  • primary: #4CAF50 (Green for healthy)
  • primary_light: #81C784 (Lighter green for hover states)
  • secondary: #FF5722 (Coral for emphasis)
  • accent: #FFC107 (Amber for CTAs and badges)
  • highlight: #FF9800 (Orange for notifications)
  • bg: #FFFFFF (White for background)
  • surface: rgba(255, 255, 255, 0.9) (Card/panel background)
  • text: #212121 (Dark grey for primary text)
  • text_muted: #757575 (Muted grey for secondary text)
  • border: rgba(0, 0, 0, 0.1) (Subtle border color)
Page 4 of 5

7. Signature Design Concept

The Strong-Health app will feature an interactive "Health Galaxy" on the home page. Users can explore a 3D galaxy where each star represents a food product. By clicking on a star, users will open a product card with detailed health information. The galaxy can be rotated and zoomed, providing an engaging way to discover new products. This concept will be implemented using @react-three/fiber for 3D rendering and gsap for smooth animations and transitions.

8. Interaction Model & Motion Direction

The landing/home page will use a "parallax" interaction model, creating a layered depth effect as users scroll through the app. Decorative elements will move at different speeds, enhancing the storytelling aspect of the app. Internal pages will maintain a "static" interaction model to ensure clarity and ease of use for data-heavy content.

9. Non-Functional Requirements

  • The app must be available in all geographic regions.
  • It should provide a seamless user experience with fast loading times.
  • The app must ensure data security and privacy, adhering to relevant regulations.
Page 5 of 5

10. Tech Stack

  • Frontend: React Native (Expo or bare) for iOS and Android
  • Backend: Supabase (PostgreSQL, Auth, Storage) or Firebase (Firestore, Auth)
  • Barcode scanning: react-native-camera + react-native-vision-camera or expo-barcode-scanner
  • Search: Postgres full-text search (Supabase) or Algolia (for fuzzy matching)
  • Animations: React Native Animated or Reanimated 2
  • State Management: React Context or Zustand

11. Assumptions and Constraints

  • The app will initially support English only.
  • Product data will be pre-loaded or admin-uploaded; no real-time inventory integration.
  • An internet connection is required for app functionality.

12. Glossary

  • Fuzzy Search: A search technique that finds matches even when users make typing errors.
  • Diet Type: Classification of food based on dietary preferences (e.g., vegan, vegetarian).
  • Health Score: A numerical value indicating the healthiness of a product.
  • Allergen Alerts: Notifications about potential allergens in a product.
  • Daily Intake Percentage: The percentage of recommended daily intake provided by a serving of the product.
Home design preview
Onboarding: Enter Name
Onboarding: Select Diet Preference
Animation: View Zoom Transition
Home: View For You Section
Search: Type Product Name
Search: Scan Barcode
ProductDetail: View Health Info
ProductDetail: View Ingredients
Favorites: Save Product
Profile: View Preferences