Skip to content

Instantly share code, notes, and snippets.

@greenido
Last active January 20, 2025 05:28
Show Gist options
  • Save greenido/1414d9ab4fabb3934c8033c07120d1a1 to your computer and use it in GitHub Desktop.
Save greenido/1414d9ab4fabb3934c8033c07120d1a1 to your computer and use it in GitHub Desktop.
A Home Assignment for full-stack Developer (ReactJS / TypeScript)

Home Assignment for TypeScript Developers

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.

Requirements

Must-Have (Core Features)

  1. List of Agents:

    • Display a list of agents, including:
      • Name
      • Email
      • Status (e.g., Active/Inactive)
      • Last seen
  2. 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)
  3. Edit Agent:

    • Allow editing an existing agent's details using the same form.
  4. Delete Agent:

    • Provide a way to delete an agent from the list.
  5. 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.
  6. TypeScript:

    • Use TypeScript to type props, state, and functions.

Nice-to-Have (Optional Enhancements - only for the ones who love ❤️ to code)

  1. 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.
  2. Search and Filter:

    • Add a search bar to filter agents by name or email.
  3. Responsive Design:

    • Make the UI responsive and mobile-friendly.
  4. 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.
  5. 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).
  6. Unit Tests:

    • Write basic unit tests for components and functionality using Jest and React Testing Library.

Expectations

  • 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.

Submission Guidelines

  1. Share the GitHub repository link.
  2. Ensure the project is runnable with the following commands:
    npm install
    npm start
  3. If you implemented optional features, mention them in the README.
@white-snow216
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment