From 69dc356e8ad4ff2bb7bfa341b23764fa0ad2cbbf Mon Sep 17 00:00:00 2001
From: Sugandha53 <166835270+Sugandha53@users.noreply.github.com>
Date: Wed, 18 Feb 2026 23:17:03 +0530
Subject: [PATCH 1/6] Added complete Problem 1 solution

---
 Frontend.md | 178 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 177 insertions(+), 1 deletion(-)

diff --git a/Frontend.md b/Frontend.md
index 748188aa..ba77301d 100644
--- a/Frontend.md
+++ b/Frontend.md
@@ -26,7 +26,183 @@
 
 **Your Solution for problem 1:**
 
-You need to put your solution here.
+### Screens
+
+**1. Upload Screen**
+- Video file upload input (drag & drop + file picker)
+- File validation (type, size >200MB supported)
+- Upload progress bar with percentage and speed
+- Submit button (disabled during upload)
+- Error message area
+- Success redirect to Jobs List after upload
+
+**Purpose:** Allow user to upload large videos and start async processing safely.
+
+---
+
+**2. Jobs List Screen**
+- Paginated list of all submitted jobs
+- Status badge (Queued / Processing / Success / Failed)
+- Created time and video name
+- Click row to open Job Detail
+- Retry button for failed jobs
+- Manual refresh option
+
+**Purpose:** Provide centralized tracking of all video processing jobs.
+
+---
+
+**3. Job Detail Screen**
+- Prominent jobId / correlation ID
+- Current status with visual indicator
+- Step-wise processing logs/timeline
+- Progress indicator while running
+- Retry and Cancel (if supported)
+- Link to Results when ready
+
+**Purpose:** Deep visibility into async job lifecycle and debugging support.
+
+---
+
+**4. Results Screen**
+- Render Summary.md using safe markdown viewer
+- Highlights list with timestamps (click-to-seek)
+- Assets preview (clips and screenshots)
+- Download all assets button
+- Processed timestamp display
+
+**Purpose:** Enable quick 5–10 minute consumption of long video content.
+
+---
+
+### UI States
+
+The UI clearly communicates the async job lifecycle.
+
+**Loading**
+- Shown during video upload
+- Progress bar with percentage and speed
+- Submit disabled to prevent duplicate uploads
+
+**Queued**
+- Status badge: "Queued"
+- Inform user job is waiting for processing
+- Safe to navigate away
+
+**Processing**
+- Animated spinner/progress
+- Step-wise logs (e.g., extracting audio, generating summary)
+- Live status updates via polling
+- JobId visible for debugging
+
+**Success**
+- Green success badge
+- Link to Results screen enabled
+- Show processed timestamp
+
+**Failed**
+- Red error state with human-readable message
+- Retry button available
+- Preserve job metadata
+
+**Retry**
+- Show retry-in-progress state
+- Disable repeated clicks
+- Maintain previous logs for traceability
+
+**Partial Output**
+- Show available highlights/screenshots if ready
+- Mark remaining items as "processing…"
+- Improves perceived performance
+
+---
+
+### API Calling Plan
+
+**Upload Flow**
+- User uploads via `POST /videos/upload`
+- Backend returns `jobId` and initial status
+- Frontend redirects to Jobs List
+
+**Job Progress Tracking (Polling)**
+- Poll `GET /jobs/{jobId}` every 5–10 seconds
+- Continue while status is `queued` or `processing`
+- Stop automatically on `success` or `failed`
+- Use exponential backoff on repeated failures
+
+**Abort Handling**
+- Use AbortController to cancel polling on navigation/unmount
+- Prevent unnecessary network usage and memory leaks
+
+**Error Handling**
+- Normalize API errors
+- Show user-friendly messages
+- Auto-retry failed polling requests (max 3 retries)
+- Surface persistent failures in UI
+
+**Pagination**
+- Jobs list fetched via paginated API
+- Example: `GET /jobs?page=1&limit=10`
+- Prevents large payload rendering
+
+---
+
+### Caching Strategy
+
+**What to Cache**
+- Jobs list responses
+- Individual job detail
+- Final results metadata
+
+**Where to Cache**
+- In-memory cache via React Query for active session
+- localStorage for lightweight job metadata
+- IndexedDB optional for larger offline-friendly data
+
+**TTL Strategy**
+- Jobs list: ~30 seconds
+- Job detail: ~15 seconds during processing
+- Results: ~24 hours (mostly immutable)
+
+**Cache Invalidation**
+- Invalidate job detail on retry
+- Refresh jobs list after new upload
+- Invalidate when job transitions to success
+- Provide manual refresh option
+
+**Fresh Job Status Handling**
+- While polling, bypass stale cache
+- Always prefer latest server state for active jobs
+
+---
+
+### Debugging & Observability
+
+**Correlation ID Visibility**
+- Display jobId prominently in Job Detail
+- Enables backend traceability
+- Helps debug “stuck processing”
+
+**Network Monitoring**
+- Log API failures with status codes
+- Surface meaningful errors to user
+- Enable easy inspection via browser DevTools
+
+**Client-side Logging**
+- Capture upload failures, polling errors, unexpected states
+- Structured logs in development
+- Support remote logging integration in production
+
+**Error Boundaries**
+- Wrap major UI sections with React Error Boundaries
+- Show graceful fallback UI
+- Log crash details for investigation
+
+**User Support Hooks**
+- Provide optional “Report a Problem”
+- Include jobId, last status, and client logs
+- Helps support team debug intermittent failures
+
 
 ---
 

