Project

This project is built in two parts.

1. spycloud-api-server - this is the server that hold the endpoints used in the application
2. user-dashboard - this is the react app for the user management dashboard

To run the API project

1. clone the repo
2. in a terminal, go to the spycloud-api-server (cd .\spycloud-api-server\ )
3. install the npm packages (npm install)
4. build the server (npm run build)
5. run the server (npm run start)

The server will now run on Localhost:3001 The Swagger documentation is at http://localhost:3001/api-docs/

To run the React app

1. clone the repo
2. in a terminal, go to the spycloud-api-server (cd .\user-dashboard\ )
3. install the npm packages (npm install)
4. build the app (npm run build:prod)
5. run the app (npm run start:prod)
6. Go to url in browser: http://localhost:3000

The server will now run on Localhost:3000

Other commands

1. Linting (npm run lint)
2. Run tests (npm run test)

Objective

Your task is to develop a simplified version of a User Management Dashboard using React with Hooks. This project aims to evaluate your technical expertise in modern React features, TypeScript, Material UI, component design, UX implementation, and optional usage of AI tools.

Brief

Part 1: User List Page

1. Fetch a list of users from a mock API (/api/users) using React Hooks. Alternatively, you can use a JSON file.
2. Display the fetched list in a responsive Material UI DataGrid or table. The table should include the following columns: User ID, Name, Email, Status, and Creation Date.
3. Implement functionality for sorting and filtering the user list using React Hooks.
   • Sorting should be available for the Name, Email, and Creation Date fields.
   • Filtering should be available for the Status field, allowing users to filter by the status of the user account (e.g., active, inactive).
4. Include a search box that performs a basic keyword filter on the Name and Email fields in the user list.
5. Implement pagination for the User List Page. Assume each page will display 10 user records.
6. Each row in the user list should contain a "Details" button.
7. Implement loading states for the User List Page. Show a loading spinner or similar indicator while the data is being fetched.

Part 2: User Detail Page

1. Upon clicking the "Details" button on the User List Page, navigate the user to a new view that displays detailed information about the selected user.
2. Implement routing (e.g., with React Router) to handle the navigation between the User List Page and the User Detail Page.
3. The User Detail Page should display data such as name, email, status, creation date, and more.
4. Implement a loading state for the User Detail Page. Show a loading spinner or similar indicator while the user data is being fetched.

Part 3: Design System Use

1. Implement a few components (e.g., Button, Card, UserRow, etc.) using a reusable design system approach.
2. Ensure consistency in spacing, typography, and color across all components and pages by using a shared theme object.

Evaluation Criteria

• Code organization and quality.
• Proper use of modern React features, specifically React Hooks.
• Implementation of the design system.
• UX implementation.
• Adherence to the task requirements.

CodeSubmit

Please organize, design, test, and document your code as if it were going into production - then push your changes to the master branch.

Have fun coding! 🚀

The SpyCloud Team