Tasks/frontend/FRONTEND_UI_TASKS.md

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
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
10. Progressive Web App (PWA)

---

Core Infrastructure

Setup & Configuration

Frontend Tasks:

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

UI Tasks:

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

---

Authentication Module

Endpoint: POST /api/auth/register

Purpose: Register new user account

Frontend Tasks:

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

UI Tasks:

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

---

Endpoint: POST /api/auth/login

Purpose: User login

Frontend Tasks:

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

UI Tasks:

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

---

Endpoint: POST /api/auth/logout

Purpose: User logout

Frontend Tasks:

• Add AuthService.logout() method
• Clear JWT token from storage
• Reset authState signal to null
• Clear any cached user data
• Redirect to login page

UI Tasks:

• Add logout button in user menu (header)
• Show confirmation dialog before logout
• Display success toast after logout
• Ensure proper cleanup of all user-specific state

---

Endpoint: GET /api/auth/verify

Purpose: Verify JWT token validity

Frontend Tasks:

• Add AuthService.verifyToken() method
• Implement token verification on app initialization
• Create auth guard to protect authenticated routes
• Handle expired token (redirect to login)
• Auto-refresh token if near expiration (optional)

UI Tasks:

• Show loading screen during token verification on app load
• Display error message if token is invalid
• Redirect to login with "Session expired" message

---

Guest Module

Endpoint: POST /api/guest/start-session

Purpose: Start guest session without registration

Frontend Tasks:

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

UI Tasks:

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

---

Endpoint: GET /api/guest/session/{guestId}

Purpose: Get guest session details

Frontend Tasks:

• Add GuestService.getSession(guestId) method
• Update guestState signal with session data
• Handle 404 if session not found or expired

UI Tasks:

• Display session info in guest banner (quizzes taken, time remaining)
• Show countdown timer for session expiry
• Display error message if session expired

---

Endpoint: GET /api/guest/quiz-limit

Purpose: Check remaining quiz attempts for guest

Frontend Tasks:

• Add GuestService.getQuizLimit() method
• Store remaining quizzes count in signal
• Check limit before allowing quiz start
• Show upgrade prompt when limit reached

UI Tasks:

• Display remaining quiz count in guest banner ("2 of 3 quizzes remaining")
• Show progress bar for quiz limit
• Build GuestLimitReachedComponent modal with upgrade prompt
• Add "Sign Up Now" CTA button when limit reached
• Show benefits of registration (unlimited quizzes, progress tracking)

---

Endpoint: POST /api/guest/convert

Purpose: Convert guest session to registered user

Frontend Tasks:

• Add GuestService.convertToUser(guestSessionId, userData) method
• Migrate guest data during registration
• Clear guest session token after conversion
• Store new JWT token
• Update authentication state

UI Tasks:

• Show "Save Your Progress!" prompt in guest mode
• Display guest stats before conversion (quizzes taken, score)
• Build conversion confirmation modal
• 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

---

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)

Completed Implementation:

• ✅ LoadingService integrated with HTTP interceptors
  • Created loading.interceptor.ts that automatically shows/hides loading during HTTP requests
  • Registered in app.config.ts as first interceptor in the chain
  • Supports X-Skip-Loading header to skip loading for specific requests (e.g., polling)
  • Uses LoadingService counter to handle concurrent requests properly
• ✅ Navigation progress bar added
  • Mat-progress-bar displayed at top of page during route transitions
  • Listens to Router events (NavigationStart/End/Cancel/Error)
  • Fixed position with high z-index above all content
  • Custom styling with primary color theme
• ✅ Accessibility features implemented
  • LoadingSpinnerComponent has role="status" and aria-live="polite"
  • Dynamic aria-label with loading message
  • Navigation progress bar has role="progressbar" and aria-label="Page loading"
  • Visual loading message marked with aria-hidden="true" to avoid duplication

---

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) - Exists as /admin/guest-settings
  • /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