بازسازیِ فرانت: ساختارِ ماژولار، اتصالِ کامل به API، دامنه‌ی قابلِ تنظیم #7

AliReza_Zareian · 2026-09-26T23:49:21+03:30

AliReza_Zareian commented

2026-09-26 23:49:21 +03:30

بازسازیِ کاملِ فرانت روی ساختارِ ماژولار و TypeScript، و اتصالِ کامل به API بک‌اند.

چرا

کلِ اپ در یک فایلِ ۳٬۰۷۱ خطی (App.tsx) روی اسکلتِ Figma بود: ۶۰ پکیجِ بلااستفاده، ۴۵ کامپوننتِ UIِ بلااستفاده و بدونِ type-check. چند ایرادِ واقعی هم داشت:

سایتِ زنده به بک‌اند وصل نمی‌شود (هنوز buildِ ۲۱ سپتامبر روی سرور است که /api نسبی می‌زند).
ارقامِ کیبوردِ فارسی در فیلدِ شماره پاک می‌شدند؛ کاربر با کیبوردِ فارسی نمی‌توانست وارد شود.
مهمان بعد از یک ساعت بی‌صدا از حساب می‌افتاد (refresh token دور ریخته می‌شد).
«خوانده شد» در اعلان‌ها با POST می‌رفت و سرور ۴۰۵ می‌داد.
Safariِ آیفون پنجره‌ی درگاهِ پرداخت را مسدود می‌کرد.
اپ داخلِ یک «قابِ گوشیِ» ثابتِ ۳۹۰×۸۴۴ با ساعتِ ساختگی بود.

چه شد

ساختار: api/ (کلاینتِ تایپ‌دار)، screens/ (هر صفحه یک فایل)، components/، state/، nav/، lib/. نقشه‌ی کامل در README.
آدرسِ بک‌اند در کد نیست: اول public/config.js در زمانِ اجرا (روی سرور بدونِ build قابلِ ویرایش)، بعد VITE_API_BASE_URL از .env.production، و در نهایت /api هم‌دامنه. برای جابه‌جاییِ دامنه که در راه است.
قابِ واکنش‌گرا؛ فونتِ Vazirmatn از خودِ اپ (نه Google Fonts)؛ TypeScriptِ strict، و npm run build اول type-check می‌کند.
همه‌ی موارد فهرستِ «کارهای فرانت»: پاسخِ دستیار خط‌به‌خط، 👍/👎، پیشنهادِ ادامه، برچسبِ «از روی کتاب»، «دوباره امتحان کن»، تاریخچه‌ای که با عوض کردنِ تب و رفرش نمی‌رود، «از پی بپرس چرا غلط شد» با questionId، گزارشِ سوال، قلب با maxHearts/نامحدود و صفحه‌ی «قلب‌ها تمام شد»، صفحه‌ی نتیجه و خطای صریحِ ثبتِ پایانِ درس، وضعیتِ اشتراک و badge، کدِ تخفیف پیش از درگاه و پیامِ برگشت از پرداخت، کدِ ۶ رقمی با تایمرِ ارسالِ دوباره، سن به‌صورتِ سالِ تولدِ شمسی، PATCH read-all، جدولِ امتیاز که هر بار تازه می‌شود، همراهِ انتخابی در همه‌ی صفحه‌ها، و خروج که refresh token را هم باطل می‌کند.
صفحه‌های تازه برای اندپوینت‌هایی که صفحه نداشتند: «من» (پروفایل)، تقویمِ زنجیره، پشتیبانی و گزارشِ خطا، بخشِ والدین، معرفی به دوستان (با ?ref=)، و ثبتِ شماره برای مهمان.
دکمه‌ی back گوشی و مرورگر صفحه‌به‌صفحه عقب می‌رود.
ظاهر همان طراح��ِ قبلی است: رنگ‌ها، نقشه‌ی مارپیچ و سه‌یار دست نخورده‌اند.

چطور وارسی شد