From 9514166da3ed6d5e1d058d267b6bc2064e2e6172 Mon Sep 17 00:00:00 2001
From: Sugandha53 <166835270+Sugandha53@users.noreply.github.com>
Date: Wed, 18 Feb 2026 23:24:50 +0530
Subject: [PATCH 2/6] Added Problem 2 solution

---
 Frontend.md | 189 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 188 insertions(+), 1 deletion(-)

diff --git a/Frontend.md b/Frontend.md
index ba77301d..71e43170 100644
--- a/Frontend.md
+++ b/Frontend.md
@@ -220,7 +220,194 @@ The UI clearly communicates the async job lifecycle.
 
 **Your Solution for problem 2:**
 
-You need to put your solution here.
+### Screens
+
+**1. Connect Screen**
+- “Connect LinkedIn” CTA button
+- OAuth authorization flow trigger
+- Connection status indicator (Connected / Not Connected)
+- Reconnect option if token expired
+- Security note about permissions
+
+**Purpose:** Securely connect user’s LinkedIn account before automation.
+
+---
+
+**2. Persona Editor Screen**
+- Form inputs:
+  - Background / Experience (textarea)
+  - Preferred tone (dropdown)
+  - Language style (dropdown)
+  - Do’s and Don’ts (textarea)
+- Save and Update buttons
+- Live preview snippet (optional)
+- Validation errors inline
+
+**Purpose:** One-time persona setup to maintain consistent voice.
+
+---
+
+**3. Drafts Screen (3 Variants)**
+- Topic input + optional context fields
+- “Generate Posts” button
+- Loading skeleton while generating
+- Display 3 draft cards side-by-side:
+  - Style label (Insight / Story / Checklist)
+  - Character count
+  - Copy button
+  - Select button
+- Regenerate option
+
+**Purpose:** Allow user to compare and choose best variant.
+
+---
+
+**4. Approval Screen**
+- Selected draft preview (editable optional)
+- Warning: “You are about to publish”
+- Two actions:
+  - Post Now
+  - Schedule Post
+- Back to drafts option
+
+**Purpose:** Explicit human approval before publishing.
+
+---
+
+**5. Scheduler Screen**
+- Date picker
+- Time picker
+- Timezone selector (auto-detected default)
+- Validation for past time
+- Schedule confirmation summary
+- Success toast after scheduling
+
+**Purpose:** Reliable future publishing with timezone safety.
+
+---
+
+**6. Post History Screen**
+- Paginated table of posts
+- Status badges:
+  - Draft
+  - Approved
+  - Scheduled
+  - Published
+  - Failed
+- Posted timestamp
+- Retry button for failed posts
+- Filter by status
+
+**Purpose:** Visibility and control over automation outcomes.
+
+---
+
+### Form UX
+
+**Persona Validation**
+- Required fields: background, tone, language style
+- Character limits with live counter
+- Prevent empty persona submission
+- Save button disabled until valid
+- Auto-save draft locally (optional)
+
+**Topic Input Rules**
+- Minimum character requirement
+- Optional audience/goal fields
+- Show helpful placeholder examples
+- Prevent generation if topic empty
+
+**Scheduling Guardrails**
+- Prevent selecting past date/time
+- Show timezone clearly
+- Confirmation modal before scheduling
+- Warn if LinkedIn not connected
+- Prevent duplicate scheduling clicks
+
+---
+
+### API Calling Strategy
+
+**Draft Generation Flow**
+- User clicks Generate → `POST /posts/generate`
+- Show loading skeleton
+- Receive 3 variants in response
+- Store in local state
+
+**Optimistic vs Strict Confirmation**
+- Use strict confirmation for publishing (safer)
+- No optimistic publish for LinkedIn actions
+- Show success only after server confirms
+
+**Approval & Publish**
+- Approve → `POST /posts/approve`
+- Immediate publish → `POST /posts/publish`
+- Scheduled publish → `POST /posts/schedule`
+
+**Error Handling**
+- Normalize API errors
+- Retry generation failures (max 2 retries)
+- Show user-friendly error messages
+- Disable buttons during in-flight requests
+
+**Abort Handling**
+- Cancel draft generation if user navigates away
+- Use AbortController for cleanup
+
+---
+
+### Caching Strategy
+
+**What to Cache**
+- Generated drafts (short-term)
+- Persona configuration
+- Post history list
+
+**Where**
+- React Query in-memory cache
+- localStorage for persona persistence
+- IndexedDB optional for offline draft safety
+
+**TTL**
+- Drafts: short (~10 minutes)
+- Persona: long (~7 days)
+- Post history: medium (~60 seconds)
+
+**Refetch Triggers**
+- After approval or publish
+- After scheduling
+- Manual refresh in history screen
+- Window focus refetch (optional)
+
+---
+
+### Debugging & Observability
+
+**User-visible Failure States**
+- Clear error banner for failed publishing
+- Show failure reason if available
+- Retry action for failed posts
+
+**Logging**
+- Capture generation failures
+- Capture publish/schedule errors
+- Include requestId/jobId in logs
+
+**Support-friendly Details**
+- Show postId in history
+- Include timestamp and status transitions
+- “Report issue” action with payload
+
+**Network Monitoring**
+- Track LinkedIn auth failures
+- Detect token expiration
+- Surface rate-limit responses gracefully
+
+**Error Boundaries**
+- Wrap drafts and scheduler flows
+- Prevent full page crash
+- Log unexpected UI failures
+
 
 ---
 

