smart-i

byManju Manju

I have a PRD document (Shakthi_Fit_PRD.docx) that specifies a complete fitness and wellness mobile app. I need you to build the entire production-ready frontend application in React Native/Expo based on this PRD. **Core Application Requirements:** Build a complete, copy-paste-ready JavaScript/React Native application that implements every feature in the PRD. The app must be production-ready, fully functional, and immediately deployable. **Design System:** - Light theme app background with dark icons throughout - Dark mode-ready architecture with consistent theming - Professional, modern button components and interactive elements - Responsive design with smooth animations and transitions - Consistent spacing, typography, and color system applied globally **Required Features (from PRD):** 1. **Onboarding Flow** — 11-step linear stepper with smooth navigation and progress tracking 2. **Meal Planning System** — Two views: - Simple: meal name, photo, calories, macros (P/C/F) - Advanced: full ingredients, micronutrient stars, absorption notes, day-total progress bars - Progressive unlock: blurred meal cards with lock icons and countdown timers for 2-day progression 3. **Workout System** — Swipeable cards for Yoga, Cardio, and Strength with embedded 30-second demo videos and duration slider for live calorie calculation 4. **Ayurvedic Wellness Layer** — Optional wellness tips with gold accent styling and persistent health disclaimers 5. **Mode Switch** — Toggle between "Gym Trainer" and "Wellness Guide" experiences 6. **Paywall Flow** — 7-day free trial converting to ₹2,499 full access with app store compliance 7. **Real-time Dietician Summary** — Dynamic card displaying personalized user information 8. **Health Compliance** — Required disclaimer language and consent flows per app store guidelines **Architecture & Code Quality:** - Use modern React Native component patterns and best practices - Implement scalable, reusable component library structure - Include complete state management for navigation, user progress, and feature toggles - Write well-commented, maintainable code - Ensure all screens, navigation flows, and styling are included - Code must follow industry best practices for mobile app development **Output Delivery:** Provide the complete application code in a single, organized, copy-paste-ready format. Include all screens, components, navigation structure, state management setup, styling, and any necessary configuration files. The code should be ready to run immediately with `expo start`.

HomeMealPlanLogin
Home

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 7

Shakthi Fit System Requirements Document

1. Introduction

This document outlines the system requirements for the Shakthi Fit mobile application, a comprehensive fitness and wellness app designed to provide personalized meal plans, workout coaching, and Ayurvedic wellness tips. The app is intended for an India-first market with global deployment capabilities.

2. System Overview

Shakthi Fit is a mobile application that integrates a personalized meal planning system, a workout coaching system, and an Ayurvedic wellness layer. The app is built using React Native/Expo for the frontend and Xano for the backend, with PostgreSQL as the database. Payments are processed through Razorpay, and video content is hosted on Bunny Stream or Cloudflare Stream.

3. Functional Requirements

Onboarding & Profile

  • As a new user, I want to complete an 11-step onboarding process to create a personalized health profile.
  • As a user, I want to see a real-time dietician summary card after completing the initial steps of the onboarding process.
Page 2 of 7

Meal Planning System

  • As a user, I want to view my meal plan with a 2-day visibility window to keep the plan fresh.
  • As a user, I want to choose between a simple and advanced view for my meal plans.
  • As a user, I want my meal plan to be generated based on my dietary preferences, allergies, and health conditions.
  • As a user, I want to receive Ayurvedic wellness tips integrated into my meal plan if I opt-in.
  • As a user, I want to see absorption and pairing tips to enhance nutrient absorption.

Workout System

  • As a user, I want to access a library of exercises with demo videos and live calorie calculations.
  • As a user, I want to toggle between Gym Trainer and Wellness Guide modes to tailor my workout experience.
  • As a user, I want to follow a weekly workout split and have access to a quick daily workout option.
  • As a user, I want to access full-body cardio exercises to improve cardiovascular health.
  • As a user, I want to access full-body strength exercises to build muscle and strength.
  • As a user, I want to access full-body yoga styles to enhance flexibility and mindfulness.

Ayurvedic Wellness Layer

  • As a user, I want to receive traditional wellness tips based on my organ-system interests and health profile.
  • As a user, I want to ensure that any Ayurvedic suggestions are filtered for safety against my medications and health conditions.
  • As a user, I want to access a herb-by-organ database for personalized wellness tips.

Subscription & Payments

  • As a user, I want to start with a 7-day free trial that converts to a paid subscription.
  • As a user, I want to manage my subscription and apply discount codes for payments.
Page 3 of 7

Notifications & Engagement

  • As a user, I want to receive push notifications for meal unlocks, workout reminders, and trial-ending alerts.

Admin Dashboard

  • As an admin, I want to manage users, content, subscriptions, and promo codes through a role-based access control system.
  • As an admin, I want to ensure all screens are included in the admin dashboard for comprehensive management.

Security & Compliance

  • As a developer, I want to implement encryption and technical controls to protect user data.
  • As a developer, I want to classify data to ensure proper handling of sensitive information.
  • As a developer, I want to follow a security pattern for every group to ensure secure access and data protection.

