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)