Skip to content

Latest commit

 

History

History
118 lines (75 loc) · 4.78 KB

File metadata and controls

118 lines (75 loc) · 4.78 KB

Frontend Engineer Assignment (No Code, High-Quality UI Focus)

Evaluation Criteria

  • Frontend tech selection and reasoning (framework, state, data fetching)
  • UI architecture (routing, component design, reusable patterns)
  • API calling strategy (error handling, retries, abort, pagination)
  • Browser-level caching + offline-friendly patterns
  • Debugging + observability (logging, tracing, error boundaries)
  • Security basics on client (token handling, safe downloads, XSS considerations)
  • UX quality for async jobs (progress, partial results, resilience)

Problem 1: Video-to-Notes Platform (Frontend System Design)

Goal: Upload video → job runs async → user sees status + outputs: Summary.md, highlights (timestamps), assets. READ MORE ABOUT THE PROJECT

Your solution must include

  • Screens: Upload, Jobs list, Job detail (status/logs), Results (markdown + highlights)
  • UI states: loading, queued, processing, success, failed, retry, partial output
  • API calling plan: how you poll/stream job progress (polling vs SSE), abort on navigation
  • Caching: what to cache in browser (job list, job detail, results), TTL strategy, invalidation
  • Debugging plan: how you would debug “stuck processing” from frontend side (network logs, correlation id display)

Your Solution for problem 1:

You need to put your solution here.


Problem 2: LinkedIn Automation Platform (Frontend System Design)

Goal: Connect LinkedIn → persona setup → draft preview → approve → schedule → posting history. READ MORE ABOUT THE PROJECT

Your solution must include

  • Screens: Connect, Persona editor, Drafts (3 variants), Approval, Scheduler, Post history
  • Form UX: persona inputs validation, topic input rules, guardrails for scheduling
  • API calling: draft generation request lifecycle, optimistic UI vs strict confirmation
  • Caching: drafts caching, schedule list caching, refetch triggers after approval/post
  • Debugging: how you surface posting failures to user and capture details for support

Your Solution for problem 2:

You need to put your solution here.


Problem 3: DOCX Template → Bulk Generator (Frontend System Design)

Goal: Upload template → review fields → single generate → bulk via CSV → ZIP download + per-row report. READ MORE ABOUT THE PROJECT

Your solution must include

  • Screens: Template upload, Field review/editor, Single fill form, Bulk upload, Bulk run status, Report table, Downloads
  • Field UI: field types (text/number/date), required/default, inline validation
  • Bulk UX: CSV upload constraints, mapping UI (optional), progress + partial success
  • Browser caching: template metadata caching, field schema caching, bulk report pagination caching
  • Downloads: safe download UX (signed URL flow assumed), progress indicator

Your Solution for problem 3:

You need to put your solution here.


Problem 4: Character-Based Video Series Generator (Frontend System Design)

Goal: Define characters once → create episode from story → view episode package (script/scenes/assets/render plan). READ MORE ABOUT THE PROJECT

Your solution must include

  • Screens: Character library, Relationship editor, Episode creator, Episode detail (scenes), Asset gallery
  • Consistency UX: show “locked character profile” per episode, version badges
  • API calling: long-running generation job UI (progress, resume)
  • Caching: character library caching, episode package caching, asset thumbnails caching

Your Solution for problem 4:

You need to put your solution here.


Cross-Cutting

Answer these in bullet points (max 1 page total):

  1. Frontend stack choice
  • EDIT YOUR ANSWER HERE: Framework (Next.js/Vue/etc), state management, router, UI kit, why. <EDIT YOUR ANSWER HERE>
  1. API layer design
  • Fetch/Axios choice, typed client generation (OpenAPI), error normalization, retries, request dedupe, abort controllers. <EDIT YOUR ANSWER HERE>
  1. Browser caching plan
  • What you cache (GET responses, derived state), where (memory, IndexedDB, localStorage), TTL/invalidation rules.
  • How you handle “job status updates” without stale UI. <EDIT YOUR ANSWER HERE>
  1. Debugging & observability
  • Error boundaries, client-side logging approach, correlation id propagation, “report a problem” payload.
  • How you would debug: slow uploads, failed downloads, intermittent 500s. <EDIT YOUR ANSWER HERE>
  1. Security basics
  • Token storage approach, CSRF considerations (if cookies), XSS avoidance for markdown rendering, safe file download patterns. A<EDIT YOUR ANSWER HERE>