QuizeFactor web

Vue 3 + Vite + JavaScript SPA for professional certification courses — it mirrors the REST API in QuizeFactor API.postman_collection.json.

Brand colors

UI tokens in src/style.css follow navy #1D2F6F (primary, links, surfaces) and gold #FFD927 (focus rings / accent). Exposed to Tailwind as --color-brand-navy and --color-brand-gold.

App (repository root)

cp .env.example .env   # default API origin is https://quizfactor.app
npm install
npm run dev

CI: npm ci && npm run build (use package-lock.json at the repo root).

If vite: command not found after npm install, devDependencies were skipped (e.g. NODE_ENV=production). Run npm install --include=dev or npm ci without production-only mode.

Sign-in: Use Log in in the header to open the modal (Log in / Register tabs). The app calls:

• POST /api/auth/local/login — JSON body { "email": "...", "password": "..." }
• POST /api/auth/local/register — JSON body { "email": "...", "password": "...", "name": "..." } (name optional)

Successful responses should include a bearer token in the JSON envelope data, e.g. data.token or data.accessToken, and may include data.user (e.g. { "email" }). Paths and field names are centralized in src/api/authApi.js if your API differs.

You can still set the token manually: Application → Local Storage → quizfactor_auth_token, or localStorage.setItem('quizfactor_auth_token', '<token>').

Course images in local dev: Absolute URLs on VITE_API_BASE_URL (e.g. https://quizfactor.app/images/...) are rewritten to same-origin paths and proxied by Vite so images are not blocked by referrer/hotlink rules when the app runs on localhost.

Missing cover images: When imageUrl is null, cards use a deterministic illustration from DiceBear (seeded by course/quiz UUID). If the API image fails to load, the app retries with that generated art, then falls back to initials.

Rich question & answer text (web)

questionText and multiple-choice option strings are rendered with Markdown (see src/utils/richMarkdown.js and RichContent.vue):

• Images: ![alt](https://...) or paths your API can serve (absolute URLs are rewritten in dev like course images).
• Math: KaTeX — inline $x^2$ and display $$\\sum_{i=1}^n i$$.
• Code: Fenced blocks with syntax highlighting; languages like bash, sh, kubectl, shell use a terminal-style frame (visual “lab” feel — not a real VM).
• Output is sanitized with DOMPurify.

This is a presentation layer on the same API strings the mobile app uses. True interactive sandboxes (e.g. KodeKloud-style clusters) require separate backend lab infrastructure.

Agent skills (Cursor)

Skills are installed under .agents/skills/. This project also includes .cursor/rules/quizfactor-ui.mdc so UI work in src/ stays aligned with those guidelines.

If an install times out (large GitHub clones), retry:

npx skills add https://github.com/shadcn/ui --skill shadcn -y
npx skills add https://github.com/supercent-io/skills-template --skill web-design-guidelines -y

API contract

• Base URL: VITE_API_BASE_URL (default https://quizfactor.app, matches Postman baseUrl).
• Typical JSON shape: { "status": "00", "data": ... }.
• Protected routes use Authorization: Bearer <token>.

Build

npm run build