Objective:
- Build a simple web application that allows an admin to manage a network of agents.
- The admin should be able to add, update, view, and delete agents in the network.
-
List of Agents:
- Display a list of agents, including:
- Name
- Status (e.g., Active/Inactive)
- Last seen
- Display a list of agents, including:
-
Add Agent:
- Provide a form to add a new agent. The form should include:
- Name (text input)
- Email (email input with validation)
- Status (dropdown or toggle for Active/Inactive)
- Provide a form to add a new agent. The form should include:
-
Edit Agent:
- Allow editing an existing agent's details using the same form.
-
Delete Agent:
- Provide a way to delete an agent from the list.
-
State Management:
- Use React Context or a state management library like Redux.
- Persistent Storage: Store the agent data in localStorage so that the data persists across page reloads.
-
TypeScript:
- Use TypeScript to type props, state, and functions.
-
A few "real" Agents that you control
- Create another app (electron or something similar) and install it on another machine (or docker).
- Show an e2e scenario where you adding this agent and the agent is sending back its status.
- Build few 'commands' and show how to giving them to the agent and getting back the results.
-
Search and Filter:
- Add a search bar to filter agents by name or email.
-
Responsive Design:
- Make the UI responsive and mobile-friendly.
-
Agent Details Page:
- Allow clicking on an agent to view more detailed information on a separate page.
- Feel free to add many more details about the agent and the hosting OS.
-
API Integration:
- Instead of local state, fetch agent data from a mock REST API (e.g., using
jsonplaceholder.typicode.com
or a simple JSON server).
- Instead of local state, fetch agent data from a mock REST API (e.g., using
-
Unit Tests:
- Write basic unit tests for components and functionality using Jest and React Testing Library.
- Time Commitment: Approximately 90 minutes. Focus on the "Must-Have" features first, and only add the "Nice-to-Have" features if time allows.
- Code Quality: Use clean, maintainable code with proper TypeScript types and React best practices.
- Deliverable:
- A GitHub repository with the project.
- Include a README file with:
- Instructions to run the application and details about what is implemented and WHY.
- Add images of the app - At least 3-4 images of all the screens.
- A SHORT video that shows the project in action.
- Share the GitHub repository link.
- Ensure the project is runnable with the following commands:
npm install npm start
- If you implemented optional features, mention them in the README.
Hi Ido,
I don't think home assessment can show my skills exactly.
If you don't mind, I'd like to show my skills through any kind of technical interview like live coding.
Regards,
Richard