User Management

View and manage students and educators on the platform

The User Management interface provides administrators with a comprehensive view of all platform users, including students and educators.

Overview

Administrators can view detailed information about all registered users, including their enrollment activity, course creation statistics, and account details.

User Types

Students

Users who enroll in and take courses

Educators

Users with approved educator status who can create courses

Features

Tab Navigation

Switch between user types using the tab interface:

Students

View all users who are enrolled as students. Displays enrollment counts and account details.

Educators

View all approved educators. Shows the number of courses each educator has created.

Search Functionality

Search across user names and email addresses in real-time

The search bar filters users dynamically as you type, matching:

• User full names (case-insensitive)
• Email addresses (case-insensitive)

const filteredUsers = users.filter((u) =>
  u.name.toLowerCase().includes(search.toLowerCase()) ||
  u.email.toLowerCase().includes(search.toLowerCase())
)

User Information Display

Each user entry shows the following information:

Student View

Column	Description
Student	Name with avatar (profile image or initials)
Email	User’s registered email address
Enrolled Courses	Number of courses the student is enrolled in
Joined	Account creation date

Educator View

Column	Description
Educator	Name with avatar (profile image or initials)
Email	User’s registered email address
Courses Created	Number of courses published by the educator
Joined	Account creation date

API Integration

GET /api/admin/users

Fetches all users with enhanced statistics:

{
  "success": true,
  "users": [
    {
      "_id": "user123",
      "name": "Jane Doe",
      "email": "[e-mail]",
      "imageUrl": "https://example.com/avatar.jpg",
      "enrolledCount": 5,
      "coursesCreated": 0,
      "isEducator": false,
      "createdAt": "2024-01-15T10:30:00Z"
    }
  ]
}

Requires admin authentication via Bearer token in the Authorization header

Data Processing

Role Determination

The backend determines educator status by querying Clerk’s user metadata:

const roleMap = {}
clerkResponse.data.forEach((cu) => {
  roleMap[cu.id] = cu.publicMetadata?.role
})

usersWithStats.map((u) => ({
  ...u,
  isEducator: roleMap[u._id] === 'educator'
}))

Statistics Aggregation

1. Enrollment Count

   Calculated from the enrolledCourses array length in the User model

2. Courses Created

   Aggregated by grouping courses by educatorId and counting documents

3. User Sorting

   All users are sorted by createdAt in descending order (newest first)

User Interface Features

Avatar Display

With Image

Displays the user’s profile image in a circular avatar

Without Image

Shows a colored circle with the user’s first initial in uppercase

Responsive Design

Mobile

Shows only name, primary metric, and joined date

Desktop

Displays all columns including email addresses and full statistics

Dark Mode

Full dark mode support with:

• Adjusted background colors
• Border color variations
• Text color contrast optimization

Empty States

When no users match the search criteria, a helpful message is displayed:

• “No students match your search”
• “No educators match your search”
• “No students yet” (when no search is active)
• “No educators yet” (when no search is active)

Summary Statistics

The page header displays aggregate counts:

125 total · 18 educators · 107 students

This provides quick insight into the platform’s user distribution.

Implementation Notes

Performance Optimization

The user list is fetched once on component mount and filtered client-side:

useEffect(() => {
  const load = async () => {
    const { data } = await axios.get(backendUrl + '/api/admin/users', {
      headers: { Authorization: `Bearer ${token}` }
    })
    if (data.success) setUsers(data.users)
  }
  load()
}, [])

Date Formatting

Joined dates are formatted using the Indian locale:

const fmt = (d) => new Date(d).toLocaleDateString('en-IN', {
  day: 'numeric',
  month: 'short',
  year: 'numeric'
})
// Example: "15 Jan 2024"

Use the search functionality to quickly locate specific users by name or email during support inquiries.