You’re building a product that allows companies to display a list of subprocessors on their website (example) which can be easily edited by their team. Our design team has provided a mockup for a portion of the UI. It is your job to build a static version of the frontend as well as plan a database schema that would support this product. It is not required to create a fully functional frontend and backend. This challenge should take 2-4 hours.

Design

Requirements

There are two deliverables for this challenge: A page where companies can add, edit, and remove the list of subprocessors and a plan for the supporting data model.

• Subprocessor List & Editor UI
  • The list should have columns for Name, Purpose, Location and action buttons (edit and remove). Some sample data should be displayed in the list when loaded initially.
  • When “Add Subprocessor” or “Edit” are clicked a form should be displayed within a modal.
    • The form should have:
      • Fields for Name, Purpose and Location
      • A save button
    • When the save button is clicked
      • If adding a new subprocessor it should be added to the list
      • If editing an existing subprocessor the updates should be reflected in the list
  • When “Remove” is clicked for a subprocessor a confirmation should be displayed. If confirmed, the subprocessor should be removed from the list.
  • You do not need to build a fully functional backend. Instead you can store the list in React State or Context.
  • The UI must look good and work well at all screen sizes down to 320px.
  • Use an existing UI framework (such as Chakra UI, Tailwind, Material-UI, or similar) to implement the UI.
    • Use your judgement and select the UI components that create a usable and clean design while still meeting all of the requirements.
  • Use React for the frontend framework. You may optionally use additional frameworks and/or starter kits like Next.js, create-react-app, etc.
• Data Model
  • Deliver a plan for a relational data model for the above UI which supports the following requirements:
    • A company is any business entity, e.g. Trustpage, AWS, Twitter, etc.
    • A company can have 0 or more subprocessors.
    • A company can be a subprocessor.
    • A subprocessor, which is also a company, can have 0 or more subprocessors.
    • Subprocessors should include location and purpose attributes.
  • The data model plan should include:
    • Database tables and fields
    • Types for each of the fields
    • Any relationships between tables

Delivering the completed work

• Please either send a zip file of the project to [email protected] or post the completed project on GitHub or GitLab however please keep the repository private and give access to [email protected], [email protected], [email protected], and [email protected].
• For the functional UI review please either include instructions on how we can easily run the application locally or deploy the application to Render, Heroku, Vercel, Netlify, or similar hosting environment.
• Please also create a brief README.md at the project root of your submission that explains things such as any important decisions you had to make, anything you are particularly proud of, and anything you would have added if time/resources had allowed.

Bonus

• Add validation to the form
• Use Typescript and proper type checking throughout
• Use React hooks for business logic