From e5dcb1fb16f397147ea8048f4404e7680493fe30 Mon Sep 17 00:00:00 2001
From: Sugandha53 <166835270+Sugandha53@users.noreply.github.com>
Date: Wed, 18 Feb 2026 23:29:03 +0530
Subject: [PATCH 3/6] Added Problem 3 solution

---
 Frontend.md | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 170 insertions(+), 1 deletion(-)

diff --git a/Frontend.md b/Frontend.md
index 71e43170..a698c468 100644
--- a/Frontend.md
+++ b/Frontend.md
@@ -425,7 +425,176 @@ The UI clearly communicates the async job lifecycle.
 
 **Your Solution for problem 3:**
 
-You need to put your solution here.
+### Screens
+
+**1. Template Upload Screen**
+- DOCX upload (drag & drop + file picker)
+- File validation (type, size limits)
+- Upload progress indicator
+- Template name input
+- Success redirect to Field Review
+
+**Purpose:** Allow user to upload and register reusable DOCX templates.
+
+---
+
+**2. Field Review / Editor Screen**
+- Auto-detected field list from template
+- Field type selector (text / number / date / currency)
+- Required toggle
+- Default value input
+- Inline validation errors
+- Add/remove field option
+- Save template button
+- Template preview (read-only)
+
+**Purpose:** Let user confirm and configure dynamic fields accurately.
+
+---
+
+**3. Single Fill Form Screen**
+- Dynamic form generated from field schema
+- Field-wise validation
+- Real-time error messages
+- Generate button (disabled until valid)
+- Output format selector (DOCX / PDF)
+- Generation loading state
+
+**Purpose:** Generate one document quickly with correct validation.
+
+---
+
+**4. Bulk Upload Screen**
+- Download sample CSV/Excel template
+- CSV/XLSX upload input
+- File validation (size, format)
+- Optional column mapping UI
+- Row count preview
+- Start Bulk Run button
+
+**Purpose:** Enable large-scale document generation.
+
+---
+
+**5. Bulk Run Status Screen**
+- Job progress bar (% complete)
+- Processed rows counter
+- Live status updates
+- Partial success indicator
+- Cancel (if supported)
+- Background processing notice
+
+**Purpose:** Provide visibility into long-running bulk jobs.
+
+---
+
+**6. Report Table Screen**
+- Paginated per-row results
+- Status badge (Success / Failed)
+- Error reason column
+- Search and filter
+- Export report option
+
+**Purpose:** Clear audit trail for bulk generation.
+
+---
+
+**7. Downloads Screen**
+- ZIP download button
+- Individual file downloads
+- File naming preview
+- Expiry notice for signed URLs
+- Download progress indicator
+
+**Purpose:** Safe and predictable access to generated outputs.
+
+---
+
+### Field UI
+
+**Supported Field Types**
+- Text
+- Number
+- Date
+- Currency
+- Optional blocks (future-ready)
+
+**Validation Rules**
+- Required field enforcement
+- Type-specific validation
+- Inline error messaging
+- Character limits where applicable
+- Default value support
+
+**UX Enhancements**
+- Auto-focus on first invalid field
+- Tooltip help for field meaning
+- Consistent formatting preview
+
+---
+
+### Bulk UX
+
+**CSV Upload Constraints**
+- Accept CSV/XLSX only
+- File size limit enforcement
+- Header validation against template fields
+- Show row count before processing
+
+**Mapping UI (Optional)**
+- Auto-map matching column names
+- Manual dropdown mapping fallback
+- Highlight unmapped required fields
+
+**Progress & Partial Success**
+- Show real-time progress bar
+- Display processed vs total rows
+- Allow partial success completion
+- Provide clear failure reasons per row
+
+---
+
+### Browser Caching Strategy
+
+**What to Cache**
+- Template metadata
+- Field schema definitions
+- Bulk report pages
+
+**Where**
+- React Query in-memory cache
+- localStorage for recent templates
+- IndexedDB optional for large reports
+
+**TTL**
+- Template metadata: long (~24 hours)
+- Field schema: long (~24 hours)
+- Bulk reports: medium (~2 minutes per page)
+
+**Invalidation**
+- After template update
+- After new bulk run
+- Manual refresh option
+
+---
+
+### Downloads (Safe UX)
+
+**Signed URL Flow**
+- Request download via secure endpoint
+- Receive time-limited signed URL
+- Prevent direct public file access
+
+**Download Experience**
+- Show download progress
+- Disable repeated clicks
+- Handle expired links gracefully
+- Retry option on failure
+
+**Security Considerations**
+- Validate file ownership
+- Prevent open redirect risks
+- Sanitize file names
 
 ---
 