Analytics & Monitoring

  • As a product manager, I want to monitor app usage and performance through analytics tools.

Authentication & Account System

  • As a user, I want to securely authenticate and manage my account using email, social login, and OTP.

4. User Personas

  • Aarav, 28: Focused on fat loss, prefers automated calorie tracking.
  • Meera, 34: Interested in muscle gain and precise macro tracking.
  • Lakshmi, 45: Seeks traditional remedies for wellness and digestion.
  • Priya (Ops/Admin): Manages content and oversees subscriptions.
Page 4 of 7

5. Core User Flows

Onboarding Flow

  1. User signs up and begins the 11-step onboarding process.
  2. User completes personal details, body metrics, fitness goals, and health & safety information.
  3. User receives a real-time dietician summary card.
  4. User completes the onboarding and accesses the main app features.

Meal Plan Access

  1. User views the meal plan with a 2-day visibility window.
  2. User toggles between simple and advanced views.
  3. User marks meals as eaten and tracks progress.

Workout Access

  1. User selects a workout mode (Gym Trainer or Wellness Guide).
  2. User follows the weekly workout split or quick daily workout.
  3. User logs workout sessions and tracks calorie burn.
Page 5 of 7

6. Visuals Colors and Theme

  • primary: #FF5722 (a vibrant orange for brand identity)
  • primary_light: #FF8A50 (a lighter tint of primary for hover states)
  • secondary: #4CAF50 (a green for supporting elements)
  • accent: #FFC107 (a yellow for CTAs and badges)
  • highlight: #FFEB3B (a bright yellow for notifications)
  • bg: #FFFFFF (white for the page background)
  • surface: #F5F5F5 (light grey for cards and panels)
  • text: #212121 (dark grey for primary text)
  • text_muted: #757575 (muted grey for secondary text)
  • border: #E0E0E0 (light grey for borders)

7. Signature Design Concept

The Shakthi Fit app will feature an interactive "Wellness Journey" map on the home page. Users can navigate through a dynamic, animated map that represents their health journey. Each milestone on the map corresponds to a feature of the app, such as meal planning, workouts, or Ayurvedic tips. As users progress, the map evolves, unlocking new paths and features. This concept will use motion/react for smooth animations and transitions, providing an engaging and visually appealing experience.

Page 6 of 7

Landing Hero Motion Brief

The landing page will feature a continuously moving 2D composition illustrating a user's health journey. The animation will depict inputs like dietary preferences and fitness goals transforming a central avatar through various wellness stages, culminating in a vibrant, healthy lifestyle outcome. The scene will include layers such as a path, milestones, and animated icons representing different app features. The animation will loop every 10 seconds, with interactive elements allowing users to click on milestones to learn more about each feature. The design will be responsive, maintaining clarity and engagement across devices.

8. Interaction Model & Motion Direction

  • Interaction Model: Animated
  • Motion Direction: Smooth animations and transitions will be used throughout the app to enhance user engagement and provide a seamless experience. The landing page will feature a continuous 2D motion loop, with interactive elements layered on top to strengthen the storytelling.

9. Non-Functional Requirements

  • Secure data handling compliant with India's DPDP Act.
  • High performance and scalability to handle user growth.
  • Accessibility features for a diverse user base.
Page 7 of 7

10. Tech Stack

  • Frontend: React Native/Expo
  • Backend: Xano (PostgreSQL)
  • Payments: Razorpay
  • Video Hosting: Bunny Stream or Cloudflare Stream

11. Assumptions and Constraints

  • The app is designed for users aged 18 and above.
  • The ₹2,499 price point is assumed to be a one-time or annual fee.
  • The app must comply with Apple and Google health app guidelines.

12. Glossary

  • DPR: Daily Personalized Requirement
  • BMR: Basal Metabolic Rate
  • TDEE: Total Daily Energy Expenditure
  • MET: Metabolic Equivalent of Task
  • RBAC: Role-Based Access Control
  • API: Application Programming Interface

This document serves as a comprehensive guide for the development and deployment of the Shakthi Fit mobile application, ensuring all functional and non-functional requirements are met for a successful launch.

Home design preview
Onboarding: Sign Up
Onboarding: Complete 11 Steps
Onboarding: View Dietician Summary
Home: View Wellness Journey
Paywall: Start Free Trial
MealPlan: View Simple View
MealPlan: Mark Meal Eaten
Workout: Select Gym Trainer Mode
Workout: Follow Weekly Split
Workout: Log Calorie Burn
Profile: Manage Subscription
Home design preview
Onboarding: Sign Up
Onboarding: Complete 11 Steps
Onboarding: View Dietician Summary
Home: View Wellness Journey
Paywall: Start Free Trial
MealPlan: View Simple View
MealPlan: Mark Meal Eaten
Workout: Select Gym Trainer Mode
Workout: Follow Weekly Split
Workout: Log Calorie Burn
Profile: Manage Subscription