Scribd
Upload
33 views3 pages

User Management Module - Trial Task

The document outlines a trial task to implement a User Management module for the Vocal AI platform, detailing core features such as user list view, user details, and role management. It specifies technical requirements including the use of TypeScript and React Query, along with a checklist for implementation and success criteria focused on functionality, UX, code quality, and security. Bonus points are offered for additional features like bulk operations and user activity tracking.

Uploaded by

niravjoshi.2025
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views3 pages

User Management Module - Trial Task

The document outlines a trial task to implement a User Management module for the Vocal AI platform, detailing core features such as user list view, user details, and role management. It specifies technical requirements including the use of TypeScript and React Query, along with a checklist for implementation and success criteria focused on functionality, UX, code quality, and security. Bonus points are offered for additional features like bulk operations and user activity tracking.

Uploaded by

niravjoshi.2025
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

User Management Module - Trial Task

Figma: Link

Problem Statement
You need to implement a comprehensive User Management module for the Vocal AI platform.
This module should allow administrators to view, create, edit, and manage users within their
organization. The implementation should follow the existing project patterns and architecture.

Requirements

Core Features
1. User List View - Display all users with pagination, search, and filtering
2. User Details - View detailed information about a specific user
3. Create User - Add new users to the organization
4. Edit User - Modify existing user information
5. Delete User - Remove users from the organization
6. Role Management - Assign and manage user roles (admin, user, etc.)
7. User Status - Track user status (active, inactive, suspended)

Technical Requirements
- Follow existing project patterns and file structure
- Use TypeScript for type safety
- Implement proper error handling
- Use React Query for data fetching
- Follow the existing UI component patterns
- Implement proper permissions/authorization
- Add proper loading states and error states

Required Technologies & Versions


- Node.js: >=20.0.0
- Package Manager: [email protected]
- TypeScript: ^5.5.3
- React: ^18.3.1
- React DOM: ^18.3.1
- React Router DOM: ^6.26.2
- React Hook Form: ^7.53.0
- React Query (@tanstack/react-query): ^5.59.8
- Axios: >=1.8.2
- Zod: ^3.23.8
- Zustand: 5.0.1
- Lucide React: ^0.446.0
- Tailwind CSS: ^3.4.13
- Vite: >=5.4.19 <6
Implementation Checklist

- Create API endpoints and types


- Implement React Query hooks
- Create route structure
- Implement main container component
- Create user list component with pagination
- Implement search and filtering
- Create user details view
- Implement create user functionality
- Implement edit user functionality
- Implement delete user functionality
- Add proper loading and error states
- Implement form validation
- Add proper permissions
- Add to navigation
- Write tests (if applicable)
- Add proper TypeScript types
- Follow existing code style and patterns

Success Criteria

1. Functionality: All CRUD operations work correctly


2. UX: Smooth user experience with proper loading states
3. Code Quality: Follows existing patterns and conventions
4. Type Safety: Proper TypeScript implementation
5. Performance: Efficient data fetching and caching
6. Security: Proper permission checks and validation

Bonus Points

- Implement bulk operations (bulk delete, bulk role assignment)


- Add user activity tracking
- Implement user import/export functionality
- Add audit logging for user management actions
- Implement user session management
- Add user profile picture upload functionality
Notes

- Use the existing `User` type from `user-endpoints.ts` as a base


- Follow the existing error handling patterns
- Use the existing UI component library
- Implement proper form validation using the existing patterns
- Ensure responsive design for mobile devices
- Add proper accessibility features

This trial task will help evaluate your understanding of the codebase architecture and your ability
to implement features following established patterns.

You might also like