স্মার্ট ফিটনেস অ্যাপ: ক্লায়েন্ট আর্কিটেকচার স্পেক
আর্টিফ্যাক্টএটি হল এপিসোড ৩: আপনার অ্যাপকে একটি ব্রেন দিন এবং এপিসোড ৪: নো-কোড অ্যাপ ইমপ্লিমেন্টেশন প্ল্যানে ব্যবহৃত আর্টিফ্যাক্ট। আপনি এই স্পেসিফিকেশন ফ্রন্টএন্ড ভিউ, আবার ব্যবহার করা যায় এমন UI কম্পোনেন্ট, ক্লায়েন্ট স্টেট ম্যানেজমেন্ট এবং সহজ-ইংরেজি টেস্ট কেসের জন্য রেফারেন্স হিসেবে ব্যবহার করতে পারেন।
এতে ফিচার করা হয়েছে:
এপিসোড ৩: আপনার অ্যাপকে একটি ব্রেন দিন
এপিসোড ৪: নো-কোড অ্যাপ প্রয়োগ করার প্ল্যান
এই আর্টিফ্যাক্ট অ্যাক্সেস করতে সাইন-ইন করুন
Build It! সিরিজে ব্যবহৃত সম্পূর্ণ আর্টিফ্যাক্ট দেখতে ও কপি করতে আপনার Google Developer প্রোফাইল দিয়ে সাইন-ইন করুন।
ডেভেলপার প্রোফাইল প্রয়োজন
আপনি ডেভেলপার প্রোফাইল তৈরি করার জন্য উপযুক্ত নন। এই ফিচার চালু করতে আপনার Workspace অ্যাডমিনিস্ট্রেটরকে বিজ্ঞপ্তি পাঠান।
Developer প্রোফাইল তৈরি করুন
সব Build It! প্রম্পট ও আর্টিফ্যাক্ট আনলক করতে ফ্রিতে Google Developer প্রোফাইল তৈরি করুন।
আনলক করতে Builder Central-এ যোগ দিন
এক ক্লিকে আপনার ফ্রি বিল্ডার মেম্বার ব্যাজ দাবি করুন এবং সব Build It! প্রম্পট ও আর্টিফ্যাক্ট আনলক করুন।
স্ট্যাটাস: প্ল্যানিং সেশনের জন্য রেডি (ক্লায়েন্ট প্ল্যানিং কম্প্যানিয়নের সাথে ড্রাফ্ট করা হচ্ছে)
কম্প্যানিয়ন ডকুমেন্ট: ডেটা আর্কিটেকচার স্পেসিফিকেশন
আর্কিটেকচার সংক্রান্ত লক্ষ্য: AI Studio স্মার্ট ফিটনেস প্রোটোটাইপের ফ্রন্টএন্ড রিবিল্ড, যা পরিষ্কার, রক্ষণাবেক্ষণযোগ্য, মডুলার এবং টেস্ট করা যায়।
0. কোর টেকনিক্যাল স্ট্যাক ও ইঞ্জিনিয়ারিং স্ট্যান্ডার্ড
- রানটাইম ফ্রেমওয়ার্ক: Next.js (App Router, React 19) + প্রোগ্রেসিভ ওয়েব অ্যাপ (PWA) অফলাইন অ্যাসেট ক্যাশিং।
- স্টাইলিং আর্কিটেকচার: Tailwind CSS v4 + Tailwind ভেরিয়েন্ট (নির্ধারক কম্পোনেন্ট স্টাইলিংয়ের জন্য) + Lucide React (আইকন)।
- ক্লায়েন্ট স্টেট ডিভিশন:
- Zustand (লোকাল সেশন): পরিবর্তনশীল জিম-ফ্লোর স্টেট (
useActiveSessionStore), স্টপওয়াচ টাইমার, অ্যাক্টিভ সেট বাফার এবং আগে থেকে গণনা করা স্টেপ সিকোয়েন্সিং ম্যানেজ করে। ফোন-লক রিকভারির জন্যlocalStorage-এ সিঙ্ক করা হয়েছে। - TanStack Query (সার্ভার স্টেট):
weekly_plans,user_profiles,prsএবংworkout_logs-এর জন্য Firestore ডকুমেন্ট ক্যাশিং, ব্যাকগ্রাউন্ড রিভ্যালিডেশন এবং অপ্টিমিস্টিক আপডেট ম্যানেজ করে।
- Zustand (লোকাল সেশন): পরিবর্তনশীল জিম-ফ্লোর স্টেট (
- চার্ট ভিজ্যুয়ালাইজেশন: Recharts (কাস্টম ডার্ক জিম-মোড টোকেন সহ স্টাইল করা)।
- যাচাইকরণ: সব সার্ভার এন্ডপয়েন্টে পাস করা বিয়ারার টোকেন যাচাইকরণ হেডার সহ Firebase যাচাইকরণ।
১. ফ্রন্টএন্ড টিনেট ও ডিজাইন প্রিন্সিপাল
- জিম-ফার্স্ট এরগোনমিক্স: ঘামে ভেজা হাতে ওয়ার্কআউট করার সময় এক হাতে স্পর্শ করে ব্যবহার করার জন্য ডিজাইন করা হয়েছে। ট্যাপ টার্গেট (ন্যূনতম ৪৮x৪৮dp), হাই-কনট্রাস্ট লেজিবিলিটি এবং ন্যূনতম টাইপিং।
- অপ্টিমিস্টিক UI ও অফলাইন রেজিলিয়েন্স: সেট লগ করা, রেস্ট টাইমার শুরু করা এবং এক্সারসাইজ সোয়্যাপ করার মতো অ্যাকশন UI-তে ঝটপট (<১৬ মিলি সেকেন্ড) রেসপন্স করতে হবে। ব্যাকগ্রাউন্ড সিঙ্ক ব্যবহারকারীকে ব্লক না করে
POST /api/workouts/log-এ সার্ভার পারসিস্টেন্স ম্যানেজ করে। - Strict Separation of Concerns: ডাম্ব/প্রেজেন্টেশনাল কম্পোনেন্ট ডেটা গ্রহণ করে এবং প্রপস ব্যবহার করে ইভেন্ট এমিট করে; স্মার্ট কন্টেনার ভিউ বিজনেস লজিক, স্টেট স্টোর এবং API কোঅর্ডিনেশন ম্যানেজ করে।
- স্টেজেড মিউটেশন UX: AI কোচের (
POST /api/coach/chat) মাধ্যমে জেনারেট করা সাজেশন ইন্টার্যাক্টিভ স্টেজেড প্রিভিউ কার্ড হিসেবে রেন্ডার করা হয়। এতে অ্যাপ্লিকেশন স্টেটে পরিবর্তন করার আগে [প্ল্যান গ্রহণ করুন] এবং [পরিবর্তন করুন] কন্ট্রোল থাকে। - আচরণ-ভিত্তিক কোয়ালিটি: প্রতিটি পৃষ্ঠা, কম্পোনেন্ট ও ইন্টার্যাকশন সহজ-ইংরেজি টেস্ট কেসের সাথে পেয়ার করা হয় যা প্রত্যাশিত আচরণকে দ্ব্যর্থহীনভাবে সংজ্ঞায়িত করে।
২. অ্যাপ্লিকেশন নেভিগেশন ও ভিউ হায়ারার্কি
| রুটের পাথ | নাম দেখুন | মূল উদ্দেশ্য | প্রধান কম্পোনেন্ট আছে |
|---|---|---|---|
/ |
রুট রিডাইরেক্ট | /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 |
AI কোচ চ্যাট | প্রাসঙ্গিক চিপ ও ধাপে ধাপে ওয়ার্কআউট সংক্রান্ত সাজেশন সহ কথোপকথনের মাধ্যমে কোচিং। | <CoachHeader />, <ChatMessageList />, <ChatBubble />, <StagedProposalCard />, <ContextualPromptsBar />, <ChatInputDock />, <ContextBanner />, <ChatInputBar />, <SpeechToTextButton /> |
/progress |
প্রোগ্রেস ও অ্যানালিটিক্স | ঐতিহাসিক ট্রেনিং লগ, PR সংক্রান্ত সাফল্য এবং ভলিউম চার্ট। | <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 /> |
৩. পৃষ্ঠা ও ভিউ স্পেসিফিকেশন
দেখুন: DailyWorkoutView (/today ও /workouts/:day)
- উদ্দেশ্য: কোনও নির্দিষ্ট দিনের জন্য শিডিউল করা ট্রেনিং রেজিম দেখায়—যার মধ্যে ওয়ার্ক-আউট ফোকাস, সময়সীমা, টার্গেট মাসল লোড ডিস্ট্রিবিউশন, কোচের নোট, স্ট্রেট-সেট ব্লক ও সুপারসেট ব্লক অন্তর্ভুক্ত—কোনও ওয়ার্ক-আউট শিডিউল করা না থাকলে ক্লিন এম্পটি স্টেট ফলব্যাক সহ।
- ভিজ্যুয়াল অ্যানাটমি:
- উপরে:
<BackButton label="Back to Week" targetRoute="/week" />। - হেডার: শর্তাধীন
"✓ Completed"ব্যাজ, সময়সীমা পিল ("⏱ 50 min") এবং টার্গেট পেশির ইনটেনসিটি শতাংশ বার সহ এক লাইনের শীর্ষক ("Today"বা সপ্তাহের দিন)। - কোচ নোট: আইকন ও সবুজ বর্ডার টিন্ট সহ প্রাসঙ্গিক পরামর্শ কার্ড।
- বডি:
<WorkoutExerciseSummary />(border-left: 3px solid #a3e635এবং🔁 SUPERSET BLOCKব্যাজ সহ স্ট্রেট সেট বা সুপারসেট) ব্যবহার করে এক্সারসাইজ ব্লকের স্ক্রল করা যায় এমন তালিকা। - খালি অবস্থা:
<EmptyDayPlaceholder message="Nothing scheduled for this day" />। - নিচের ফুটার অ্যাকশন:
<ModifyWithCoachCard />(/coach?day=:day-এ যাওয়ার রুট)।
- উপরে:
দেখুন: WeekScheduleView (/week)
- উদ্দেশ্য: ৭ দিনের সম্পূর্ণ ট্রেনিং শিডিউলের ওভারভিউ দেখায়, যার মধ্যে হাই-লেভেল সাপ্তাহিক ভলিউম/সময় মেট্রিক, অ্যাক্টিভ ওয়ার্ক-আউট দিনের কিউরেট করা তালিকা (শিডিউল না করা/বিশ্রামের দিন কঠোরভাবে বাদ দিয়ে) এবং AI কোচের সাথে সাপ্তাহিক প্ল্যান ওভারহল করার সরাসরি শর্টকাট অন্তর্ভুক্ত।
- ভিজ্যুয়াল অ্যানাটমি:
<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)
- উদ্দেশ্য: হাই-স্টেক ওয়ার্কআউট এক্সিকিউশন এবং সেট লগিং স্ক্রিন। লাইভ সেশন স্টপওয়াচের স্ট্যাটাস, বর্তমানে সেট করা টার্গেট, রেপ/ওজন ইনপুট, তাৎক্ষণিক চেকমার্ক সম্পূর্ণ করা (<১৬ মিলি সেকেন্ড), অটোমেটিক সুপারসেট অল্টারনেশন, হ্যাপটিক্স/অডিও সহ রেস্ট টাইমার কাউন্টডাউন, এক্সারসাইজ সোয়্যাপ করা এবং
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 />, হ্যাপটিক্স, সাউন্ড) ম্যানেজ করে এবং AI ট্রেনারের ৩-টিয়ার লিভিং মেমরি (<MemoryTierViewerCard />/<MemoryItemCard />) মুছে দেওয়া ও ব্যবহারকারী ম্যানেজ করার স্বচ্ছ সুবিধা প্রদান করে।
৪. আবার ব্যবহার করা যাবে এমন কম্পোনেন্ট ক্যাটালগ ও ইন্টারফেস
অ্যাপ্লিকেশন জুড়ে মূল 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;
}৫. ক্লায়েন্ট স্টেট ম্যানেজমেন্ট ও ডেটা ফ্লো ম্যাট্রিক্স
৫.১ লেটেন্সি ও লোডিং সংক্রান্ত নীতি: টু-স্পিড ইঞ্জিন
- জিম-ফ্লোর অপ্টিমিস্টিক UI (<১৬ মিলি সেকেন্ড): ট্যাকটাইল জিম-ফ্লোর অ্যাকশন—সেট চেক অফ করা, ওজন/রেপ বাড়ানো, ট্যাব পাল্টানো এবং ইকুইপমেন্ট টগল করা—লোকাল স্টেট আপডেট করা এবং ১৬ মিলি সেকেন্ডের মধ্যে আবার রেন্ডার করা। ওজন ধরে রাখার সময় ব্যবহারকারীরা কখনই লোডিং ইন্ডিকেটর দ্বারা ব্লক হন না।
- অ্যাসিঙ্ক্রোনাস অপারেশনের জন্য এক্সপ্লিসিট লোডিং স্পিনার ও ইন্ডিকেটর:
- AI Coach কথোপকথন (
POST /api/coach/chat): চ্যাট মেসেজ জমা দেওয়ার সাথে সাথে চ্যাট স্ট্রিমে একটি অ্যানিমেটেড কোচ থিঙ্কিং স্পিনার বাবল দেখায়, যতক্ষণ না Gemini তার উত্তর বা ওয়ার্কআউট প্রস্তাব দেয়। - প্রাথমিক কোল্ড-স্টার্ট ও নেটওয়ার্ক সিঙ্ক:
weekly_plansবাhistorical_workoutsফেচ করার সময় ভিউ কন্টেনার স্কেলিটন লোডার ও হাই-কনট্রাস্ট লোডিং স্পিনার দেখায়। - ওয়ার্কআউট জমা দেওয়া (
[Finish]): সেশন পে-লোড Cloud Firestore-এPOST /api/workouts/log-এ জমা দেওয়ার সময় শেষ করার কনফার্মেশন মডেলে একটি অ্যাক্টিভ লোডিং স্পিনার দেখায়।
- AI Coach কথোপকথন (
৫.২ ক্লায়েন্ট স্টোর আর্কিটেকচার ও ডোমেন বাউন্ডারি
| স্টোর লেয়ার | স্টেট ডোমেন ও কী প্রপার্টি | পারসিস্টেন্স ও ক্যাশে নীতি | সমন্বিত ব্যাকএন্ড চুক্তি |
|---|---|---|---|
useActiveSessionStore (Zustand) |
sessionState (unstarted, running, paused), elapsedSeconds, currentStepIndex, steps: WorkoutStep[], loggedExercises. |
ফোন-লক/রিফ্রেশ রিকভারি যাতে বুলেটপ্রুফ হয় তার জন্য প্রতি সেকেন্ডে localStorage-এর সাথে সিঙ্ক করা হয়। |
POST /api/workouts/log-এ সম্পূর্ণ পে-লোড জমা দেয়। |
useWeeklyPlanQuery (TanStack Query) |
বর্তমান ৭-দিনের শিডিউল, দিনের ওয়ার্কআউট অবজেক্ট, সুপারসেট ব্লক, সম্পূর্ণ করার স্ট্যাটাস (scheduled, completed)। |
TanStack কোয়েরিতে (staleTime: 5 min) ক্যাশে করা হয়েছে; লঞ্চ করার সময় প্রি-ফেচ করা হয়েছে। |
POST /api/coach/chat থেকে পাওয়া প্রস্তাবের জন্য ব্যবহারকারী [Accept Plan]-এ ট্যাপ করলে তবেই এটি করা হয়। |
useCoachChatStore (Zustand + TanStack) |
কালানুক্রমিক মেসেজ বাবল, activeContext, প্রম্পট চিপ, isCoachTyping: boolean, স্টেজ করা প্রস্তাব। |
রিয়েল-টাইম সাবস্ক্রিপশন (onSnapshot) ব্যবহার করে Firestore সাপ্তাহিক চ্যাট বাকেটের সাথে সিঙ্ক করা হয়েছে। |
POST /api/coach/chat-এ কোয়েরি পাঠায়। |
useProgressQuery (TanStack Query) |
ঐতিহাসিক ওয়ার্কআউট আর্কাইভ, PR রেকর্ড বোর্ড (/users/{userId}/prs), সর্বকালের ভলিউম অ্যাগ্রিগেট, টাইমফ্রেম ফিল্টার (4W, 3M, 1Y)। |
TanStack কোয়েরিতে (staleTime: 10 min) ক্যাশে করা হয়েছে। |
ওয়ার্ক-আউট সেশন সম্পূর্ণ করার সাথে সাথেই আপডেট করা হয়। |
useUserProfileStore (TanStack Query) |
সরঞ্জামের ইনভেনটরি, ইউনিট (LBS/KG), সাউন্ড/হ্যাপটিক টগল, ৩-টিয়ার লিভিং মেমরি (স্টেপেল, ফিজিওলজিক্যাল, সিচুয়েশনাল)। |
Firestore user_profiles-এ দ্বি-নির্দেশক সিঙ্ক সহ TanStack কোয়েরিতে ক্যাশে করা হয়েছে। |
POST /api/coach/chat থেকে memory_mutations ব্যবহার করে অটোমেটিক আপডেট করা হয়েছে। |
useExerciseLibraryQuery (TanStack Query) |
স্ট্যাটিক এনসাইক্লোপিডিয়া এন্ট্রি, ভিডিও URL, প্রাথমিক/সেকেন্ডারি পেশি, ধাপ, ফর্ম সংক্রান্ত পরামর্শ। | অসীম TTL (staleTime: Infinity) সহ অ্যাগ্রেসিভ ক্যাশে-ফার্স্ট। |
অপরিবর্তনীয় Firestore exercises কালেকশন থেকে শুধুমাত্র পড়া যাবে। |
৫.৩ প্রি-কম্পিউটেড অ্যাক্টিভ সেশন স্টেপ গ্রাফ
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
}৫.৪ শুরু থেকে শেষ পর্যন্ত ডেটা ফ্লো ও মিউটেশন ম্যাট্রিক্স
| ব্যবহারকারীর ট্রিগার | উৎপত্তি ভিউ | ক্লায়েন্ট স্টোর মিউটেট করা হয়েছে | UI লেটেন্সি / লোডিং স্টেট | ব্যাকএন্ড কোঅর্ডিনেশন | রোলব্যাক / সমস্যা ম্যানেজ করা |
|---|---|---|---|---|---|
[✓] সম্পূর্ণ সেট বিকল্পে ট্যাপ করুন |
/workout/active |
useActiveSessionStore |
<16ms (আশাবাদী) |
লোকাল সেশন বাফার আপডেট করা হয়েছে; নেটওয়ার্কের জন্য অপেক্ষা করতে হবে না। | নির্ভরযোগ্য লোকাল পারসিস্টেন্স সহ লোকাল মেমরি রাইট। |
[Finish Workout]-এ ট্যাপ করুন |
/workout/active |
useActiveSessionStore, useWeeklyPlanStore, useProgressStore |
সিঙ্ক করার সময় বোতামে লোডিং স্পিনার দেখানো হয় | POST /api/workouts/log-এ জমা দেয়। Firestore-এর দিনকে completed হিসেবে চিহ্নিত করে। |
অফলাইন থাকলে, লোকাল সিঙ্ক বাফারে পেলোড কিউ করে এবং আবার কানেক্ট করার পরে চেষ্টা করে। |
[Accept Plan]-এ ট্যাপ করুন |
/coach |
useWeeklyPlanStore, useCoachChatStore |
ইনস্ট্যান্ট UI স্ট্যাম্প ("✓ Plan Applied") |
Firestore weekly_plans-এ proposal.data কমিট করে। |
নেটওয়ার্ক কাজ না করলে, টোস্ট বিজ্ঞপ্তি ব্যবহারকারীকে সতর্ক করে এবং আবার চেষ্টা করার জন্য বোতাম অ্যাক্টিভ থাকে। |
| Chat-এ মেসেজ পাঠান | /coach |
useCoachChatStore, useUserProfileStore |
আশাবাদী বাবল অ্যাপেন্ড + কোচ থিঙ্কিং স্পিনার | POST /api/coach/chat-কে কল করা। কমিট memory_mutations ফিরিয়ে দিয়েছে। |
স্পিনারকে "পাঠানো যায়নি" দিয়ে পরিবর্তন করে। আবার চেষ্টা করতে ট্যাপ করুন।" বাবল। |
| সরঞ্জাম চিপ টগল করুন | /settings |
useUserProfileStore |
ইনস্ট্যান্ট টগল (<16ms) |
Firestore user_profiles-এ ব্যাকগ্রাউন্ড রাইট ডিসপ্যাচ করে। |
চিপ সিলেকশন আগের অবস্থায় ফিরিয়ে আনে এবং লিখতে না পারলে এরর টোস্ট দেখায়। |
AI মেমরি আইটেম মুছুন [🗑] |
/settings |
useUserProfileStore |
ঝটপট মুছে ফেলা (<16ms) |
Firestore user_profiles-এ মিউটেশন মুছে ফেলার নির্দেশ পাঠায়। |
মেমরি আইটেম ফিরিয়ে আনে এবং মুছে ফেলা না গেলে ব্যবহারকারীকে সতর্ক করে। |
৬. এন্ড-টু-এন্ড ব্যবহারকারীর অভিজ্ঞতা ও প্লেন-ইংলিশ টেস্ট ম্যাট্রিক্স
- Suite 1: App Shell, Navigation & Route Handling (Tests 1.1–1.6: Root launch redirect, persistent dock, active session quick-return, invalid day-of-week fallback, unknown route 404 fallback, invalid exercise deep-link fallback).
- স্যুট ২: দৈনিক ওয়ার্কআউট ভিউ ও ব্লক রেন্ডারিং (টেস্ট ২.১–২.৭: ডায়নামিক ডে টাইটেল রেজোলিউশন, নির্দিষ্ট দিনের রুট ও ব্যাক বোতাম, সিঙ্গেল বনাম সুপারসেট ব্লক ট্রিটমেন্ট, খালি দিনের প্লেসহোল্ডার, সম্পূর্ণ করা ওয়ার্কআউট স্ট্যাম্প, সেন্টার প্লে বোতামে পিওর নেভিগেশন, কোচের কনটেক্সট অ্যাটাচমেন্টের সাথে পরিবর্তন)।
- স্যুট ৩: সপ্তাহের শিডিউল ভিউ ও দিনের শিডিউল কার্ড (টেস্ট ৩.১–৩.৬: সাপ্তাহিক পরিসংখ্যান রেন্ডার, শুধু শিডিউল করা দিনের ফিল্টার, আজকের ভিজ্যুয়াল কলআউট, দিনের কার্ড নেভিগেশন, সপ্তাহের নেভিগেশন পরিবর্তন, সংক্ষিপ্ত ভ্যারিয়েন্ট রেন্ডারিং)।
- Suite 4: Coach Chat & Staged Mutation (Tests 4.1–4.7: Chat message stream render, context banner attachment & dismissal, prompt chip pre-population, speech dictation toggle, staged mutation isolation, proposal acceptance & commit, weekly overhaul proposal preview & commit).
- স্যুট ৫: এক্সারসাইজ সংক্রান্ত বিবরণ ও এনসাইক্লোপিডিয়া (টেস্ট ৫.১–৫.৫: এক্সারসাইজ সংক্রান্ত বিবরণ রেন্ডার করা, অটো-লুপ করা মিউট করা প্লেব্যাক, ভিডিও পজ টগল, প্রাথমিক বনাম সেকেন্ডারি পেশি ট্যাগ, ইতিহাস ব্যাক নেভিগেশন ও ফলব্যাক)।
- স্যুট ৬: অ্যাক্টিভ ওয়ার্কআউট ট্র্যাকার ও লগিং (টেস্ট ৬.১–৬.৭: শুরু না হওয়া প্রাথমিক অবস্থা ও ম্যানুয়ালি শুরু করা, স্টপওয়াচ পজ ও আবার চালু করা, ট্যাকটাইল সেট লগিং ও টিকচিহ্ন টগল, সুপারসেট স্টেপ অল্টারনেশন, এক্সারসাইজ মোডাল সোয়্যাপ ও রিপ্লেসমেন্ট, শেষ করার কনফার্মেশন ও সার্ভার সিঙ্ক, রিলোড করার সময় সেশন স্টেট রিকভারি)।
- Suite 7: প্রোগ্রেস ও পুরনো অ্যানালিটিক্স (টেস্ট 7.1–7.5: প্রোগ্রেস ড্যাশবোর্ড ওভারভিউ রেন্ডার, PR শোকেস ব্যানার ডিসপ্লে, চার্ট টাইমফ্রেম টগল, খালি ইতিহাস স্ট্যাটাস, পুরনো সেশনের ইতিহাস ট্যাপ)।
- সুইট ৮: ব্যবহারকারীর সেটিংস, ইকুইপমেন্ট ও AI মেমরি (টেস্ট ৮.১–৮.৪: সেটিংস ভিউ রেন্ডারিং, ইকুইপমেন্ট টগল আপডেট, ইউনিট সুইচ, AI মেমরি আইটেম মুছে ফেলা)।