# Frontend & UI Tasks - Angular v20 Interview Quiz Application

**Tech Stack:** Angular v20, Standalone Components, Signals, RxJS  
**Generated:** November 12, 2025  
**API Base URL:** http://localhost:3000/api

---

## Table of Contents

1. [Core Infrastructure](#core-infrastructure)
2. [Authentication Module](#authentication-module)
3. [Guest Module](#guest-module)
4. [Categories Module](#categories-module)
5. [Quiz Module](#quiz-module)
6. [User Dashboard Module](#user-dashboard-module)
7. [Bookmarks Module](#bookmarks-module)
8. [Admin Module](#admin-module)
9. [Shared Features](#shared-features)
10. [Progressive Web App (PWA)](#progressive-web-app-pwa)

---

## Core Infrastructure

### Setup & Configuration

**Frontend Tasks:**
- [x] use frontend folder
- [x] Configure environment files (dev, prod) with API URLs
- [x] Set up HTTP interceptor for JWT authentication (Bearer token)
- [x] Set up HTTP interceptor for guest token (x-guest-token header)
- [x] Create error interceptor for global error handling
- [x] Configure rate limiting handling (429 responses)
- [ ] Set up routing with lazy loading
- [x] Create TypeScript interfaces/types for all API models (User, Category, Question, QuizSession, GuestSession)
- [x] Set up Angular Material or Bootstrap CSS framework
- [ ] Configure CORS for API communication
- [x] Create signal-based state management utility

**UI Tasks:**
- [x] Create main app shell with header, sidebar, content area
- [x] Design responsive navigation (desktop: sidebar, mobile: hamburger menu)
- [x] Build header component with logo, user menu, theme toggle
- [x] Create footer component with copyright and links
- [x] Implement loading spinner component (global)
- [x] Build toast/notification service for success/error messages
- [x] Design color scheme and CSS variables for theming
- [x] Implement dark mode toggle with preference persistence
- [x] Create 404 Not Found page component
- [x] Create error boundary component for unhandled errors
- [x] Ensure WCAG 2.1 AA accessibility standards
- [x] Set up responsive breakpoints (mobile: 320px+, tablet: 768px+, desktop: 1024px+)

---

## Authentication Module

### Endpoint: POST /api/auth/register
**Purpose:** Register new user account

**Frontend Tasks:**
- [x] Create `AuthService` with `register(username, email, password, guestSessionId?)` method
- [x] Store JWT token in localStorage/sessionStorage using signal
- [x] Create `authState` signal with user data and isAuthenticated flag
- [x] Implement form validation (email format, password strength, username length)
- [x] Handle 409 Conflict error for duplicate email/username
- [x] Handle guest-to-user conversion with optional guestSessionId
- [x] Display migrated stats if converting from guest
- [x] Auto-login after successful registration

**UI Tasks:**
- [x] Build `RegisterComponent` (standalone) with reactive form
- [x] Design registration form with username, email, password, confirm password fields
- [x] Show real-time password strength indicator
- [x] Display validation errors inline (email format, password requirements)
- [x] Show loading spinner on submit button
- [x] Display success message and redirect to dashboard
- [x] Show error toast for duplicate email or other errors
- [x] Add "Already have an account? Login" link
- [x] Implement responsive design (stack vertically on mobile)
- [x] Add ARIA labels and keyboard navigation support
- [x] Show "Migrating guest data..." message if converting from guest

---

### Endpoint: POST /api/auth/login
**Purpose:** User login

**Frontend Tasks:**
- [x] Add `AuthService.login(email, password)` method
- [x] Store JWT token and user data in signals
- [x] Update `authState` signal on successful login
- [x] Implement "Remember Me" functionality (localStorage vs sessionStorage)
- [x] Handle 401 Unauthorized error
- [x] Redirect to dashboard after login
- [x] Clear guest session token on successful login

**UI Tasks:**
- [x] Build `LoginComponent` (standalone) with reactive form
- [x] Design login form with email and password fields
- [x] Add "Remember Me" checkbox
- [x] Show loading spinner during authentication
- [x] Display error message for invalid credentials
- [x] Add "Forgot Password?" link (placeholder)
- [x] Add "Don't have an account? Register" link
- [x] Add "Continue as Guest" button/link
- [x] Implement responsive design
- [x] Add ARIA labels and focus management

---

### Endpoint: POST /api/auth/logout
**Purpose:** User logout

**Frontend Tasks:**
- [x] Add `AuthService.logout()` method
- [x] Clear JWT token from storage
- [x] Reset `authState` signal to null
- [x] Clear any cached user data
- [x] Redirect to login page

**UI Tasks:**
- [x] Add logout button in user menu (header)
- [x] Show confirmation dialog before logout
- [x] Display success toast after logout
- [x] Ensure proper cleanup of all user-specific state

---

### Endpoint: GET /api/auth/verify
**Purpose:** Verify JWT token validity

**Frontend Tasks:**
- [x] Add `AuthService.verifyToken()` method
- [x] Implement token verification on app initialization
- [x] Create auth guard to protect authenticated routes
- [x] Handle expired token (redirect to login)
- [ ] Auto-refresh token if near expiration (optional)

**UI Tasks:**
- [x] Show loading screen during token verification on app load
- [x] Display error message if token is invalid
- [x] Redirect to login with "Session expired" message

---

## Guest Module

### Endpoint: POST /api/guest/start-session
**Purpose:** Start guest session without registration

**Frontend Tasks:**
- [x] Create `GuestService` with `startSession()` method
- [x] Generate device ID client-side (UUID or fingerprint)
- [x] Store guest session token in localStorage
- [x] Create `guestState` signal with session data
- [x] Set up HTTP interceptor to add x-guest-token header
- [x] Handle session expiry (24 hours)

**UI Tasks:**
- [x] Build `GuestWelcomeComponent` explaining guest limitations
- [x] Add "Try as Guest" button on landing page
- [x] Show guest mode banner at top of app (with "Sign Up for Full Access")
- [x] Display loading spinner during session creation
- [x] Show error toast if session creation fails
- [x] Design guest mode indicator in header

---

### Endpoint: GET /api/guest/session/{guestId}
**Purpose:** Get guest session details

**Frontend Tasks:**
- [x] Add `GuestService.getSession(guestId)` method
- [x] Update `guestState` signal with session data
- [x] Handle 404 if session not found or expired

**UI Tasks:**
- [x] Display session info in guest banner (quizzes taken, time remaining)
- [x] Show countdown timer for session expiry
- [x] Display error message if session expired

---

### Endpoint: GET /api/guest/quiz-limit
**Purpose:** Check remaining quiz attempts for guest

**Frontend Tasks:**
- [x] Add `GuestService.getQuizLimit()` method
- [x] Store remaining quizzes count in signal
- [x] Check limit before allowing quiz start
- [x] Show upgrade prompt when limit reached

**UI Tasks:**
- [x] Display remaining quiz count in guest banner ("2 of 3 quizzes remaining")
- [x] Show progress bar for quiz limit
- [x] Build `GuestLimitReachedComponent` modal with upgrade prompt
- [x] Add "Sign Up Now" CTA button when limit reached
- [x] Show benefits of registration (unlimited quizzes, progress tracking)

---

### Endpoint: POST /api/guest/convert
**Purpose:** Convert guest session to registered user

**Frontend Tasks:**
- [x] Add `GuestService.convertToUser(guestSessionId, userData)` method
- [x] Migrate guest data during registration
- [x] Clear guest session token after conversion
- [x] Store new JWT token
- [x] Update authentication state

**UI Tasks:**
- [x] Show "Save Your Progress!" prompt in guest mode
- [x] Display guest stats before conversion (quizzes taken, score)
- [ ] Build conversion confirmation modal
- [x] Show success message after conversion with migrated stats
- [ ] Celebrate conversion with animation/confetti

---

## Categories Module

### Endpoint: GET /api/categories
**Purpose:** Fetch all active categories

**Frontend Tasks:**
- [ ] Create `CategoryService` with `getCategories()` method
- [ ] Store categories in `categoriesState` signal
- [ ] Implement caching strategy for categories (1 hour TTL)
- [ ] Handle guest vs authenticated user filtering (guestAccessible flag)
- [ ] Sort categories by displayOrder or name

**UI Tasks:**
- [ ] Build `CategoryListComponent` to display all categories
- [ ] Design category card with icon, name, description, question count
- [ ] Show "Locked" badge for auth-only categories (guest users)
- [ ] Implement grid layout (responsive: 1 col mobile, 2 cols tablet, 3-4 cols desktop)
- [ ] Add search/filter bar for categories
- [ ] Show loading skeleton while fetching
- [ ] Display empty state if no categories available
- [ ] Add hover effects and click animation
- [ ] Ensure keyboard navigation and ARIA labels

---

### Endpoint: GET /api/categories/{id}
**Purpose:** Get category details with question preview

**Frontend Tasks:**
- [ ] Add `CategoryService.getCategoryById(id)` method
- [ ] Store selected category in `selectedCategoryState` signal
- [ ] Fetch category stats (total questions, difficulty breakdown, accuracy)
- [ ] Handle 404 if category not found
- [ ] Handle 403 for guest users accessing auth-only categories

**UI Tasks:**
- [ ] Build `CategoryDetailComponent` showing full category info
- [ ] Display category header with icon, name, description
- [ ] Show statistics (total questions, difficulty breakdown chart)
- [ ] Display question preview (first 5 questions)
- [ ] Add "Start Quiz" button with difficulty selector
- [ ] Show loading spinner while fetching details
- [ ] Display error message if category not accessible
- [ ] Implement breadcrumb navigation (Home > Categories > Category Name)

---

### Endpoint: POST /api/categories (Admin Only)
**Purpose:** Create new category

**Frontend Tasks:**
- [ ] Add `CategoryService.createCategory(data)` method (admin only)
- [ ] Validate form data (name, slug, description)
- [ ] Handle 401/403 authorization errors
- [ ] Invalidate category cache after creation

**UI Tasks:**
- [ ] Build `CategoryFormComponent` (admin) for creating categories
- [ ] Design form with name, slug, description, icon, color fields
- [ ] Add guest accessible checkbox
- [ ] Show slug preview/auto-generation
- [ ] Display validation errors inline
- [ ] Show success toast after creation
- [ ] Redirect to category list after success

---

### Endpoint: PUT /api/categories/{id} (Admin Only)
**Purpose:** Update category

**Frontend Tasks:**
- [ ] Add `CategoryService.updateCategory(id, data)` method (admin only)
- [ ] Pre-fill form with existing category data
- [ ] Handle 404 if category not found
- [ ] Invalidate cache after update

**UI Tasks:**
- [ ] Reuse `CategoryFormComponent` in edit mode
- [ ] Pre-populate form fields with existing data
- [ ] Show "Editing: Category Name" header
- [ ] Add "Cancel" and "Save Changes" buttons
- [ ] Display success toast after update

---

### Endpoint: DELETE /api/categories/{id} (Admin Only)
**Purpose:** Delete category

**Frontend Tasks:**
- [ ] Add `CategoryService.deleteCategory(id)` method (admin only)
- [ ] Handle soft delete
- [ ] Invalidate cache after deletion
- [ ] Handle 404 if category not found

**UI Tasks:**
- [ ] Add delete button in admin category list
- [ ] Show confirmation dialog before deletion
- [ ] Display warning if category has questions
- [ ] Show success toast after deletion
- [ ] Remove category from list immediately

---

## Quiz Module

### Endpoint: POST /api/quiz/start
**Purpose:** Start a new quiz session

**Frontend Tasks:**
- [ ] Create `QuizService` with `startQuiz(categoryId, questionCount, difficulty, quizType)` method
- [ ] Store active session in `quizSessionState` signal
- [ ] Validate category accessibility (guest vs authenticated)
- [ ] Check guest quiz limit before starting
- [ ] Handle JWT token or guest token header
- [ ] Navigate to quiz page after starting

**UI Tasks:**
- [ ] Build `QuizSetupComponent` for configuring quiz
- [ ] Add category selector dropdown
- [ ] Add question count slider (5, 10, 15, 20)
- [ ] Add difficulty selector (Easy, Medium, Hard, Mixed)
- [ ] Add quiz type selector (Practice, Timed)
- [ ] Show estimated time for quiz
- [ ] Display "Start Quiz" button with loading state
- [ ] Show guest limit warning if applicable
- [ ] Implement responsive design

---

### Endpoint: POST /api/quiz/submit
**Purpose:** Submit answer for current question

**Frontend Tasks:**
- [ ] Add `QuizService.submitAnswer(questionId, answer, sessionId)` method
- [ ] Update quiz session state with answer result
- [ ] Increment current question index
- [ ] Calculate and update score in real-time
- [ ] Handle validation errors
- [ ] Store answer history for review

**UI Tasks:**
- [ ] Build `QuizQuestionComponent` displaying current question
- [ ] Show question text, type, and options
- [ ] Create answer input based on question type:
  - Multiple choice: Radio buttons
  - True/False: Toggle buttons
  - Written: Text area
- [ ] Show "Submit Answer" button (disabled until answer selected)
- [ ] Display loading spinner during submission
- [ ] Show immediate feedback (correct/incorrect) with animation
- [ ] Display explanation after submission
- [ ] Show "Next Question" button after submission
- [ ] Update progress bar and score
- [ ] Add timer display if timed quiz
- [ ] Prevent answer changes after submission

---

### Endpoint: POST /api/quiz/complete
**Purpose:** Complete quiz session and get results

**Frontend Tasks:**
- [ ] Add `QuizService.completeQuiz(sessionId)` method
- [ ] Store final results in `quizResultsState` signal
- [ ] Calculate percentage score
- [ ] Fetch detailed answer breakdown
- [ ] Clear active session state
- [ ] Redirect to results page

**UI Tasks:**
- [ ] Build `QuizResultsComponent` showing final score
- [ ] Display score with percentage and message (Excellent, Good, Keep Practicing)
- [ ] Show time taken and questions answered
- [ ] Display pie chart for correct/incorrect breakdown
- [ ] List all questions with user answers and correct answers
- [ ] Highlight incorrect answers in red
- [ ] Add "Review Incorrect Answers" button
- [ ] Add "Retake Quiz" button
- [ ] Add "Return to Dashboard" button
- [ ] Show confetti animation for high scores (>80%)
- [ ] Add social share buttons (Twitter, LinkedIn, Facebook)

---

### Endpoint: GET /api/quiz/session/{sessionId}
**Purpose:** Get current quiz session details

**Frontend Tasks:**
- [ ] Add `QuizService.getSession(sessionId)` method
- [ ] Restore session state if user refreshes page
- [ ] Handle 404 if session not found
- [ ] Resume quiz from current question index

**UI Tasks:**
- [ ] Show "Resume Quiz" prompt if incomplete session exists
- [ ] Display current progress in prompt (e.g., "Question 5 of 10")
- [ ] Allow user to continue or start new quiz

---

### Endpoint: GET /api/quiz/review/{sessionId}
**Purpose:** Review completed quiz

**Frontend Tasks:**
- [ ] Add `QuizService.reviewQuiz(sessionId)` method
- [ ] Fetch all questions and answers for session
- [ ] Store review data in signal
- [ ] Handle 404 if session not found

**UI Tasks:**
- [ ] Build `QuizReviewComponent` for reviewing completed quiz
- [ ] Display each question with user answer and correct answer
- [ ] Highlight correct answers in green, incorrect in red
- [ ] Show explanations for all questions
- [ ] Add "Bookmark" button for difficult questions
- [ ] Implement pagination or infinite scroll for long quizzes
- [ ] Add "Back to Results" button

---

## User Dashboard Module

### Endpoint: GET /api/users/{userId}/dashboard
**Purpose:** Get user dashboard with statistics

**Frontend Tasks:**
- [ ] Create `UserService` with `getDashboard(userId)` method
- [ ] Store dashboard data in `dashboardState` signal
- [ ] Fetch on dashboard component load
- [ ] Implement caching (5 min TTL)
- [ ] Handle 401 if not authenticated

**UI Tasks:**
- [ ] Build `DashboardComponent` as main user landing page
- [ ] Display welcome message with username
- [ ] Show overall statistics cards:
  - Total quizzes taken
  - Overall accuracy percentage
  - Current streak
  - Total questions answered
- [ ] Create category-wise performance chart (bar chart or pie chart)
- [ ] Display recent quiz sessions (last 5) with scores
- [ ] Show achievements and badges earned
- [ ] Add "Start New Quiz" CTA button
- [ ] Implement responsive grid layout (stack on mobile)
- [ ] Add loading skeletons for data sections
- [ ] Show empty state if no quizzes taken yet

---

### Endpoint: GET /api/users/{userId}/history
**Purpose:** Get quiz history with pagination

**Frontend Tasks:**
- [ ] Add `UserService.getHistory(userId, page, limit, category?, sortBy?)` method
- [ ] Store history in `historyState` signal
- [ ] Implement pagination state management
- [ ] Add filtering by category
- [ ] Add sorting by date or score
- [ ] Handle query parameters in URL

**UI Tasks:**
- [ ] Build `QuizHistoryComponent` displaying all past quizzes
- [ ] Create history table/list with columns: Date, Category, Score, Time, Actions
- [ ] Add filter dropdown for category
- [ ] Add sort dropdown (Date, Score)
- [ ] Implement pagination controls (Previous, Next, Page numbers)
- [ ] Show "View Details" button for each quiz
- [ ] Display loading spinner during fetch
- [ ] Show empty state if no history
- [ ] Make table responsive (collapse to cards on mobile)
- [ ] Add export functionality (CSV download)

---

### Endpoint: PUT /api/users/{userId}
**Purpose:** Update user profile

**Frontend Tasks:**
- [ ] Add `UserService.updateProfile(userId, data)` method
- [ ] Update `authState` signal with new user data
- [ ] Validate form data (email, username)
- [ ] Handle 409 Conflict for duplicate email/username
- [ ] Handle password change separately (if supported)

**UI Tasks:**
- [ ] Build `ProfileSettingsComponent` for editing profile
- [ ] Create form with username, email fields
- [ ] Add password change section (current, new, confirm)
- [ ] Show validation errors inline
- [ ] Add "Save Changes" and "Cancel" buttons
- [ ] Display success toast after update
- [ ] Show loading spinner on submit
- [ ] Pre-fill form with current user data

---

## Bookmarks Module

### Endpoint: GET /api/users/{userId}/bookmarks
**Purpose:** Get user's bookmarked questions

**Frontend Tasks:**
- [ ] Create `BookmarkService` with `getBookmarks(userId)` method
- [ ] Store bookmarks in `bookmarksState` signal
- [ ] Implement caching (5 min TTL)
- [ ] Handle 401 if not authenticated

**UI Tasks:**
- [ ] Build `BookmarksComponent` displaying all bookmarked questions
- [ ] Show question cards with text, category, difficulty
- [ ] Add "Remove Bookmark" button for each question
- [ ] Add "Practice Bookmarked Questions" button to start quiz
- [ ] Show empty state if no bookmarks
- [ ] Implement grid layout (responsive)
- [ ] Add search/filter for bookmarks

---

### Endpoint: POST /api/users/{userId}/bookmarks
**Purpose:** Add question to bookmarks

**Frontend Tasks:**
- [ ] Add `BookmarkService.addBookmark(userId, questionId)` method
- [ ] Update `bookmarksState` signal optimistically
- [ ] Handle 409 if already bookmarked
- [ ] Show success/error toast

**UI Tasks:**
- [ ] Add bookmark icon button on question cards
- [ ] Show filled/unfilled icon based on bookmark status
- [ ] Animate icon on toggle
- [ ] Display success toast "Question bookmarked"
- [ ] Ensure button is accessible with ARIA label

---

### Endpoint: DELETE /api/users/{userId}/bookmarks/{questionId}
**Purpose:** Remove bookmark

**Frontend Tasks:**
- [ ] Add `BookmarkService.removeBookmark(userId, questionId)` method
- [ ] Update `bookmarksState` signal optimistically
- [ ] Handle 404 if bookmark not found

**UI Tasks:**
- [ ] Toggle bookmark icon to unfilled state
- [ ] Remove question from bookmarks list
- [ ] Display success toast "Bookmark removed"
- [ ] Add undo option in toast (optional)

---

## Admin Module

### Endpoint: GET /api/admin/statistics
**Purpose:** Get system-wide statistics

**Frontend Tasks:**
- [ ] Create `AdminService` with `getStatistics()` method
- [ ] Store stats in `adminStatsState` signal
- [ ] Implement caching (5 min TTL)
- [ ] Handle 401/403 authorization errors
- [ ] Create admin auth guard for routes

**UI Tasks:**
- [ ] Build `AdminDashboardComponent` as admin landing page
- [ ] Display statistics cards:
  - Total users
  - Active users (last 7 days)
  - Total quiz sessions
  - Total questions
- [ ] Show user growth chart (line chart)
- [ ] Display most popular categories (bar chart)
- [ ] Show average quiz scores
- [ ] Add date range picker for filtering stats
- [ ] Implement responsive layout
- [ ] Show loading skeletons for charts

---

### Endpoint: GET /api/admin/guest-analytics
**Purpose:** Get guest user analytics

**Frontend Tasks:**
- [ ] Add `AdminService.getGuestAnalytics()` method
- [ ] Store analytics in `guestAnalyticsState` signal
- [ ] Implement caching (10 min TTL)

**UI Tasks:**
- [ ] Build `GuestAnalyticsComponent` (admin)
- [ ] Display guest statistics:
  - Total guest sessions
  - Active guest sessions
  - Guest-to-user conversion rate
  - Average quizzes per guest
- [ ] Show conversion funnel chart
- [ ] Display guest session timeline chart
- [ ] Add export functionality

---

### Endpoint: GET /api/admin/guest-settings
**Purpose:** Get guest access settings

**Frontend Tasks:**
- [ ] Add `AdminService.getGuestSettings()` method
- [ ] Store settings in `guestSettingsState` signal

**UI Tasks:**
- [ ] Build `GuestSettingsComponent` (admin) for viewing settings
- [ ] Display current settings in read-only cards
- [ ] Add "Edit Settings" button

---

### Endpoint: PUT /api/admin/guest-settings
**Purpose:** Update guest access settings

**Frontend Tasks:**
- [ ] Add `AdminService.updateGuestSettings(data)` method
- [ ] Update `guestSettingsState` signal
- [ ] Validate form data
- [ ] Handle success/error responses

**UI Tasks:**
- [ ] Build settings form with fields:
  - Guest access enabled toggle
  - Max quizzes per day (number input)
  - Max questions per quiz (number input)
  - Session expiry hours (number input)
  - Upgrade prompt message (textarea)
- [ ] Add "Save Changes" and "Cancel" buttons
- [ ] Show validation errors inline
- [ ] Display success toast after update
- [ ] Show preview of settings changes

---

### Endpoint: GET /api/admin/users
**Purpose:** Get all users with pagination

**Frontend Tasks:**
- [ ] Add `AdminService.getUsers(page, limit, role?, isActive?, sortBy?)` method
- [ ] Store users in `adminUsersState` signal
- [ ] Implement pagination, filtering, and sorting
- [ ] Handle query parameters in URL

**UI Tasks:**
- [ ] Build `AdminUsersComponent` displaying user list
- [ ] Create user table with columns: Username, Email, Role, Status, Joined Date, Actions
- [ ] Add filter dropdowns (Role: All/User/Admin, Status: All/Active/Inactive)
- [ ] Add sort dropdown (Username, Email, Date)
- [ ] Add search input for username/email
- [ ] Implement pagination controls
- [ ] Add action buttons (Edit Role, View Details, Deactivate/Activate)
- [ ] Show loading spinner during fetch
- [ ] Make table responsive (stack on mobile)

---

### Endpoint: GET /api/admin/users/{userId}
**Purpose:** Get user details

**Frontend Tasks:**
- [ ] Add `AdminService.getUserDetails(userId)` method
- [ ] Store user details in signal
- [ ] Handle 404 if user not found

**UI Tasks:**
- [ ] Build `AdminUserDetailComponent` showing full user profile
- [ ] Display user info, statistics, quiz history
- [ ] Add "Edit Role" and "Deactivate" buttons
- [ ] Show user activity timeline
- [ ] Add breadcrumb navigation

---

### Endpoint: PUT /api/admin/users/{userId}/role
**Purpose:** Update user role

**Frontend Tasks:**
- [ ] Add `AdminService.updateUserRole(userId, role)` method
- [ ] Update user in `adminUsersState` signal
- [ ] Handle validation errors

**UI Tasks:**
- [ ] Build role update modal/dialog
- [ ] Add role selector (User, Admin)
- [ ] Show confirmation dialog
- [ ] Display success toast after update
- [ ] Show warning if demoting admin

---

### Endpoint: PUT /api/admin/users/{userId}/activate
**Purpose:** Reactivate user

**Frontend Tasks:**
- [ ] Add `AdminService.activateUser(userId)` method
- [ ] Update user status in signal

**UI Tasks:**
- [ ] Add "Activate" button for inactive users
- [ ] Show confirmation dialog
- [ ] Display success toast after activation

---

### Endpoint: DELETE /api/admin/users/{userId}
**Purpose:** Deactivate user

**Frontend Tasks:**
- [ ] Add `AdminService.deactivateUser(userId)` method
- [ ] Update user status in signal
- [ ] Handle soft delete

**UI Tasks:**
- [ ] Add "Deactivate" button for active users
- [ ] Show confirmation dialog with warning message
- [ ] Display success toast after deactivation
- [ ] Show "Reactivate" button for deactivated users

---

### Endpoint: POST /api/admin/questions
**Purpose:** Create new question

**Frontend Tasks:**
- [ ] Add `AdminService.createQuestion(data)` method
- [ ] Validate question data (type, options, correct answer)
- [ ] Handle 401/403 authorization errors

**UI Tasks:**
- [ ] Build `AdminQuestionFormComponent` for creating questions
- [ ] Create form with fields:
  - Question text (textarea)
  - Question type selector (Multiple Choice, True/False, Written)
  - Category selector
  - Difficulty selector
  - Options array (dynamic for MCQ)
  - Correct answer
  - Explanation (textarea)
  - Points (number)
  - Tags (chip input)
  - Guest accessible checkbox
- [ ] Show/hide options based on question type
- [ ] Add dynamic option inputs for MCQ (Add/Remove buttons)
- [ ] Validate correct answer matches options
- [ ] Show question preview panel
- [ ] Display validation errors inline
- [ ] Add "Save Question" and "Cancel" buttons
- [ ] Show success toast after creation

---

### Endpoint: PUT /api/admin/questions/{id}
**Purpose:** Update question

**Frontend Tasks:**
- [ ] Add `AdminService.updateQuestion(id, data)` method
- [ ] Pre-fill form with existing question data
- [ ] Handle 404 if question not found

**UI Tasks:**
- [ ] Reuse `AdminQuestionFormComponent` in edit mode
- [ ] Pre-populate all form fields
- [ ] Show "Editing: Question ID" header
- [ ] Add version history section (optional)
- [ ] Display success toast after update

---

### Endpoint: DELETE /api/admin/questions/{id}
**Purpose:** Delete question

**Frontend Tasks:**
- [ ] Add `AdminService.deleteQuestion(id)` method
- [ ] Handle soft delete
- [ ] Update question list after deletion

**UI Tasks:**
- [ ] Add delete button in admin question list
- [ ] Show confirmation dialog with warning
- [ ] Display success toast after deletion
- [ ] Add "Restore" option for soft-deleted questions

---

## Shared Features

### Search Functionality

**Frontend Tasks:**
- [ ] Create `SearchService` for global search
- [ ] Implement debounced search input
- [ ] Search across questions, categories, quizzes
- [ ] Store search results in signal
- [ ] Handle empty search results

**UI Tasks:**
- [ ] Build `SearchComponent` in header/navbar
- [ ] Create search input with icon
- [ ] Display search results dropdown
- [ ] Highlight matching text in results
- [ ] Add "See All Results" link
- [ ] Implement keyboard navigation (arrow keys, enter)
- [ ] Show loading indicator during search
- [ ] Display empty state for no results

---

### Theme Toggle (Dark Mode)

**Frontend Tasks:**
- [ ] Create `ThemeService` for theme management
- [ ] Store theme preference in localStorage
- [ ] Create theme signal (light/dark)
- [ ] Apply CSS class to body element
- [ ] Detect system preference on first load

**UI Tasks:**
- [ ] Add theme toggle button in header (sun/moon icon)
- [ ] Animate icon transition
- [ ] Design dark mode color scheme (all components)
- [ ] Ensure proper contrast ratios (WCAG AA)
- [ ] Smooth transition between themes

---

### Social Share

**Frontend Tasks:**
- [ ] Create `ShareService` for social sharing
- [ ] Generate shareable URLs with metadata
- [ ] Create share image/card with quiz results
- [ ] Handle Twitter, LinkedIn, Facebook share intents
- [ ] Implement copy link to clipboard

**UI Tasks:**
- [ ] Build `ShareButtonsComponent` with social icons
- [ ] Display share buttons on quiz results page
- [ ] Show "Link Copied" toast on copy
- [ ] Create shareable result card template
- [ ] Add privacy toggle (public/private share)

---

### Pagination Component

**Frontend Tasks:**
- [ ] Create reusable `PaginationService`
- [ ] Calculate page numbers and ranges
- [ ] Handle page change events
- [ ] Update URL query parameters

**UI Tasks:**
- [ ] Build reusable `PaginationComponent`
- [ ] Show Previous, Next, and page numbers
- [ ] Highlight current page
- [ ] Disable Previous on first page, Next on last page
- [ ] Display "Showing X-Y of Z results"
- [ ] Implement responsive design (fewer page numbers on mobile)

---

### Error Handling

**Frontend Tasks:**
- [ ] Create global error handler service
- [ ] Log errors to console and external service (optional)
- [ ] Display user-friendly error messages
- [ ] Handle network errors gracefully
- [ ] Implement retry logic for failed requests

**UI Tasks:**
- [ ] Build `ErrorComponent` for displaying errors
- [ ] Create error toast component
- [ ] Show "Something went wrong" page for critical errors
- [ ] Add "Retry" button for recoverable errors
- [ ] Display specific error messages (401, 403, 404, 500)

---

### Loading States

**Frontend Tasks:**
- [ ] Create `LoadingService` for global loading state
- [ ] Use signals for loading indicators
- [ ] Show loading during HTTP requests
- [ ] Handle concurrent loading states

**UI Tasks:**
- [ ] Build reusable `LoadingSpinnerComponent`
- [ ] Create skeleton loaders for lists and cards
- [ ] Show inline loading spinners on buttons
- [ ] Add progress bar at top of page for navigation
- [ ] Ensure loading states are accessible (ARIA live regions)

---

### Offline Support

**Frontend Tasks:**
- [ ] Implement service worker for PWA
- [ ] Cache API responses for offline access
- [ ] Detect online/offline status
- [ ] Queue failed requests for retry when online
- [ ] Store quiz progress in IndexedDB

**UI Tasks:**
- [ ] Show offline indicator banner when disconnected
- [ ] Display cached data with "Offline Mode" badge
- [ ] Disable features requiring internet (quiz submission)
- [ ] Show "You're back online" message when reconnected

---

## Progressive Web App (PWA)

### PWA Setup

**Frontend Tasks:**
- [ ] Configure Angular PWA module
- [ ] Create `manifest.json` with app metadata
- [ ] Set up service worker for caching strategies
- [ ] Implement push notifications (optional)
- [ ] Handle app updates gracefully

**UI Tasks:**
- [ ] Design app icons (192x192, 512x512)
- [ ] Create splash screen images
- [ ] Add "Install App" prompt for desktop/mobile
- [ ] Design install button/banner
- [ ] Test PWA on mobile devices (iOS, Android)

---

## Routing & Navigation

**Frontend Tasks:**
- [ ] Configure app routes with lazy loading:
  - `/` - Landing page (guest welcome or dashboard)
  - `/login` - Login page
  - `/register` - Register page
  - `/dashboard` - User dashboard (auth guard)
  - `/categories` - Category list
  - `/categories/:id` - Category detail
  - `/quiz/setup` - Quiz setup
  - `/quiz/:sessionId` - Active quiz
  - `/quiz/:sessionId/results` - Quiz results
  - `/quiz/:sessionId/review` - Quiz review
  - `/bookmarks` - Bookmarked questions (auth guard)
  - `/history` - Quiz history (auth guard)
  - `/profile` - User profile (auth guard)
  - `/admin` - Admin dashboard (admin guard)
  - `/admin/users` - User management (admin guard)
  - `/admin/questions` - Question management (admin guard)
  - `/admin/categories` - Category management (admin guard)
  - `/admin/settings` - Guest settings (admin guard)
  - `/admin/analytics` - Analytics (admin guard)
- [ ] Create auth guard for protected routes
- [ ] Create admin guard for admin-only routes
- [ ] Create guest guard to prevent access to auth-only content
- [ ] Implement route preloading strategy
- [ ] Handle 404 redirect

**UI Tasks:**
- [ ] Create navigation menu with links
- [ ] Highlight active route in navigation
- [ ] Implement breadcrumb component
- [ ] Add back button where appropriate
- [ ] Ensure smooth transitions between routes

---

## Testing & Quality Assurance

**Frontend Tasks:**
- [ ] Set up unit tests for services (Jasmine/Jest)
- [ ] Set up component tests with TestBed
- [ ] Create integration tests for critical flows
- [ ] Set up E2E tests (Cypress/Playwright)
- [ ] Test auth flows (login, register, logout)
- [ ] Test quiz flow (start, answer, submit, complete)
- [ ] Test admin flows (CRUD operations)
- [ ] Test error handling and edge cases
- [ ] Test responsive design on multiple viewports

**UI Tasks:**
- [ ] Test accessibility with screen readers
- [ ] Verify WCAG 2.1 AA compliance
- [ ] Test keyboard navigation throughout app
- [ ] Validate color contrast ratios
- [ ] Test on multiple browsers (Chrome, Firefox, Safari, Edge)
- [ ] Test on mobile devices (iOS, Android)
- [ ] Verify touch interactions on mobile
- [ ] Test dark mode across all components

---

## Performance Optimization

**Frontend Tasks:**
- [ ] Implement lazy loading for routes and components
- [ ] Use `OnPush` change detection strategy where possible
- [ ] Optimize bundle size (analyze with webpack-bundle-analyzer)
- [ ] Implement virtual scrolling for long lists
- [ ] Use trackBy functions in ngFor loops
- [ ] Debounce search inputs and expensive operations
- [ ] Preload critical assets
- [ ] Implement image lazy loading

**UI Tasks:**
- [ ] Optimize images (compress, use WebP format)
- [ ] Minimize CSS and JS bundles
- [ ] Use CSS animations over JavaScript animations
- [ ] Reduce number of DOM elements
- [ ] Test Lighthouse performance score (aim for >90)

---

## Deployment & DevOps

**Frontend Tasks:**
- [ ] Configure production build settings
- [ ] Set up environment-specific configurations
- [ ] Implement CI/CD pipeline (GitHub Actions, GitLab CI)
- [ ] Set up hosting (Firebase, Netlify, Vercel, AWS S3)
- [ ] Configure CDN for static assets
- [ ] Set up error tracking (Sentry, LogRocket)
- [ ] Implement analytics (Google Analytics, Mixpanel)
- [ ] Configure HTTPS and SSL certificates

**UI Tasks:**
- [ ] Test production build locally
- [ ] Verify all API endpoints work with production API
- [ ] Test PWA installation on production
- [ ] Verify social share preview images
- [ ] Test on production with real data

---

## Summary

**Total Modules:** 10  
**Total Endpoints:** 37  
**Estimated Tasks:** 500+

**Priority Order:**
1. Core Infrastructure & Setup
2. Authentication Module
3. Guest Module
4. Categories Module
5. Quiz Module
6. User Dashboard Module
7. Bookmarks Module
8. Admin Module
9. Shared Features & PWA
10. Testing & Deployment

**Tech Stack:**
- Angular v20 (Standalone Components)
- Signals for state management
- RxJS for async operations
- TypeScript (strict mode)
- Angular Material or Bootstrap
- Tailwind CSS (optional)
- Service Worker for PWA
- Jasmine/Jest for testing
- Cypress/Playwright for E2E

---

**Generated:** November 12, 2025  
**Project:** Interview Quiz Application  
**Framework:** Angular v20 with Signals