From e932669d0ed7081a5e2a0cfbcbed1bb95b5acf4a Mon Sep 17 00:00:00 2001
From: Sugandha53 <166835270+Sugandha53@users.noreply.github.com>
Date: Wed, 18 Feb 2026 23:34:14 +0530
Subject: [PATCH 4/6] Added Problem 4 solution

---
 Frontend.md | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 165 insertions(+), 1 deletion(-)

diff --git a/Frontend.md b/Frontend.md
index a698c468..302cf485 100644
--- a/Frontend.md
+++ b/Frontend.md
@@ -611,7 +611,171 @@ The UI clearly communicates the async job lifecycle.
 
 **Your Solution for problem 4:**
 
-You need to put your solution here.
+### Screens
+
+**1. Character Library Screen**
+- Grid/list of saved characters
+- Character card with avatar, name, role
+- Add Character button
+- Edit/Delete actions
+- Search and filter
+- Version badge on each character
+
+**Purpose:** Central source of truth for reusable characters across episodes.
+
+---
+
+**2. Relationship Editor Screen**
+- Visual graph or table of relationships
+- Relationship type selector (friend, rival, mentor, etc.)
+- Add/Edit/Delete relationship
+- Conflict warning if inconsistent rules
+- Save changes CTA
+
+**Purpose:** Maintain behavioral consistency between characters.
+
+---
+
+**3. Episode Creator Screen**
+- Story prompt textarea
+- Character multi-select (from library)
+- Episode tone selector (comedy, drama, etc.)
+- Duration target (~5 minutes)
+- Language selector
+- Narration vs dialogue ratio slider
+- Generate Episode button
+- Validation before submission
+
+**Purpose:** Configure and trigger new episode generation.
+
+---
+
+**4. Episode Detail Screen**
+- Episode status badge
+- Generation progress timeline
+- Scene-by-scene script viewer
+- Regenerate scene option
+- Resume generation (if interrupted)
+- Version badge for episode
+- Download package button
+
+**Purpose:** Deep visibility into long-running generation and outputs.
+
+---
+
+**5. Asset Gallery Screen**
+- Scene-wise asset grouping
+- Character visuals preview
+- Background assets
+- Audio plan preview
+- Thumbnail lazy loading
+- Download individual assets
+
+**Purpose:** Easy inspection and reuse of generated assets.
+
+---
+
+### Consistency UX
+
+**Locked Character Profile**
+- Once used in an episode, show “Locked” badge
+- Prevent accidental personality changes
+- Allow versioned edits only
+- Show warning if user attempts breaking changes
+
+**Version Badges**
+- Version number on characters and episodes
+- Show “updated after episode creation” warning
+- Allow viewing previous versions
+- Maintain audit trail
+
+**Relationship Safety**
+- Validate incompatible relationships
+- Warn if selected cast violates rules
+- Maintain series bible integrity
+
+---
+
+### API Calling Strategy
+
+**Episode Generation Flow**
+- User submits → `POST /episodes/generate`
+- Backend returns `jobId`
+- Frontend redirects to Episode Detail
+
+**Progress Tracking (Polling)**
+- Poll `GET /episodes/{jobId}` every 5–10 seconds
+- Show step-wise progress
+- Stop polling on success/failed
+- Use exponential backoff on failures
+
+**Resume Support**
+- If user refreshes, resume using jobId
+- Persist active job in localStorage
+- Restore progress UI on return
+
+**Abort Handling**
+- Cancel polling on navigation
+- Use AbortController cleanup
+- Prevent duplicate generation requests
+
+**Error Handling**
+- Normalize API errors
+- Retry transient failures
+- Show actionable user messages
+
+---
+
+### Caching Strategy
+
+**Character Library Caching**
+- Cache character list in React Query
+- TTL ~5 minutes
+- Invalidate on character edit/add/delete
+- Prefetch on app load
+
+**Episode Package Caching**
+- Cache completed episode metadata
+- TTL long (~24 hours)
+- Bypass cache while job is processing
+- Manual refresh option
+
+**Asset Thumbnail Caching**
+- Browser HTTP cache + lazy loading
+- IndexedDB optional for heavy assets
+- Use low-res preview first
+- Prevent re-downloading unchanged assets
+
+**Stale Data Protection**
+- Always refetch active jobs
+- Use background refresh on focus
+- Show last-updated timestamp
+
+---
+
+### Long-Running Job UX
+
+**Progress Experience**
+- Multi-step progress indicator
+- Estimated time remaining (if available)
+- Background processing friendly
+- Allow safe navigation away
+
+**Resilience**
+- Auto-reconnect polling on network loss
+- Resume after page refresh
+- Preserve job state locally
+
+**Failure Handling**
+- Clear failure reason
+- Retry generation CTA
+- Preserve previous logs for debugging
+
+**Observability**
+- Show jobId prominently
+- Capture client-side errors
+- Provide “Report issue” with payload
+
 
 ---
 

