Senior FE Interview Prep

🌍 Language / Ngôn ngữ: 🇬🇧 English | 🇻🇳 Tiếng Việt

Nuxt app for Senior Frontend interview prep: a bilingual knowledge base, a 30-day plan, an optional practice path, and a PIN-protected Q&A bank.

Live: parker-interview-senior-fe.vercel.app

Features

• Knowledge base — 23 vi/en topics (including a backend learning path), sidebar, full-text search, nested heading TOC
• 30-day plan — daily checkpoints, algorithms, view vs edit progress
• Practice path — milestone steps (/practice) from optional practice/ in the data repo
• Practice Design — optional screen gallery + numbered spec (/practice/design); hidden when practice/design/ is missing
• Interview Q&A — model answers behind a 6-digit PIN
• i18n — vi / en, no URL prefix; locale cookie
• Light / dark theme

Stack

Nuxt 3 + Nitro · Vue 3 · TypeScript · Tailwind CSS · @nuxtjs/i18n (vi/en, no_prefix) · Vercel (Nitro vercel preset) · private Vercel Blob for plan progress

Architecture

pages/                         # thin routes → module views
src/modules/
  hub/  knowledge-base/  study-plan/  practice/  interview-qa/
  content/                     # Localized blocks + BlockRenderer
  core/                        # chrome, theme, locale, session
server/api/                    # Nitro endpoints
server/utils/                  # content store, auth, search, progress
scripts/                       # pull-data, export, validate
schema/                        # JSON Schema for Localized content
i18n/locales/                  # en.json / vi.json
.data/content/                 # gitignored build-time pull

UI module conventions (naming, new-module scaffold): STRUCTURE.md.

Content model

KB / plan / Q&A / optional practice live in private <private-content-repo>. Every user-facing string is Localized:

type Localized<T = string> = { en: T; vi: T }

Docs are { sections: { id, title, blocks }[] }. Block types: heading, paragraph, list, callout, code, table, senior-answer, key-takeaways, markdown, thematic-break.

Build (predev / prebuild) runs scripts/pull-data.mjs → .data/content, then Nitro copies that tree into server assets. The client never imports the JSON files.

The backend learning guide adds the 23rd data-only catalog topic in Infrastructure at /docs/en/backend-learning and /docs/vi/backend-learning. It contains eight connected EN/VI core chapters and optional operations, with existing nested heading TOC and full-text search via /api/knowledge-base/docs/:slug. Chapter 5 distinguishes observed disposable local Prisma/MySQL lab output from production behavior. Pull the paired content PR #65 before app PR #43 is published; neither PR is ready for independent merge or deploy. The 30-day frontend plan and app-side backend services are unchanged.

APIs

Method	Path	Auth
GET	/api/knowledge-base/docs	public
GET	/api/knowledge-base/docs/:slug	public
GET	/api/knowledge-base/search?q=&lang=vi|en&limit=	public
GET	/api/plan/days	public
GET	/api/plan/days/:n	public
GET	/api/plan/resources/:id	public
GET	/api/practice	public (404 if practice/ missing)
GET	/api/practice/steps	public (all steps, for search)
GET	/api/practice/step/:id	public (^p\\d{2}$, else 404)
GET	/api/practice/progress	public read (Blob practice-progress.json)
GET	/api/practice/design	public (404 if practice/design/ missing)
GET	/api/practice/design/available	public { available }
GET	/api/practice/design/screen/:name	public WebP fallback
static	/assets/practice-design/screens/:file	copied at pull/build
PUT / POST	/api/practice/progress	edit session
GET	/api/interview/questions	interview session
POST	/api/auth/interview	body { passcode } → HttpOnly cookie

Auth

HttpOnly cookies, 12h. INTERVIEW_PASSCODE ≠ EDIT_PASSCODE — one PIN does not unlock both.

• Interview cookie unlocks GET /api/interview/questions
• Edit cookie unlocks plan progress writes
• Optional PROGRESS_WRITE_TOKEN / x-edit-token for progress writes
• Token HMAC secrets: INTERVIEW_TOKEN_SECRET, EDIT_TOKEN_SECRET

i18n

@nuxtjs/i18n, default vi, strategy no_prefix, cookie sf_locale. KB routes are /docs/:lang/:slug. UI chrome uses locale files; document bodies come from Localized JSON.

Data flow

flowchart LR
  editor[Editor] --> dataRepo["private <private-content-repo>"]
  dataRepo --> ci[CI validate Localized JSON]
  ci --> main[merge to main]
  main --> hook[GitHub Action deploy hook]
  hook --> vercel[Vercel build]
  vercel --> pull["pull-data + CONTENT_REPO_TOKEN"]
  pull --> nitro[Nitro server assets]
  nitro --> apis[Content APIs]
  apis --> pages[Nuxt pages]

Page request flow

sequenceDiagram
  participant Browser
  participant Page as Nuxt page
  participant API as Nitro API
  participant Store as content store
  Browser->>Page: GET /docs/vi/javascript
  Page->>API: useAsyncData GET /api/knowledge-base/docs/javascript
  API->>Store: readKnowledgeDoc
  Store-->>API: Localized JSON
  API-->>Page: document
  Page-->>Browser: SSR HTML
  Note over Browser,Page: Client navigation keeps the same fetch and shows skeletons while pending

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