स्मार्ट फ़िटनेस ऐप्लिकेशन: क्लाइंट आर्किटेक्चर की खास जानकारी
आर्टिफ़ैक्टयह आर्टफ़ैक्ट, तीसरे एपिसोड: अपने ऐप्लिकेशन को स्मार्ट बनाएं और चौथे एपिसोड: बिना कोड वाले ऐप्लिकेशन को लागू करने का प्लान में इस्तेमाल किया गया है. इस स्पेसिफ़िकेशन का इस्तेमाल, फ़्रंटएंड व्यू, फिर से इस्तेमाल किए जा सकने वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट, क्लाइंट स्टेट मैनेजमेंट, और आसान अंग्रेज़ी में लिखे गए टेस्ट केस के लिए रेफ़रंस के तौर पर किया जा सकता है.
इनमें शामिल है:
तीसरा एपिसोड: अपने ऐप्लिकेशन को स्मार्ट बनाएं
चौथा एपिसोड: बिना कोड लिखे ऐप्लिकेशन बनाने का प्लान
इस आर्टफ़ैक्ट को ऐक्सेस करने के लिए साइन इन करें
Build It! सीरीज़ में इस्तेमाल किए गए पूरे आर्टफ़ैक्ट को देखने और कॉपी करने के लिए, अपनी Google डेवलपर प्रोफ़ाइल से साइन इन करें.
डेवलपर प्रोफ़ाइल ज़रूरी है
आपके लिए डेवलपर प्रोफ़ाइल बनाने की सुविधा उपलब्ध नहीं है. अपने Workspace एडमिन को इस सुविधा को चालू करने के लिए कहें.
डेवलपर प्रोफ़ाइल बनाएं
Build It! के सभी प्रॉम्प्ट और आर्टफ़ैक्ट अनलॉक करने के लिए, बिना किसी शुल्क के Google डेवलपर प्रोफ़ाइल बनाएं.
अनलॉक करने के लिए Builder Central में शामिल हों
एक क्लिक में बिल्डर मेंबर का बैज मुफ़्त में पाएं. इससे आपको Build It! के सभी प्रॉम्प्ट और आर्टफ़ैक्ट का ऐक्सेस मिलेगा.
स्टेटस: प्लानिंग सेशन के लिए तैयार (क्लाइंट प्लानिंग कंपैनियन के साथ ड्राफ़्ट किया जा रहा है)
कंपैनियन दस्तावेज़: डेटा आर्किटेक्चर की खास जानकारी
आर्किटेक्चर का लक्ष्य: AI Studio के स्मार्ट फ़िटनेस प्रोटोटाइप के फ़्रंटएंड को फिर से बनाना, ताकि वह साफ़-सुथरा, आसानी से मैनेज किया जा सकने वाला, मॉड्यूलर, और टेस्ट किया जा सकने वाला हो.
0. मुख्य तकनीकी स्टैक और इंजीनियरिंग स्टैंडर्ड
- रनटाइम फ़्रेमवर्क: Next.js (ऐप्लिकेशन राऊटर, React 19) + प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) ऑफ़लाइन ऐसेट कैश मेमोरी.
- स्टाइलिंग आर्किटेक्चर: Tailwind CSS v4 + Tailwind वैरिएंट (डिटरमिनिस्टिक कॉम्पोनेंट स्टाइलिंग के लिए) + Lucide React (आइकॉन).
- क्लाइंट स्टेट डिविज़न:
- Zustand (लोकल सेशन): यह जिम-फ़्लोर की अस्थायी स्थिति (
useActiveSessionStore), स्टॉपवॉच टाइमर, ऐक्टिव सेट बफ़र, और पहले से तय किए गए स्टेप सीक्वेंस को मैनेज करता है. फ़ोन लॉक होने पर उसे वापस पाने के लिए,localStorageके साथ सिंक किया गया. - TanStack Query (सर्वर स्टेट): यह
weekly_plans,user_profiles,prs, औरworkout_logsके लिए, Firestore दस्तावेज़ की कैश मेमोरी, बैकग्राउंड में फिर से पुष्टि करने की प्रोसेस, और ऑप्टिमिस्टिक अपडेट को मैनेज करता है.
- Zustand (लोकल सेशन): यह जिम-फ़्लोर की अस्थायी स्थिति (
- चार्ट विज़ुअलाइज़ेशन: Recharts (कस्टम डार्क जिम-मोड टोकन के साथ स्टाइल किया गया).
- पुष्टि करना: Firebase से पुष्टि करना. इसमें, सभी सर्वर एंडपॉइंट को पास किए गए बियरर टोकन ऑथेंटिकेशन हेडर का इस्तेमाल किया जाता है.
1. फ़्रंटएंड के सिद्धांत और डिज़ाइन से जुड़े सिद्धांत
- जिम के लिए खास तौर पर डिज़ाइन किया गया: इसे इस तरह से डिज़ाइन किया गया है कि वर्कआउट के दौरान, पसीने से भीगे हाथों से भी इसे एक हाथ से आसानी से इस्तेमाल किया जा सके. टैप टारगेट का साइज़ कम से कम 48x48 डीपी होना चाहिए. साथ ही, टेक्स्ट को आसानी से पढ़ा जा सके और टाइप करने की ज़रूरत कम से कम पड़े.
- ऑप्टिमिस्टिक यूज़र इंटरफ़ेस (यूआई) और ऑफ़लाइन मोड में काम करने की क्षमता: सेट लॉग करने, रेस्ट टाइमर शुरू करने, और एक्सरसाइज़ बदलने जैसी कार्रवाइयों के लिए, यूज़र इंटरफ़ेस (यूआई) को तुरंत (<16 मि॰से॰) रिस्पॉन्स देना चाहिए. बैकग्राउंड सिंक की सुविधा, उपयोगकर्ता को ब्लॉक किए बिना
POST /api/workouts/logके लिए सर्वर परसिस्टेंस को मैनेज करती है. - Strict Separation of Concerns: डंब/प्रेज़ेंटेशनल कॉम्पोनेंट, प्रॉप्स का इस्तेमाल करके डेटा हासिल करते हैं और इवेंट ट्रिगर करते हैं. वहीं, स्मार्ट कंटेनर व्यू, कारोबारी नियम, स्टेट स्टोर, और एपीआई कोऑर्डिनेशन को मैनेज करते हैं.
- स्टेज्ड म्यूटेशन यूएक्स: एआई कोच (
POST /api/coach/chat) से जनरेट किए गए सुझाव, इंटरैक्टिव स्टेज्ड झलक वाले कार्ड के तौर पर रेंडर होते हैं. इनमें ऐप्लिकेशन की स्थिति में बदलाव करने से पहले, [प्लान स्वीकार करें] और [बदलाव करें] कंट्रोल साफ़ तौर पर दिखते हैं. - उपयोगकर्ता के व्यवहार के आधार पर क्वालिटी: हर पेज, कॉम्पोनेंट, और इंटरैक्शन को आसान अंग्रेज़ी में लिखे गए टेस्ट केस के साथ जोड़ा जाता है. इससे, उम्मीद के मुताबिक व्यवहार को साफ़ तौर पर तय किया जाता है.
2. ऐप्लिकेशन नेविगेशन और व्यू हैरारकी (व्यू और व्यू ग्रुप के लेआउट का क्रम)
| रूट पाथ | दृश्य का नाम | मुख्य मकसद | इसमें शामिल मुख्य कॉम्पोनेंट |
|---|---|---|---|
/ |
रूट रीडायरेक्ट | /today पर तुरंत रीडायरेक्ट किया जाता है. |
(राऊटर रीडायरेक्ट) |
/today |
आज की कसरत की झलक | डिफ़ॉल्ट व्यू. यह हफ़्ते के मौजूदा दिन के हिसाब से अपने-आप सेट हो जाता है और आज की कसरत की झलक दिखाता है. | <BackButton />, <WorkoutHeader />, <CoachNoteCard />, <WorkoutExerciseSummary />, <WorkoutBlock />, <ExerciseCard />, <EmptyDayPlaceholder />, <ModifyWithCoachCard /> |
/workouts/:day |
हर दिन कसरत करने की सुविधा की झलक | हफ़्ते के किसी खास दिन के लिए, कसरत की झलक दिखाता है. जैसे, /workouts/monday, /workouts/thursday. |
<BackButton />, <WorkoutHeader />, <CoachNoteCard />, <WorkoutExerciseSummary />, <WorkoutBlock />, <ExerciseCard />, <EmptyDayPlaceholder />, <ModifyWithCoachCard /> |
/workout/active |
ऐक्टिव सेशन ट्रैकर | कसरत करने की स्क्रीन, जिसमें सेट, रेप, और टाइमर दिख रहा है. सबसे नीचे मौजूद नेविगेशन बार दिखता रहता है. | <ActiveSessionStickyHeader />, <ActiveExerciseCardHeader />, <CoachTipCard />, <CurrentSetTargetCard />, <SetNavigationRow />, <ExerciseSetsTable />, <ActiveRestTimerDock />, <SessionExerciseOverview />, <ActiveSessionControlsDock />, <SwapExerciseModal />, <FinishConfirmationModal /> |
/week |
ट्रेनिंग शेड्यूल / हफ़्ते का व्यू | सात दिनों के पूरे शेड्यूल की खास जानकारी, जिसमें हर हफ़्ते के वॉल्यूम/समय की कुल जानकारी शामिल है. | <WeekHeader />, <WeeklyStatsSummary />, <DayScheduleCardList />, <DayScheduleCard />, <ModifyWeekWithCoachCard /> |
/coach |
एआई कोच से चैट करें | कॉन्टेक्स्ट के हिसाब से चिप और वर्कआउट के सुझाव देने वाली सुविधा. | <CoachHeader />, <ChatMessageList />, <ChatBubble />, <StagedProposalCard />, <ContextualPromptsBar />, <ChatInputDock />, <ContextBanner />, <ChatInputBar />, <SpeechToTextButton /> |
/progress |
प्रोग्रेस और आंकड़े | ट्रेनिंग के पुराने लॉग, पीआर उपलब्धियां, और वॉल्यूम चार्ट. | <ProgressHeader />, <PRShowcaseBanner />, <VolumeProgressChartCard />, <AllTimeStatsGrid />, <WorkoutHistorySection />, <HistorySessionCard />, <EmptyHistoryPlaceholder /> |
/settings |
उपयोगकर्ता की प्रोफ़ाइल और प्राथमिकताएं | इक्विपमेंट प्रोफ़ाइल, सूचनाएं, और तीन-टियर मेमोरी मैनेजमेंट. | <SettingsHeader />, <UserProfileCard />, <EquipmentSelectorCard />, <EquipmentToggleChip />, <PreferencesGroup />, <MemoryTierViewerCard />, <MemoryItemCard />, <AccountActionsGroup /> |
/exercises/:exerciseId |
कसरत के विश्वकोश की जानकारी | कसरत के लिए डीप-लिंक की जा सकने वाली गाइड (जैसे, /exercises/incline-db-bench-press). इसमें वीडियो और कसरत करने के तरीके से जुड़ी सलाह शामिल होनी चाहिए. |
<BackButton />, <ExerciseVideoPlayer />, <TargetMusclesCard />, <HowToPerformCard />, <FormTipsCard /> |
3. पेज और व्यू की खास जानकारी
व्यू: DailyWorkoutView (/today और /workouts/:day)
- मकसद: यह कॉम्पोनेंट, किसी खास दिन के लिए शेड्यूल की गई ट्रेनिंग की जानकारी दिखाता है. इसमें कसरत का फ़ोकस, अवधि, मांसपेशियों पर पड़ने वाले टारगेट लोड का डिस्ट्रिब्यूशन, कोच के नोट, स्ट्रेट-सेट ब्लॉक, और सुपरसेट ब्लॉक शामिल हैं. अगर कोई कसरत शेड्यूल नहीं की गई है, तो यह कॉम्पोनेंट खाली दिखता है.
- विज़ुअल ऐनटमी:
- ऊपर:
<BackButton label="Back to Week" targetRoute="/week" />. - हेडर: एक लाइन वाला टाइटल (
"Today"या हफ़्ते का दिन). इसमें शर्त के मुताबिक"✓ Completed"बैज, अवधि वाला पिल ("⏱ 50 min"), और टारगेट की गई मांसपेशियों की इंटेंसिटी का प्रतिशत दिखाने वाले बार शामिल हैं. - कोच नोट: आइकॉन और हरे रंग के बॉर्डर टिंट वाला कॉन्टेक्स्ट के हिसाब से सलाह देने वाला कार्ड.
- मुख्य हिस्सा: स्क्रोल की जा सकने वाली सूची, जिसमें कसरत के ब्लॉक शामिल हैं. इसके लिए,
<WorkoutExerciseSummary />का इस्तेमाल किया गया है. इसमेंborder-left: 3px solid #a3e635और🔁 SUPERSET BLOCKबैज के साथ स्ट्रेट सेट या सुपरसेट शामिल हैं. - खाली स्थिति:
<EmptyDayPlaceholder message="Nothing scheduled for this day" />. - सबसे नीचे मौजूद फ़ुटर में दी गई कार्रवाई:
<ModifyWithCoachCard />(/coach?day=:dayपर ले जाता है).
- ऊपर:
व्यू: WeekScheduleView (/week)
- मकसद: इससे सात दिनों के ट्रेनिंग शेड्यूल की पूरी खास जानकारी दिखती है. इसमें हफ़्ते के हिसाब से, कसरत की अवधि/समय की अहम मेट्रिक, कसरत के दिनों की चुनिंदा सूची (इसमें बिना शेड्यूल वाले/आराम के दिन शामिल नहीं होते), और एआई कोच की मदद से हफ़्ते के प्लान में बदलाव करने का डायरेक्ट शॉर्टकट शामिल है.
- विज़ुअल ऐनाटॉमी:
<WeekHeader />, तीन कॉलम वाला<WeeklyStatsSummary />(कुल समय, कुल वॉल्यूम, फ़्रीक्वेंसी),<DayScheduleCard variant="normal" />का इस्तेमाल करके शेड्यूल किए गए दिनों की सूची (मौजूदा दिन पर नियॉन-ग्रीनTODAYबैज के साथ), और<ModifyWeekWithCoachCard />(/coach?context=weekपर ले जाता है).
व्यू: CoachChatView (/coach)
- मकसद: Gemini ट्रेनर एजेंट के साथ बातचीत करके कोचिंग पाने का हब. यह आपको ट्रेनिंग के लिए प्रेरणा और रणनीतिक सलाह देता है. साथ ही, बोली को लिखाई में बदलने की सुविधा देता है. इसके अलावा, यह निगरानी में काम करने वाले एआई मॉडल की मदद से, वर्कआउट में बदलाव करने की सुविधा देता है. इसके लिए, आपको साफ़ तौर पर कंट्रोल मिलते हैं.
- विज़ुअल ऐनटमी:
<CoachHeader />, स्क्रोल किया जा सकने वाला<ChatMessageList />(<ChatBubble />और<StagedProposalCard />), कंडिशनल<ContextualPromptsBar />, और डॉक किया गया<ChatInputDock />(<ContextBanner />के साथ[✕]खारिज करें +<ChatInputBar />+<SpeechToTextButton />).
व्यू: ExerciseDetailView (/exercises/:exerciseId)
- मकसद: डीप-लिंक की जा सकने वाली एन्साइक्लोपीडिया एंट्री, जिसमें अपने-आप लूप होने वाला म्यूट वीडियो (
<ExerciseVideoPlayer />), प्राइमरी और सेकंडरी टारगेट मसल बैज (<TargetMusclesCard />), सिलसिलेवार तरीके से दिए गए निर्देश (<HowToPerformCard />), और फ़ॉर्म से जुड़ी सलाह (<FormTipsCard />) शामिल हैं.
व्यू: ActiveWorkoutView (/workout/active)
- मकसद: कसरत के दौरान अहम डेटा को रिकॉर्ड करना और सेट को लॉग करने वाली स्क्रीन दिखाना. यह लाइव सेशन की स्टॉपवॉच की स्थिति, मौजूदा सेट के टारगेट, रेप/वज़न के इनपुट, तुरंत सही का निशान लगाने (<16 मि॰से॰), सुपरसेट के अपने-आप बदलने, हैप्टिक/ऑडियो के साथ आराम करने के टाइमर के काउंटडाउन, कसरत की अदला-बदली, और
POST /api/workouts/logमें आखिरी बार सेव किए गए डेटा को मैनेज करता है. - विज़ुअल ऐनाटॉमी:
<ActiveSessionStickyHeader />,<ActiveExerciseCardHeader />,<CoachTipCard />,<CurrentSetTargetCard />, फ़्लोटिंग<ActiveRestTimerDock />(+30s,Skip),<SetNavigationRow />,<ExerciseSetsTable />(+ Add Set),<SessionExerciseOverview />, डॉक किया गया<ActiveSessionControlsDock />([⇄ SWAP EXERCISE]+[▶ START WORKOUT]/[⏸ PAUSE]/[▶ RESUME]),<SwapExerciseModal />, और<FinishConfirmationModal />.
व्यू: ProgressView (/progress)
- मकसद: समय के साथ एथलेटिक प्रोग्रेस को ट्रैक करता है, हाल ही के पर्सनल रिकॉर्ड (
<PRShowcaseBanner />) को सेलिब्रेट करता है, इंटरैक्टिव रीचार्ट (4W | 3M | 1Yटॉगल के साथ<VolumeProgressChartCard />) की मदद से हर हफ़्ते/महीने के वॉल्यूम ट्रेंड को विज़ुअलाइज़ करता है,<AllTimeStatsGrid />दिखाता है, और पूरे हो चुके पिछले वर्कआउट सेशन (<WorkoutHistorySection />/<HistorySessionCard />) को संग्रहित करता है.
व्यू: SettingsView (/settings)
- मकसद: एथलीट की प्रोफ़ाइल की जानकारी (
<UserProfileCard />), इक्विपमेंट इन्वेंट्री (<EquipmentSelectorCard />/<EquipmentToggleChip />), और वर्कआउट की सेटिंग (LBS / KGके लिए<PreferencesGroup />, हैप्टिक, साउंड) को मैनेज करना. साथ ही, एआई ट्रेनर की थ्री-टियर लिविंग मेमोरी (<MemoryTierViewerCard />/<MemoryItemCard />) को मिटाने और उपयोगकर्ता को पारदर्शी तरीके से मैनेज करने की सुविधा देना.
4. फिर से इस्तेमाल किए जा सकने वाले कॉम्पोनेंट का कैटलॉग और इंटरफ़ेस
ऐप्लिकेशन में TypeScript कॉम्पोनेंट के मुख्य प्रॉप कॉन्ट्रैक्ट:
// src/components/workout/WorkoutExerciseSummary.tsx
interface WorkoutExerciseSummaryProps {
blocks: Array<{
label?: string;
category?: string;
exercises: Array<{
exercise_id: string; // Canonical slug (e.g. 'incline-db-bench-press')
name: string; // Denormalized display name (e.g. 'Incline DB Bench Press')
target_sets: number;
target_reps: string | number;
rest_seconds?: number;
}>;
}>;
activeExerciseId?: string;
onSelectExercise?: (exerciseId: string) => void;
}
// src/components/week/DayScheduleCard.tsx
interface DayScheduleCardProps {
dayName: string;
dayShort: string;
subtitleLabel?: string;
isToday?: boolean;
title: string;
focusBadge: string;
durationMin: number;
volumeLbs?: number;
targetMuscles: string[];
variant?: 'normal' | 'condensed';
onPress: (dayName: string) => void;
}
// src/components/coach/StagedProposalCard.tsx
interface StagedProposalCardProps {
proposalId: string;
type: 'UPDATE_DAY' | 'UPDATE_WEEK';
targetDay?: string;
summaryDiff: string;
proposalData: any;
isApplied?: boolean;
onAccept: (proposalId: string, data: any) => void;
onModify: (summaryDiff: string) => void;
}
// src/components/workout/CurrentSetTargetCard.tsx
interface CurrentSetTargetCardProps {
setNumber: number;
targetWeightLbs: number;
targetReps: number;
isCompleted: boolean;
onWeightChange: (weight: number) => void;
onRepsChange: (reps: number) => void;
onToggleComplete: () => void;
}5. क्लाइंट स्टेट मैनेजमेंट और डेटा फ़्लो मैट्रिक्स
5.1 इंतज़ार का समय और लोड होने की नीति: दो स्पीड वाला इंजन
- जिम-फ़्लोर ऑप्टिमिस्टिक यूज़र इंटरफ़ेस (<16 मि॰से॰): जिम-फ़्लोर पर की जाने वाली कार्रवाइयां, जैसे कि सेट को चेक करना, वज़न/रेप बढ़ाना, टैब स्विच करना, और इक्विपमेंट को टॉगल करना—लोकल स्टेट को अपडेट करती हैं और 16 मिलीसेकंड के अंदर फिर से रेंडर करती हैं. वज़न उठाने के दौरान, उपयोगकर्ताओं को लोडिंग इंडिकेटर की वजह से कभी भी ब्लॉक नहीं किया जाता.
- एसिंक्रोनस ऑपरेशन के लिए, साफ़ तौर पर दिखने वाले लोडिंग स्पिनर और इंडिकेटर:
- एआई कोच के साथ बातचीत (
POST /api/coach/chat): चैट मैसेज सबमिट करने पर, चैट स्ट्रीम में तुरंत एक ऐनिमेटेड कोच थिंकिंग स्पिनर बबल रेंडर होता है. यह तब तक दिखता है, जब तक Gemini अपना जवाब या वर्कआउट का सुझाव नहीं दे देता. - शुरुआती कोल्ड-स्टार्ट और नेटवर्क सिंक:
weekly_plansयाhistorical_workoutsफ़ेच करते समय, व्यू कंटेनर में स्केलेटन लोडर और ज़्यादा कंट्रास्ट वाले लोडिंग स्पिनर दिखते हैं. - कसरत की जानकारी सबमिट करना (
[Finish]): कसरत पूरी होने की पुष्टि करने वाले मोडल में, सेशन पेलोड को Cloud Firestore मेंPOST /api/workouts/logपर सबमिट करने के दौरान, एक ऐक्टिव लोडिंग स्पिनर रेंडर होता है.
- एआई कोच के साथ बातचीत (
5.2 क्लाइंट स्टोर आर्किटेक्चर और डोमेन की सीमाएं
| स्टोर लेयर | स्टेट डोमेन और मुख्य प्रॉपर्टी | पर्सिस्टेंस और कैश मेमोरी में सेव करने से जुड़ी नीति | Coordinated Backend Contract |
|---|---|---|---|
useActiveSessionStore (Zustand) |
sessionState (unstarted, running, paused), elapsedSeconds, currentStepIndex, steps: WorkoutStep[], loggedExercises. |
फ़ोन लॉक/रिफ़्रेश रिकवरी को सुरक्षित रखने के लिए, हर सेकंड localStorage के साथ सिंक किया जाता है. |
पूरा पेलोड POST /api/workouts/log को सबमिट करता है. |
useWeeklyPlanQuery (TanStack Query) |
सात दिनों का मौजूदा शेड्यूल, दिन के हिसाब से वर्कआउट ऑब्जेक्ट, सुपरसेट ब्लॉक, और पूरा होने की स्थितियां (scheduled, completed). |
TanStack Query (staleTime: 5 min) में कैश मेमोरी में सेव किया गया; लॉन्च के समय पहले से फ़ेच किया गया. |
[Accept Plan] पर टैप करके, POST /api/coach/chat से मिले प्रस्तावों को स्वीकार किया गया. |
useCoachChatStore (Zustand + TanStack) |
समय के हिसाब से मैसेज बबल, activeContext, प्रॉम्प्ट चिप, isCoachTyping: boolean, और स्टेज किए गए प्रस्ताव. |
रीयल-टाइम सदस्यता (onSnapshot) का इस्तेमाल करके, Firestore की हर हफ़्ते की चैट बकेट के साथ सिंक किया गया. |
POST /api/coach/chat को क्वेरी भेजता है. |
useProgressQuery (TanStack Query) |
कसरत का पुराना डेटा, पीआर रिकॉर्ड बोर्ड (/users/{userId}/prs), अब तक की कुल कसरत, समयसीमा के हिसाब से फ़िल्टर (4W, 3M, 1Y). |
TanStack Query (staleTime: 10 min) में कैश मेमोरी में सेव किया गया. |
कसरत का सेशन पूरा होने के तुरंत बाद अपडेट किया जाता है. |
useUserProfileStore (TanStack Query) |
इन्वेंट्री में मौजूद उपकरण, यूनिट (LBS/KG), साउंड/हैप्टिक टॉगल, तीन लेवल वाली लिविंग मेमोरी (ज़रूरी चीज़ें, शारीरिक ज़रूरतें, और स्थिति के हिसाब से ज़रूरतें). |
TanStack Query में कैश मेमोरी में सेव किया गया डेटा, Firestore user_profiles के साथ दोनों तरफ़ से सिंक होता है. |
POST /api/coach/chat से memory_mutations का इस्तेमाल करके, अपने-आप अपडेट किया गया. |
useExerciseLibraryQuery (TanStack Query) |
एनसाइक्लोपीडिया की स्टैटिक एंट्री, वीडियो के यूआरएल, प्राइमरी/सेकंडरी मसल्स, कसरत करने के चरण, और कसरत करने के तरीके से जुड़ी सलाह. | अनंत टीटीएल (staleTime: Infinity) के साथ एग्रेसिव कैश-फ़र्स्ट. |
इम्यूटेबल Firestore exercises कलेक्शन से रीड-ओनली. |
5.3 पहले से कैलकुलेट किए गए, गतिविधि के सेशन के दौरान चले गए कदमों का ग्राफ़
export interface WorkoutStep {
stepIndex: number; // 1-based index (e.g. 1 to 13)
totalSteps: number; // Total sets in the session
blockIndex: number; // Index of block in day plan
blockType: 'straight' | 'superset';
exerciseId: string; // Canonical slug
exerciseName: string; // Display name
setNumber: number; // Set index for this exercise (1, 2, 3...)
targetWeightLbs: number; // Target weight in lbs
targetReps: string | number; // Target reps (e.g. "8-10")
restSecondsAfter: number; // Prescribed rest duration
isCompleted: boolean; // Completion checkmark status
actualWeightLbs?: number; // User entered weight
actualRepsCompleted?: number; // User entered reps
}5.4 एंड-टू-एंड डेटा फ़्लो और म्यूटेशन मैट्रिक्स
| उपयोगकर्ता ट्रिगर | ओरिजिनेटिंग व्यू | क्लाइंट स्टोर में बदलाव किया गया | यूज़र इंटरफ़ेस (यूआई) के जवाब में लगने वाला समय / लोड होने की स्थिति | बैकएंड कोऑर्डिनेशन | रोलबैक / गड़बड़ी ठीक करना |
|---|---|---|---|---|---|
[✓] पूरा सेट पर टैप करें |
/workout/active |
useActiveSessionStore |
<16ms (ऑप्टिमिस्टिक) |
लोकल सेशन बफ़र अपडेट किया गया; नेटवर्क का इंतज़ार नहीं करना पड़ा. | लोकल मेमोरी में डेटा सेव करने की सुविधा, ताकि डेटा को डिवाइस पर सुरक्षित तरीके से सेव किया जा सके. |
[Finish Workout] पर टैप करें |
/workout/active |
useActiveSessionStore, useWeeklyPlanStore, useProgressStore |
सिंक होने के दौरान, बटन पर लोडिंग स्पिनर दिखता है | POST /api/workouts/log पर सबमिट किया जाता है. Firestore Day को completed के तौर पर मार्क करता है. |
ऑफ़लाइन होने पर, पेलोड को लोकल सिंक बफ़र में सूची में जोड़ता है और फिर से कनेक्ट होने पर कोशिश करता है. |
[Accept Plan] पर टैप करें |
/coach |
useWeeklyPlanStore, useCoachChatStore |
इंस्टैंट यूज़र इंटरफ़ेस (यूआई) स्टैंप ("✓ Plan Applied") |
Firestore weekly_plans में proposal.data को सेव करता है. |
अगर नेटवर्क काम नहीं करता है, तो उपयोगकर्ता को टोस्ट नोटिफ़िकेशन मिलता है. साथ ही, फिर से कोशिश करने के लिए बटन चालू रहते हैं. |
| Chat में मैसेज भेजना | /coach |
useCoachChatStore, useUserProfileStore |
ऑप्टिमिस्टिक बबल अपेंड + Coach के सोचने का स्पिनर | POST /api/coach/chat को कॉल करें. कमिट से memory_mutations मिला. |
स्पिनर को "भेजा नहीं जा सका" से बदलता है. "फिर से कोशिश करने के लिए टैप करें" बबल. |
| इक्विपमेंट चिप को टॉगल करना | /settings |
useUserProfileStore |
इंस्टैंट टॉगल (<16ms) |
Firestore user_profiles में बैकग्राउंड में डेटा सेव करने की प्रोसेस को डिस्पैच करता है. |
चिप के चुने गए विकल्प को पहले जैसा करता है. साथ ही, डेटा सेव न होने पर गड़बड़ी का मैसेज दिखाता है. |
एआई की मेमोरी में सेव किया गया आइटम [🗑] मिटाएं |
/settings |
useUserProfileStore |
तुरंत मिटाना (<16ms) |
Firestore user_profiles में, मिटाने के लिए म्यूटेशन भेजता है. |
यह यादें आइटम को वापस लाता है और मिटाने में विफल होने पर उपयोगकर्ता को सचेत करता है. |
6. शुरू से आखिर तक उपयोगकर्ता की गतिविधि और आसान अंग्रेज़ी में जांच का मैट्रिक्स
- सूट 1: ऐप शेल, नेविगेशन, और रूट हैंडलिंग (टेस्ट 1.1–1.6: रूट लॉन्च रीडायरेक्ट, परसिस्टेंट डॉक, चालू गतिविधि के सेशन पर तुरंत वापस जाना, हफ़्ते के अमान्य दिन के लिए फ़ॉलबैक, अनजान रूट 404 के लिए फ़ॉलबैक, अमान्य एक्सरसाइज़ डीप-लिंक के लिए फ़ॉलबैक).
- सूट 2: डेली वर्कआउट व्यू और ब्लॉक रेंडरिंग (टेस्ट 2.1–2.7: डाइनैमिक डे टाइटल रिज़ॉल्यूशन, किसी खास दिन का रूट और 'वापस जाएं' बटन, सिंगल बनाम सुपरसेट ब्लॉक ट्रीटमेंट, खाली दिन का प्लेसहोल्डर, पूरा हो चुके वर्कआउट का स्टैंप, सेंटर प्ले बटन पर प्योर नेविगेशन, कोच के कॉन्टेक्स्ट अटैचमेंट के साथ बदलाव करना).
- सूट 3: हफ़्ते के शेड्यूल का व्यू और दिन के शेड्यूल का कार्ड (टेस्ट 3.1–3.6: हफ़्ते के आंकड़े रेंडर करना, सिर्फ़ शेड्यूल किए गए दिनों के हिसाब से फ़िल्टर करना, आज के लिए विज़ुअल कॉलआउट, दिन के कार्ड पर नेविगेट करना, हफ़्ते के नेविगेशन में बदलाव करना, कम जानकारी वाले वैरिएंट को रेंडर करना).
- सुइट 4: कोच चैट और स्टेज्ड म्यूटेशन (टेस्ट 4.1–4.7: चैट मैसेज स्ट्रीम रेंडर, कॉन्टेक्स्ट बैनर अटैचमेंट और डिसमिसल, प्रॉम्प्ट चिप प्री-पॉप्युलेशन, स्पीच डिक्टेशन टॉगल, स्टेज्ड म्यूटेशन आइसोलेशन, प्रपोज़ल एक्सेप्टेंस और कमिट, वीकली ओवरहॉल प्रपोज़ल प्रिव्यू और कमिट).
- सूट 5: कसरत की जानकारी और एनसाइक्लोपीडिया (टेस्ट 5.1–5.5: कसरत की जानकारी रेंडर करना, म्यूट किए गए वीडियो को अपने-आप लूप में चलाने की सुविधा, वीडियो को रोकने के लिए टॉगल, प्राइमरी बनाम सेकंडरी मसल टैग, पीछे जाने की प्रोसेस, और फ़ॉलबैक).
- सुइट 6: ऐक्टिव वर्कआउट ट्रैकर और लॉगिंग (टेस्ट 6.1–6.7: वर्कआउट शुरू न होने की शुरुआती स्थिति और मैन्युअल तरीके से शुरू करना, स्टॉपवॉच को रोकना और फिर से शुरू करना, टैक्टाइल सेट लॉगिंग और सही के निशान वाला टॉगल, सुपरसेट स्टेप ऑल्टरनेशन, स्वैप एक्सरसाइज़ मॉडल और रिप्लेसमेंट, पूरा होने की पुष्टि और सर्वर सिंक, रीलोड करने पर सेशन की स्थिति को वापस लाना).
- सूट 7: प्रोग्रेस और पुराना डेटा (टेस्ट 7.1–7.5: प्रोग्रेस डैशबोर्ड की खास जानकारी रेंडर करना, पीआर शोकेस बैनर डिसप्ले, चार्ट की समयावधि टॉगल करना, इतिहास खाली होने की स्थिति, पिछले सेशन के इतिहास पर टैप करना).
- सूट 8: उपयोगकर्ता की सेटिंग, उपकरण, और एआई की मेमोरी (टेस्ट 8.1–8.4: सेटिंग व्यू रेंडरिंग, उपकरण टॉगल अपडेट, यूनिट स्विच, एआई की मेमोरी से आइटम मिटाना).