From 1faad305908ec14c538aac52a9b427622b93df02 Mon Sep 17 00:00:00 2001
From: Sugandha53 <166835270+Sugandha53@users.noreply.github.com>
Date: Wed, 18 Feb 2026 23:43:00 +0530
Subject: [PATCH 5/6] Added Cross-Cutting architecture

---
 Frontend.md | 123 ++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 110 insertions(+), 13 deletions(-)

diff --git a/Frontend.md b/Frontend.md
index 302cf485..f58c1060 100644
--- a/Frontend.md
+++ b/Frontend.md
@@ -785,30 +785,127 @@ 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>`
+### Frontend stack choice
+
+- **Framework:** Next.js (React)
+- **State management:** React Query (server state) + lightweight local state via React hooks
+- **Routing:** Next.js App Router
+- **UI Kit:** Tailwind CSS + shadcn/ui components
+
+**Why:**
+- Next.js provides excellent performance and routing
+- React Query simplifies async state and caching
+- Tailwind enables rapid, consistent UI development
+- shadcn/ui provides accessible production-ready components
+- Scales well for async-heavy dashboards
+
+---
 
 2. **API layer design**
 
-* Fetch/Axios choice, typed client generation (OpenAPI), error normalization, retries, request dedupe, abort controllers.
-  `
-  <EDIT YOUR ANSWER HERE>`
+### API layer design
+
+- **HTTP client:** Axios (with interceptors)
+- **Typed client:** Generated via OpenAPI when available
+- **Error normalization:** Central error handler maps API errors to user-friendly messages
+- **Retries:** Automatic retry for idempotent GET requests (max 2 retries)
+- **Request dedupe:** React Query deduplication for identical requests
+- **Abort controllers:** Used for upload cancel, polling cleanup, and navigation safety
+
+**Design principles:**
+- No silent failures
+- Consistent error surface
+- Safe cancellation of long requests
+
+---
 
 3. **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.
+### Browser caching plan
+
+**What to cache**
+- GET API responses (jobs, drafts, templates, characters)
+- Derived UI state where helpful
+- Static metadata
+
+**Where**
+- In-memory via React Query (primary)
+- localStorage for lightweight persistence
+- IndexedDB optional for heavy offline data
+
+**TTL / invalidation**
+- Active jobs: short TTL (~15–30s)
+- Metadata: medium (~5–60 min)
+- Completed results: long (~24h)
+- Manual refresh always available
+
+**Avoiding stale job status**
+- Active jobs always polled from server
+- Cache bypass during processing
+- Background refetch on window focus
+- Show last-updated timestamp
+
+---
   `
   <EDIT YOUR ANSWER HERE>`
 
 4. **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>`