npm run build (همراهِ type-check) سبز.
گشتِ خودکار با Chromeِ headless روی بک‌اندِ محلی، در اندازه‌ی ۳۹۰×۸۴۴ و ۳۶۰×۷۴۰: مهمانِ تازه، معرفی، تکمیلِ پروفایل، یک درسِ کامل، نقشه، برگه‌ی جزیره، همه‌ی تب‌ها و زیرصفحه‌ها، یک سوالِ واقعی از دستیار، رفرش و خروج. هیچ خطای کنسول و هیچ درخواستِ ناموفقی نبود.
وارسی نشده: ورود با پیامکِ واقعی و پرداختِ واقعیِ زرین‌پال.

برای دیپلوی

npm ci && npm run build و سرو کردنِ dist/. index.html و config.js نباید طولانی کش شوند.

🤖 Generated with Claude Code

بازسازیِ کاملِ فرانت روی ساختارِ ماژولار و TypeScript، و اتصالِ کامل به API بک‌اند. ## چرا کلِ اپ در یک فایلِ ۳٬۰۷۱ خطی (`App.tsx`) روی اسکلتِ Figma بود: ۶۰ پکیجِ بلااستفاده، ۴۵ کامپوننتِ UIِ بلااستفاده و بدونِ type-check. چند ایرادِ واقعی هم داشت: - سایتِ زنده به بک‌اند وصل نمی‌شود (هنوز buildِ ۲۱ سپتامبر روی سرور است که `/api` نسبی می‌زند). - ارقامِ کیبوردِ فارسی در فیلدِ شماره پاک می‌شدند؛ کاربر با کیبوردِ فارسی نمی‌توانست وارد شود. - مهمان بعد از یک ساعت بی‌صدا از حساب می‌افتاد (refresh token دور ریخته می‌شد). - «خوانده شد» در اعلان‌ها با `POST` می‌رفت و سرور ۴۰۵ می‌داد. - Safariِ آیفون پنجره‌ی درگاهِ پرداخت را مسدود می‌کرد. - اپ داخلِ یک «قابِ گوشیِ» ثابتِ ۳۹۰×۸۴۴ با ساعتِ ساختگی بود. ## چه شد - ساختار: `api/` (کلاینتِ تایپ‌دار)، `screens/` (هر صفحه یک فایل)، `components/`، `state/`، `nav/`، `lib/`. نقشه‌ی کامل در README. - **آدرسِ بک‌اند در کد نیست:** اول `public/config.js` در زمانِ اجرا (روی سرور بدونِ build قابلِ ویرایش)، بعد `VITE_API_BASE_URL` از `.env.production`، و در نهایت `/api` هم‌دامنه. برای جابه‌جاییِ دامنه که در راه است. - قابِ واکنش‌گرا؛ فونتِ Vazirmatn از خودِ اپ (نه Google Fonts)؛ TypeScriptِ strict، و `npm run build` اول type-check می‌کند. - همه‌ی موارد فهرستِ «کارهای فرانت»: پاسخِ دستیار خط‌به‌خط، 👍/👎، پیشنهادِ ادامه، برچسبِ «از روی کتاب»، «دوباره امتحان کن»، تاریخچه‌ای که با عوض کردنِ تب و رفرش نمی‌رود، «از پی بپرس چرا غلط شد» با `questionId`، گزارشِ سوال، قلب با `maxHearts`/نامحدود و صفحه‌ی «قلب‌ها تمام شد»، صفحه‌ی نتیجه و خطای صریحِ ثبتِ پایانِ درس، وضعیتِ اشتراک و badge، کدِ تخفیف پیش از درگاه و پیامِ برگشت از پرداخت، کدِ ۶ رقمی با تایمرِ ارسالِ دوباره، سن به‌صورتِ سالِ تولدِ شمسی، `PATCH read-all`، جدولِ امتیاز که هر بار تازه می‌شود، همراهِ انتخابی در همه‌ی صفحه‌ها، و خروج که refresh token را هم باطل می‌کند. - صفحه‌های تازه برای اندپوینت‌هایی که صفحه نداشتند: «من» (پروفایل)، تقویمِ زنجیره، پشتیبانی و گزارشِ خطا، بخشِ والدین، معرفی به دوستان (با `?ref=`)، و ثبتِ شماره برای مهمان. - دکمه‌ی back گوشی و مرورگر صفحه‌به‌صفحه عقب می‌رود. - ظاهر همان طراح��ِ قبلی است: رنگ‌ها، نقشه‌ی مارپیچ و سه‌یار دست نخورده‌اند. ## چطور وارسی شد - `npm run build` (همراهِ type-check) سبز. - گشتِ خودکار با Chromeِ headless روی بک‌اندِ محلی، در اندازه‌ی ۳۹۰×۸۴۴ و ۳۶۰×۷۴۰: مهمانِ تازه، معرفی، تکمیلِ پروفایل، یک درسِ کامل، نقشه، برگه‌ی جزیره، همه‌ی تب‌ها و زیرصفحه‌ها، یک سوالِ واقعی از دستیار، رفرش و خروج. هیچ خطای کنسول و هیچ درخواستِ ناموفقی نبود. - **وارسی نشده:** ورود با پیامکِ واقعی و پرداختِ واقعیِ زرین‌پال. ## برای دیپلوی `npm ci && npm run build` و سرو کردنِ `dist/`. `index.html` و `config.js` نباید طولانی کش شوند. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

