1117 lines
36 KiB
Markdown
1117 lines
36 KiB
Markdown
# 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:**
|
|
- [x] Create `CategoryService` with `getCategories()` method
|
|
- [x] Store categories in `categoriesState` signal
|
|
- [x] Implement caching strategy for categories (1 hour TTL)
|
|
- [x] Handle guest vs authenticated user filtering (guestAccessible flag)
|
|
- [x] Sort categories by displayOrder or name
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `CategoryListComponent` to display all categories
|
|
- [x] Design category card with icon, name, description, question count
|
|
- [x] Show "Locked" badge for auth-only categories (guest users)
|
|
- [x] Implement grid layout (responsive: 1 col mobile, 2 cols tablet, 3-4 cols desktop)
|
|
- [x] Add search/filter bar for categories
|
|
- [x] Show loading skeleton while fetching
|
|
- [x] Display empty state if no categories available
|
|
- [x] Add hover effects and click animation
|
|
- [x] Ensure keyboard navigation and ARIA labels
|
|
|
|
---
|
|
|
|
### Endpoint: GET /api/categories/{id}
|
|
**Purpose:** Get category details with question preview
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `CategoryService.getCategoryById(id)` method
|
|
- [x] Store selected category in `selectedCategoryState` signal
|
|
- [x] Fetch category stats (total questions, difficulty breakdown, accuracy)
|
|
- [x] Handle 404 if category not found
|
|
- [x] Handle 403 for guest users accessing auth-only categories
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `CategoryDetailComponent` showing full category info
|
|
- [x] Display category header with icon, name, description
|
|
- [x] Show statistics (total questions, difficulty breakdown chart)
|
|
- [x] Display question preview (first 5 questions)
|
|
- [x] Add "Start Quiz" button with difficulty selector
|
|
- [x] Show loading spinner while fetching details
|
|
- [x] Display error message if category not accessible
|
|
- [x] Implement breadcrumb navigation (Home > Categories > Category Name)
|
|
|
|
---
|
|
|
|
### Endpoint: POST /api/categories (Admin Only)
|
|
**Purpose:** Create new category
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `CategoryService.createCategory(data)` method (admin only)
|
|
- [x] Validate form data (name, slug, description)
|
|
- [x] Handle 401/403 authorization errors
|
|
- [x] Invalidate category cache after creation
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `CategoryFormComponent` (admin) for creating categories
|
|
- [x] Design form with name, slug, description, icon, color fields
|
|
- [x] Add guest accessible checkbox
|
|
- [x] Show slug preview/auto-generation
|
|
- [x] Display validation errors inline
|
|
- [x] Show success toast after creation
|
|
- [x] Redirect to category list after success
|
|
|
|
---
|
|
|
|
### Endpoint: PUT /api/categories/{id} (Admin Only)
|
|
**Purpose:** Update category
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `CategoryService.updateCategory(id, data)` method (admin only)
|
|
- [x] Pre-fill form with existing category data
|
|
- [x] Handle 404 if category not found
|
|
- [x] Invalidate cache after update
|
|
|
|
**UI Tasks:**
|
|
- [x] Reuse `CategoryFormComponent` in edit mode
|
|
- [x] Pre-populate form fields with existing data
|
|
- [x] Show "Editing: Category Name" header
|
|
- [x] Add "Cancel" and "Save Changes" buttons
|
|
- [x] Display success toast after update
|
|
|
|
---
|
|
|
|
### Endpoint: DELETE /api/categories/{id} (Admin Only)
|
|
**Purpose:** Delete category
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `CategoryService.deleteCategory(id)` method (admin only)
|
|
- [x] Handle soft delete
|
|
- [x] Invalidate cache after deletion
|
|
- [x] Handle 404 if category not found
|
|
|
|
**UI Tasks:**
|
|
- [x] Add delete button in admin category list
|
|
- [x] Show confirmation dialog before deletion
|
|
- [x] Display warning if category has questions
|
|
- [x] Show success toast after deletion
|
|
- [x] Remove category from list immediately
|
|
|
|
---
|
|
|
|
## Quiz Module
|
|
|
|
### Endpoint: POST /api/quiz/start
|
|
**Purpose:** Start a new quiz session
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Create `QuizService` with `startQuiz(categoryId, questionCount, difficulty, quizType)` method
|
|
- [x] Store active session in `quizSessionState` signal
|
|
- [x] Validate category accessibility (guest vs authenticated)
|
|
- [x] Check guest quiz limit before starting
|
|
- [x] Handle JWT token or guest token header
|
|
- [x] Navigate to quiz page after starting
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `QuizSetupComponent` for configuring quiz
|
|
- [x] Add category selector dropdown
|
|
- [x] Add question count slider (5, 10, 15, 20)
|
|
- [x] Add difficulty selector (Easy, Medium, Hard, Mixed)
|
|
- [x] Add quiz type selector (Practice, Timed)
|
|
- [x] Show estimated time for quiz
|
|
- [x] Display "Start Quiz" button with loading state
|
|
- [x] Show guest limit warning if applicable
|
|
- [x] Implement responsive design
|
|
|
|
---
|
|
|
|
### Endpoint: POST /api/quiz/submit
|
|
**Purpose:** Submit answer for current question
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `QuizService.submitAnswer(questionId, answer, sessionId)` method
|
|
- [x] Update quiz session state with answer result
|
|
- [x] Increment current question index
|
|
- [x] Calculate and update score in real-time
|
|
- [x] Handle validation errors
|
|
- [x] Store answer history for review
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `QuizQuestionComponent` displaying current question
|
|
- [x] Show question text, type, and options
|
|
- [x] Create answer input based on question type:
|
|
- Multiple choice: Radio buttons
|
|
- True/False: Toggle buttons
|
|
- Written: Text area
|
|
- [x] Show "Submit Answer" button (disabled until answer selected)
|
|
- [x] Display loading spinner during submission
|
|
- [x] Show immediate feedback (correct/incorrect) with animation
|
|
- [x] Display explanation after submission
|
|
- [x] Show "Next Question" button after submission
|
|
- [x] Update progress bar and score
|
|
- [x] Add timer display if timed quiz
|
|
- [x] Prevent answer changes after submission
|
|
|
|
---
|
|
|
|
### Endpoint: POST /api/quiz/complete
|
|
**Purpose:** Complete quiz session and get results
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `QuizService.completeQuiz(sessionId)` method
|
|
- [x] Store final results in `quizResultsState` signal
|
|
- [x] Calculate percentage score
|
|
- [x] Fetch detailed answer breakdown
|
|
- [x] Clear active session state
|
|
- [x] Redirect to results page
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `QuizResultsComponent` showing final score
|
|
- [x] Display score with percentage and message (Excellent, Good, Keep Practicing)
|
|
- [x] Show time taken and questions answered
|
|
- [x] Display pie chart for correct/incorrect breakdown
|
|
- [x] List all questions with user answers and correct answers
|
|
- [x] Highlight incorrect answers in red
|
|
- [x] Add "Review Incorrect Answers" button
|
|
- [x] Add "Retake Quiz" button
|
|
- [x] Add "Return to Dashboard" button
|
|
- [x] Show confetti animation for high scores (>80%)
|
|
- [x] Add social share buttons (Twitter, LinkedIn, Facebook)
|
|
|
|
---
|
|
|
|
### Endpoint: GET /api/quiz/session/{sessionId}
|
|
**Purpose:** Get current quiz session details
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `QuizService.getSession(sessionId)` method
|
|
- [x] Restore session state if user refreshes page
|
|
- [x] Handle 404 if session not found
|
|
- [x] Resume quiz from current question index
|
|
|
|
**UI Tasks:**
|
|
- [x] Show "Resume Quiz" prompt if incomplete session exists
|
|
- [x] Display current progress in prompt (e.g., "Question 5 of 10")
|
|
- [x] Allow user to continue or start new quiz
|
|
|
|
---
|
|
|
|
### Endpoint: GET /api/quiz/review/{sessionId}
|
|
**Purpose:** Review completed quiz
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `QuizService.reviewQuiz(sessionId)` method
|
|
- [x] Fetch all questions and answers for session
|
|
- [x] Store review data in signal
|
|
- [x] Handle 404 if session not found
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `QuizReviewComponent` for reviewing completed quiz
|
|
- [x] Display each question with user answer and correct answer
|
|
- [x] Highlight correct answers in green, incorrect in red
|
|
- [x] Show explanations for all questions
|
|
- [x] Add "Bookmark" button for difficult questions
|
|
- [x] Implement pagination or infinite scroll for long quizzes
|
|
- [x] Add "Back to Results" button
|
|
|
|
---
|
|
|
|
## User Dashboard Module
|
|
|
|
### Endpoint: GET /api/users/{userId}/dashboard
|
|
**Purpose:** Get user dashboard with statistics
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Create `UserService` with `getDashboard(userId)` method
|
|
- [x] Store dashboard data in `dashboardState` signal
|
|
- [x] Fetch on dashboard component load
|
|
- [x] Implement caching (5 min TTL)
|
|
- [x] Handle 401 if not authenticated
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `DashboardComponent` as main user landing page
|
|
- [x] Display welcome message with username
|
|
- [x] Show overall statistics cards:
|
|
- Total quizzes taken
|
|
- Overall accuracy percentage
|
|
- Current streak
|
|
- Total questions answered
|
|
- [x] Create category-wise performance chart (bar chart or pie chart)
|
|
- [x] Display recent quiz sessions (last 5) with scores
|
|
- [x] Show achievements and badges earned
|
|
- [x] Add "Start New Quiz" CTA button
|
|
- [x] Implement responsive grid layout (stack on mobile)
|
|
- [x] Add loading skeletons for data sections
|
|
- [x] Show empty state if no quizzes taken yet
|
|
|
|
---
|
|
|
|
### Endpoint: GET /api/users/{userId}/history
|
|
**Purpose:** Get quiz history with pagination
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `UserService.getHistory(userId, page, limit, category?, sortBy?)` method
|
|
- [x] Store history in `historyState` signal
|
|
- [x] Implement pagination state management
|
|
- [x] Add filtering by category
|
|
- [x] Add sorting by date or score
|
|
- [x] Handle query parameters in URL
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `QuizHistoryComponent` displaying all past quizzes
|
|
- [x] Create history table/list with columns: Date, Category, Score, Time, Actions
|
|
- [x] Add filter dropdown for category
|
|
- [x] Add sort dropdown (Date, Score)
|
|
- [x] Implement pagination controls (Previous, Next, Page numbers)
|
|
- [x] Show "View Details" button for each quiz
|
|
- [x] Display loading spinner during fetch
|
|
- [x] Show empty state if no history
|
|
- [x] Make table responsive (collapse to cards on mobile)
|
|
- [x] Add export functionality (CSV download)
|
|
|
|
---
|
|
|
|
### Endpoint: PUT /api/users/{userId}
|
|
**Purpose:** Update user profile
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `UserService.updateProfile(userId, data)` method
|
|
- [x] Update `authState` signal with new user data
|
|
- [x] Validate form data (email, username)
|
|
- [x] Handle 409 Conflict for duplicate email/username
|
|
- [x] Handle password change separately (if supported)
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `ProfileSettingsComponent` for editing profile
|
|
- [x] Create form with username, email fields
|
|
- [x] Add password change section (current, new, confirm)
|
|
- [x] Show validation errors inline
|
|
- [x] Add "Save Changes" and "Cancel" buttons
|
|
- [x] Display success toast after update
|
|
- [x] Show loading spinner on submit
|
|
- [x] Pre-fill form with current user data
|
|
|
|
---
|
|
|
|
## Bookmarks Module
|
|
|
|
### Endpoint: GET /api/users/{userId}/bookmarks
|
|
**Purpose:** Get user's bookmarked questions
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Create `BookmarkService` with `getBookmarks(userId)` method
|
|
- [x] Store bookmarks in `bookmarksState` signal
|
|
- [x] Implement caching (5 min TTL)
|
|
- [x] Handle 401 if not authenticated
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `BookmarksComponent` displaying all bookmarked questions
|
|
- [x] Show question cards with text, category, difficulty
|
|
- [x] Add "Remove Bookmark" button for each question
|
|
- [x] Add "Practice Bookmarked Questions" button to start quiz
|
|
- [x] Show empty state if no bookmarks
|
|
- [x] Implement grid layout (responsive)
|
|
- [x] Add search/filter for bookmarks
|
|
|
|
---
|
|
|
|
### Endpoint: POST /api/users/{userId}/bookmarks
|
|
**Purpose:** Add question to bookmarks
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `BookmarkService.addBookmark(userId, questionId)` method
|
|
- [x] Update `bookmarksState` signal optimistically
|
|
- [x] Handle 409 if already bookmarked
|
|
- [x] Show success/error toast
|
|
|
|
**UI Tasks:**
|
|
- [x] Add bookmark icon button on question cards
|
|
- [x] Show filled/unfilled icon based on bookmark status
|
|
- [x] Animate icon on toggle
|
|
- [x] Display success toast "Question bookmarked"
|
|
- [x] Ensure button is accessible with ARIA label
|
|
|
|
---
|
|
|
|
### Endpoint: DELETE /api/users/{userId}/bookmarks/{questionId}
|
|
**Purpose:** Remove bookmark
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `BookmarkService.removeBookmark(userId, questionId)` method
|
|
- [x] Update `bookmarksState` signal optimistically
|
|
- [x] Handle 404 if bookmark not found
|
|
|
|
**UI Tasks:**
|
|
- [x] Toggle bookmark icon to unfilled state
|
|
- [x] Remove question from bookmarks list
|
|
- [x] 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:**
|
|
- [x] Create `AdminService` with `getStatistics()` method
|
|
- [x] Store stats in `adminStatsState` signal
|
|
- [x] Implement caching (5 min TTL)
|
|
- [x] Handle 401/403 authorization errors
|
|
- [x] Create admin auth guard for routes
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `AdminDashboardComponent` as admin landing page
|
|
- [x] Display statistics cards:
|
|
- Total users
|
|
- Active users (last 7 days)
|
|
- Total quiz sessions
|
|
- Total questions
|
|
- [x] Show user growth chart (line chart)
|
|
- [x] Display most popular categories (bar chart)
|
|
- [x] Show average quiz scores
|
|
- [x] Add date range picker for filtering stats
|
|
- [x] Implement responsive layout
|
|
- [x] Show loading skeletons for charts
|
|
|
|
---
|
|
|
|
### Endpoint: GET /api/admin/guest-analytics
|
|
**Purpose:** Get guest user analytics
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.getGuestAnalytics()` method
|
|
- [x] Store analytics in `guestAnalyticsState` signal
|
|
- [x] Implement caching (10 min TTL)
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `GuestAnalyticsComponent` (admin)
|
|
- [x] Display guest statistics:
|
|
- Total guest sessions
|
|
- Active guest sessions
|
|
- Guest-to-user conversion rate
|
|
- Average quizzes per guest
|
|
- [x] Show conversion funnel chart
|
|
- [x] Display guest session timeline chart
|
|
- [x] Add export functionality
|
|
|
|
---
|
|
|
|
### Endpoint: GET /api/admin/guest-settings
|
|
**Purpose:** Get guest access settings
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.getGuestSettings()` method
|
|
- [x] Store settings in `guestSettingsState` signal
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `GuestSettingsComponent` (admin) for viewing settings
|
|
- [x] Display current settings in read-only cards
|
|
- [x] Add "Edit Settings" button
|
|
|
|
---
|
|
|
|
### Endpoint: PUT /api/admin/guest-settings
|
|
**Purpose:** Update guest access settings
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.updateGuestSettings(data)` method
|
|
- [x] Update `guestSettingsState` signal
|
|
- [x] Validate form data
|
|
- [x] Handle success/error responses
|
|
|
|
**UI Tasks:**
|
|
- [x] 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)
|
|
- [x] Add "Save Changes" and "Cancel" buttons
|
|
- [x] Show validation errors inline
|
|
- [x] Display success toast after update
|
|
- [x] Show preview of settings changes
|
|
|
|
---
|
|
|
|
### Endpoint: GET /api/admin/users
|
|
**Purpose:** Get all users with pagination
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.getUsers(page, limit, role?, isActive?, sortBy?)` method
|
|
- [x] Store users in `adminUsersState` signal
|
|
- [x] Implement pagination, filtering, and sorting
|
|
- [x] Handle query parameters in URL
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `AdminUsersComponent` displaying user list
|
|
- [x] Create user table with columns: Username, Email, Role, Status, Joined Date, Actions
|
|
- [x] Add filter dropdowns (Role: All/User/Admin, Status: All/Active/Inactive)
|
|
- [x] Add sort dropdown (Username, Email, Date)
|
|
- [x] Add search input for username/email
|
|
- [x] Implement pagination controls
|
|
- [x] Add action buttons (Edit Role, View Details, Deactivate/Activate)
|
|
- [x] Show loading spinner during fetch
|
|
- [x] Make table responsive (stack on mobile)
|
|
|
|
---
|
|
|
|
### Endpoint: GET /api/admin/users/{userId}
|
|
**Purpose:** Get user details
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.getUserDetails(userId)` method
|
|
- [x] Store user details in signal
|
|
- [x] Handle 404 if user not found
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `AdminUserDetailComponent` showing full user profile
|
|
- [x] Display user info, statistics, quiz history
|
|
- [x] Add "Edit Role" and "Deactivate" buttons
|
|
- [x] Show user activity timeline
|
|
- [x] Add breadcrumb navigation
|
|
|
|
---
|
|
|
|
### Endpoint: PUT /api/admin/users/{userId}/role
|
|
**Purpose:** Update user role
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.updateUserRole(userId, role)` method
|
|
- [x] Update user in `adminUsersState` signal
|
|
- [x] Handle validation errors
|
|
|
|
**UI Tasks:**
|
|
- [x] Build role update modal/dialog
|
|
- [x] Add role selector (User, Admin)
|
|
- [x] Show confirmation dialog
|
|
- [x] Display success toast after update
|
|
- [x] Show warning if demoting admin
|
|
|
|
---
|
|
|
|
### Endpoint: PUT /api/admin/users/{userId}/activate
|
|
**Purpose:** Reactivate user
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.activateUser(userId)` method
|
|
- [x] Update user status in signal
|
|
|
|
**UI Tasks:**
|
|
- [x] Add "Activate" button for inactive users
|
|
- [x] Show confirmation dialog
|
|
- [x] Display success toast after activation
|
|
|
|
---
|
|
|
|
### Endpoint: DELETE /api/admin/users/{userId}
|
|
**Purpose:** Deactivate user
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.deactivateUser(userId)` method
|
|
- [x] Update user status in signal
|
|
- [x] Handle soft delete
|
|
|
|
**UI Tasks:**
|
|
- [x] Add "Deactivate" button for active users
|
|
- [x] Show confirmation dialog with warning message
|
|
- [x] Display success toast after deactivation
|
|
- [x] Show "Reactivate" button for deactivated users
|
|
|
|
---
|
|
|
|
### Endpoint: POST /api/admin/questions
|
|
**Purpose:** Create new question
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.createQuestion(data)` method
|
|
- [x] Validate question data (type, options, correct answer)
|
|
- [x] Handle 401/403 authorization errors
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `AdminQuestionFormComponent` for creating questions
|
|
- [x] 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
|
|
- [x] Show/hide options based on question type
|
|
- [x] Add dynamic option inputs for MCQ (Add/Remove buttons)
|
|
- [x] Validate correct answer matches options
|
|
- [x] Show question preview panel
|
|
- [x] Display validation errors inline
|
|
- [x] Add "Save Question" and "Cancel" buttons
|
|
- [x] Show success toast after creation
|
|
|
|
---
|
|
|
|
### Endpoint: PUT /api/admin/questions/{id}
|
|
**Purpose:** Update question
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.updateQuestion(id, data)` method
|
|
- [x] Pre-fill form with existing question data
|
|
- [x] Handle 404 if question not found
|
|
|
|
**UI Tasks:**
|
|
- [x] Reuse `AdminQuestionFormComponent` in edit mode
|
|
- [x] Pre-populate all form fields
|
|
- [x] Show "Editing: Question ID" header
|
|
- [ ] Add version history section (optional)
|
|
- [x] Display success toast after update
|
|
|
|
---
|
|
|
|
### Endpoint: DELETE /api/admin/questions/{id}
|
|
**Purpose:** Delete question
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Add `AdminService.deleteQuestion(id)` method
|
|
- [x] Handle soft delete
|
|
- [x] Update question list after deletion
|
|
|
|
**UI Tasks:**
|
|
- [x] Add delete button in admin question list
|
|
- [x] Show confirmation dialog with warning
|
|
- [x] Display success toast after deletion
|
|
- [ ] Add "Restore" option for soft-deleted questions
|
|
|
|
---
|
|
|
|
## Shared Features
|
|
|
|
### Search Functionality
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Create `SearchService` for global search
|
|
- [x] Implement debounced search input
|
|
- [x] Search across questions, categories, quizzes
|
|
- [x] Store search results in signal
|
|
- [x] Handle empty search results
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `SearchComponent` in header/navbar
|
|
- [x] Create search input with icon
|
|
- [x] Display search results dropdown
|
|
- [x] Highlight matching text in results
|
|
- [x] Add "See All Results" link
|
|
- [x] Implement keyboard navigation (arrow keys, enter)
|
|
- [x] Show loading indicator during search
|
|
- [x] 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:**
|
|
- [x] Create reusable `PaginationService`
|
|
- [x] Calculate page numbers and ranges
|
|
- [x] Handle page change events
|
|
- [x] Update URL query parameters
|
|
|
|
**UI Tasks:**
|
|
- [x] Build reusable `PaginationComponent`
|
|
- [x] Show Previous, Next, and page numbers
|
|
- [x] Highlight current page
|
|
- [x] Disable Previous on first page, Next on last page
|
|
- [x] Display "Showing X-Y of Z results"
|
|
- [x] Implement responsive design (fewer page numbers on mobile)
|
|
|
|
---
|
|
|
|
### Error Handling
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Create global error handler service
|
|
- [x] Log errors to console and external service (optional)
|
|
- [x] Display user-friendly error messages
|
|
- [x] Handle network errors gracefully
|
|
- [x] Implement retry logic for failed requests
|
|
|
|
**UI Tasks:**
|
|
- [x] Build `ErrorComponent` for displaying errors
|
|
- [x] Create error toast component
|
|
- [x] Show "Something went wrong" page for critical errors
|
|
- [x] Add "Retry" button for recoverable errors
|
|
- [x] Display specific error messages (401, 403, 404, 500)
|
|
|
|
---
|
|
|
|
### Loading States
|
|
|
|
**Frontend Tasks:**
|
|
- [x] Create `LoadingService` for global loading state
|
|
- [x] Use signals for loading indicators
|
|
- [x] Show loading during HTTP requests
|
|
- [x] Handle concurrent loading states
|
|
|
|
**UI Tasks:**
|
|
- [x] Build reusable `LoadingSpinnerComponent`
|
|
- [x] Create skeleton loaders for lists and cards
|
|
- [x] Show inline loading spinners on buttons
|
|
- [x] Add progress bar at top of page for navigation
|
|
- [x] 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
|
|
|
|
---
|
|
|
|
<!-- ### 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:**
|
|
- [x] Configure app routes with lazy loading:
|
|
- [x] `/` - Landing page (guest welcome or dashboard)
|
|
- [x] `/login` - Login page
|
|
- [x] `/register` - Register page
|
|
- [x] `/dashboard` - User dashboard (auth guard)
|
|
- [x] `/categories` - Category list
|
|
- [x] `/categories/:id` - Category detail
|
|
- [x] `/quiz/setup` - Quiz setup
|
|
- [x] `/quiz/:sessionId` - Active quiz
|
|
- [x] `/quiz/:sessionId/results` - Quiz results
|
|
- [x] `/quiz/:sessionId/review` - Quiz review
|
|
- [x] `/bookmarks` - Bookmarked questions (auth guard)
|
|
- [x] `/history` - Quiz history (auth guard)
|
|
- [x] `/profile` - User profile (auth guard)
|
|
- [x] `/admin` - Admin dashboard (admin guard)
|
|
- [x] `/admin/users` - User management (admin guard)
|
|
- [x] `/admin/questions` - Question management (admin guard)
|
|
- [x] `/admin/categories` - Category management (admin guard)
|
|
- [x] `/admin/settings` - Guest settings (admin guard) - **Exists as /admin/guest-settings**
|
|
- [x] `/admin/analytics` - Analytics (admin guard)
|
|
- [x] Create auth guard for protected routes
|
|
- [x] Create admin guard for admin-only routes
|
|
- [x] Create guest guard to prevent access to auth-only content
|
|
- [x] Implement route preloading strategy
|
|
- [x] Handle 404 redirect
|
|
|
|
**UI Tasks:**
|
|
- [x] Create navigation menu with links
|
|
- [x] Highlight active route in navigation
|
|
- [x] Implement breadcrumb component
|
|
- [x] 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
|