+### Debugging & observability
+
+**Error boundaries**
+- Wrap major routes and async components
+- Graceful fallback UI
+- Capture runtime crashes
+
+**Client-side logging**
+- Structured logs in development
+- Capture API failures and unexpected states
+- Ready for remote logging integration (e.g., Sentry)
+
+**Correlation ID propagation**
+- Display jobId/requestId in UI
+- Include in logs and support payloads
+- Helps trace backend issues
+
+**Report a problem**
+- One-click user report
+- Includes:
+  - jobId
+  - last status
+  - client environment
+  - recent errors
+
+**Debugging playbook**
+- Slow uploads → check network + chunk progress
+- Failed downloads → verify signed URL + expiry
+- Intermittent 500s → inspect retries + correlation ID
+
+---
+
 
 5. **Security basics**
 
-* Token storage approach, CSRF considerations (if cookies), XSS avoidance for markdown rendering, safe file download patterns.
-  ` A<EDIT YOUR ANSWER HERE>`
+### Security basics
+
+**Token storage**
+- Prefer HttpOnly secure cookies when possible
+- If using JWT in browser → store in memory (not localStorage)
+- Auto-refresh tokens safely
+
+**CSRF**
+- Use SameSite cookies
+- CSRF token validation for sensitive actions
+- Avoid unsafe cross-origin requests
+
+**XSS protection**
+- Sanitize markdown rendering
+- Avoid dangerouslySetInnerHTML
+- Use trusted markdown renderer
+- Escape user-generated content
+
+**Safe file downloads**
+- Use signed URLs with expiry
+- Validate file ownership server-side
+- Prevent open redirect issues
+- Disable inline execution of downloaded files

From 423c4285e502b1d57caa6f5d9ae4650945332dcf Mon Sep 17 00:00:00 2001
From: Sugandha53 <166835270+Sugandha53@users.noreply.github.com>
Date: Wed, 18 Feb 2026 23:52:06 +0530
Subject: [PATCH 6/6] Complete Frontend Engineer Assignment solutions

---
 Frontend.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/Frontend.md b/Frontend.md
index f58c1060..23e73b5a 100644
--- a/Frontend.md
+++ b/Frontend.md
@@ -785,7 +785,7 @@ Answer these in **bullet points** (max 1 page total):
 
 1. **Frontend stack choice**
 
-### Frontend stack choice
+
 
 - **Framework:** Next.js (React)
 - **State management:** React Query (server state) + lightweight local state via React hooks
@@ -803,7 +803,7 @@ Answer these in **bullet points** (max 1 page total):
 
 2. **API layer design**
 
-### API layer design
+
 
 - **HTTP client:** Axios (with interceptors)
 - **Typed client:** Generated via OpenAPI when available
@@ -821,7 +821,7 @@ Answer these in **bullet points** (max 1 page total):
 
 3. **Browser caching plan**
 
-### Browser caching plan
+
 
 **What to cache**
 - GET API responses (jobs, drafts, templates, characters)
@@ -846,12 +846,12 @@ Answer these in **bullet points** (max 1 page total):
 - Show last-updated timestamp
 
 ---
-  `
-  <EDIT YOUR ANSWER HERE>`
+  
+ 
 
 4. **Debugging & observability**
 
-### Debugging & observability
+
 
 **Error boundaries**
 - Wrap major routes and async components
@@ -886,7 +886,7 @@ Answer these in **bullet points** (max 1 page total):
 
 5. **Security basics**
 
-### Security basics
+
 
 **Token storage**
 - Prefer HttpOnly secure cookies when possible