Nik Afiq 9674fc9cbe Squashed commit of the following:
commit da3f3bff39f09e753c1c52de0c47a12383cd20dc
Author: Nik Afiq <nik.afiq98@ymail.com>
Date:   Sat Dec 6 02:49:31 2025 +0900

    docs: add README files for frontend and backend with setup instructions and commands

commit df71faa0751d1cef3ad6d50d0293fb8f8239d000
Author: Nik Afiq <nik.afiq98@ymail.com>
Date:   Sat Dec 6 02:44:13 2025 +0900

    chore: update Vite version and add Vitest configuration

    - Updated Vite dependency from rolldown-vite@7.1.12 to ^5.4.11 in package.json.
    - Added setup file for Vitest to handle Vite SSR helpers, preventing ReferenceError during unit tests.
    - Created a new tsconfig.vitest.json file extending the main tsconfig for Vitest compatibility.
    - Added vitest.config.ts to configure Vitest with Node environment and setup files.

commit f3a1710dd0fe12998965992f6b5f8803422087cf
Author: Nik Afiq <nik.afiq98@ymail.com>
Date:   Sat Dec 6 02:37:32 2025 +0900

    feat: add testing framework and implement unit tests for API and config

    - Added Vitest as a testing framework with scripts for running tests.
    - Created unit tests for the `fetchSchedule` and `fetchServerNow` functions in `watchparty.test.ts`.
    - Implemented unit tests for configuration functions in `config.test.ts`.
    - Added utility functions for parsing time in `time.ts` with corresponding tests in `time.test.ts`.
    - Updated API error handling to use `unknown` type for better type safety.
    - Refactored `TimeSyncNotice` and `Timer` components to improve performance and error handling.
    - Enhanced toast notifications by moving related functions to `toastBus.ts`.
    - Improved type definitions across various files for better type safety and clarity.

commit 0d436849fc4a0b87d0c73f4fe14fe1e272d47ad9
Author: Nik Afiq <nik.afiq98@ymail.com>
Date:   Sat Dec 6 02:30:01 2025 +0900

    Refactor components to utilize centralized configuration: update TimeSyncNotice and Timer to use config for intervals; enhance error handling and retry logic in ShowsPage.

commit 8dbd4d207a471d05fab8c6f9cd95e3f4f7ec9099
Author: Nik Afiq <nik.afiq98@ymail.com>
Date:   Sat Dec 6 02:22:28 2025 +0900

    Refactor API endpoint handling: replace join function with buildApiUrl for cleaner URL construction; update BrowserRouter basename to use config

commit 3e327aa73877034019dffe262580536f4be7c62e
Author: Nik Afiq <nik.afiq98@ymail.com>
Date:   Sat Dec 6 02:18:31 2025 +0900

    Refactor configuration management: introduce config.ts for centralized app configuration; update API endpoint handling and logger to use new config

commit 131984d1baf368f94a14a62986eaf028ebbd7c86
Author: Nik Afiq <nik.afiq98@ymail.com>
Date:   Sat Dec 6 02:11:33 2025 +0900

    Refactor API types: move ScheduleResponse and ShowItem types to a new types.ts file; update imports in watchparty and Timer components

commit 8faa4661a9ccc0691490a5766f0eb1d97f24b6e5
Author: Nik Afiq <nik.afiq98@ymail.com>
Date:   Sat Dec 6 02:05:42 2025 +0900

    Refactor API handling: introduce centralized error handling and logging; replace direct fetch calls with apiFetch in Timer, ShowsPage, and hooks

commit ffde7e89fcab6f48c6023afab73e4b2e1122efa5
Author: Nik Afiq <nik.afiq98@ymail.com>
Date:   Sat Dec 6 01:52:36 2025 +0900

    Add dist directory to .gitignore

commit 128a5be6eaa16bf4db5f7dd832b1d461fa2b835d
Author: Nik Afiq <nik.afiq98@ymail.com>
Date:   Sat Dec 6 01:52:28 2025 +0900

    Add toast notifications and debug overlay components; refactor Timer and ShowsPage for error handling
2025-12-06 03:03:30 +09:00
..
2025-11-11 22:48:57 +09:00
2025-11-04 20:53:28 +09:00
2025-12-06 03:03:30 +09:00
2025-12-06 03:03:30 +09:00
2025-11-04 20:53:28 +09:00
2025-11-05 15:28:17 +09:00
2025-12-06 03:03:30 +09:00
2025-12-06 03:03:30 +09:00
2025-11-04 20:53:28 +09:00
2025-11-04 20:53:28 +09:00
2025-11-04 20:53:28 +09:00
2025-11-11 22:48:57 +09:00

Frontend (Vite + React + TS)

Single-page app served by Nginx in production. Uses Vite for build/dev, React Router, and debug-gated logging/overlay.

Prerequisites

  • Node.js 20+
  • npm (uses package-lock.json)

Commands

npm ci                # install deps
npm run dev           # start Vite dev server (http://localhost:5173)
npm run build         # type-check + production build
npm run lint          # eslint
npm test              # vitest unit tests (config, parsers, API helpers)

Env/config

  • PUBLIC_BASE_PATH (build arg) → Vite base/Router basename (default /watch-party/, use / for local dev).
  • FRONTEND_MODEVITE_APP_MODE (debug enables logging/overlay; production disables).
  • VITE_BACKEND_ORIGIN (default /api) — relative path preferred so Nginx proxy works; avoid baking hosts.
  • Optional polling overrides:
    • VITE_INTERVAL_TIME_SYNC_MS (default 60000)
    • VITE_INTERVAL_TIME_SKEW_MS (default 300000)
    • VITE_INTERVAL_SCHEDULE_POLL_MS (default 60000)

Running locally

cd frontend
npm ci
VITE_APP_MODE=debug npm run dev   # enables debug overlay/logging

The dev server proxies /api to http://localhost:8082 (see vite.config.ts). Adjust if your backend runs elsewhere.

Docker build

docker build -t watchparty-frontend \
  --build-arg PUBLIC_BASE_PATH=/watch-party/ \
  --build-arg FRONTEND_MODE=production \
  --build-arg VITE_BACKEND_ORIGIN=/api \
  .

The runtime Nginx proxy target is controlled separately via BACKEND_ORIGIN in the root .env/compose.