AliReza_Zareian added 1 commit 2026-09-26 23:49:21 +03:30

rebuild the app on a typed, modular structure wired to the real API 348bfecea6

The whole app lived in one 3,071-line App.tsx on a Figma scaffold (60 unused
packages, 45 unused UI components, no type-check). The live site could not
reach the backend, Persian-keyboard digits were erased from the phone field,
guests were signed out after an hour, "mark read" hit a method the server
does not accept (405), and iOS Safari blocked the payment window.

What changed:
- src/ split into api/ (one typed client: timeouts, GET retry, single-flight
  refresh, SSE), screens/ (one file each), components/, state/, nav/, lib/.
- The API address is configuration only: public/config.js at runtime, then
  VITE_API_BASE_URL at build time, then same-origin /api. No domain in code.
- Responsive shell instead of a fixed 390x844 phone frame; self-hosted
  Vazirmatn instead of Google Fonts; strict TypeScript, `npm run build`
  type-checks first.
- Everything on the handoff list: tutor answers keep their line breaks, have
  thumbs up/down, follow-ups, "from the book" badge, retry, history that
  survives tab switches and reloads, "why was I wrong" from a wrong answer
  with questionId; question reports; hearts with maxHearts/unlimited and a
  no-hearts screen with the refill time; result screen and a visible error
  when lesson completion fails; subscription status, badge, discount code
  before the gateway and the payment-return message; guest refresh token;
  6-digit OTP with resend timer; age saved as a Jalali birthYear; PATCH
  read-all; leaderboard refetched on open with "you" highlighted; selected
  companion shown across the app; logout that revokes the refresh token.
- New screens for endpoints that had none: profile, streak calendar,
  support tickets and bug reports, parents, invite-a-friend (with ?ref=
  tracking), guest-to-phone upgrade.
- Browser/phone back button walks the screen stack.

Checked with a headless-Chrome walkthrough against a local backend at
390x844 and 360x740 (fresh guest: onboarding, setup, a full lesson, map,
island sheet, every tab and sub-screen, one real tutor question, reload,
logout): no console errors, no failed API calls. Real SMS login and a real
Zarinpal payment were not exercised.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

AliReza_Zareian added 1 commit 2026-09-27 01:12:42 +03:30

point production at mathapi.tadrisino2.ir and add a one-command deploy 0ca7b39e49

The API moved to mathapi.tadrisino2.ir on 2026-09-26; api.math.tadrisino2.ir
no longer resolves. .env.production is the only place that names it.

deploy.sh fetches, runs npm ci and the type-check, builds into dist.next and
swaps it in only when everything succeeded, so the site is never served half
a build. The previous build stays in dist.prev for rollback, and a
hand-edited dist/config.js on the server survives the release.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

AliReza_Zareian closed this pull request

2026-09-27 03:16:17 +03:30

Pull request closed

Please reopen this pull request to perform a merge.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Tadrisino/MathApp_frontend#7