Technical Test VM

Question Type: fullstack

Table of Content

Introduction

This task is a TYPESCRIPT and REACT based homework task in which you will create a sample Single-Page-App to fulfil the requirements given below.

This task should take around 3 - 4 hours and you are free to use libraries where you see fit. Remember, this is also a showcase of your skills. When you are finished, please zip / tar your solution (without node_modules).

Starting Off

We insist you bootstrap your project using:

Task

Background

A User can manage their Video Production Projects which go through various stages. At any time a user might have multiple active projects which are in different stages of production. You will be building a Github Issues like data table which list all their projects with columns showing them essential information on the projects, and allow them to Sort and Search the project list.

  • Given a JSON API which serves list of Projects for created by a user in various stages, create a dashboard page which displays all the projects created by a user.

    A Project has the following fields which should be rendered as columns in the project list table:

    • name of type string, which is a user entered name for their project.
    • status is a string enum which indicates the current stage of the project. A project moves through the following stages in order:
      • INCOMPLETE - project brief is not complete, still being written by the user.
      • SHOOTING - project is in shooting phase.
      • EDITING - video is in editing phase.
      • FEEDBACK - a draft of the final film needs feedback
      • COMPLETED - project is deemed as completed
    • type is a string enum which will be one of the values: educational, testimonial, training, recreational or some know unique type of video.
    • createdOn is a Date on which the project was created by the user
    • archived is a bool indicating whether a project is archived by the user or still active.

  • You should also focus on creating the UI design which meets your design sense. You are free to use a component library you prefer and use Github’s UI as inspiration.

Requirements

  • Load list of projects from the given db.json file directly or via a JSON API using https://github.com/typicode/json-server.
  • Project belonging to the user should be rendered in a table with the columns Name, Type, Status, Created. Archived projects are hidden by default.
  • Create a search field which can search and filter the table rows by name
  • The table rows can be sortable by createdOn value in ascending and descending order.
  • The search field should also support case-insensitive smart label searching by is:<ANY_ENUM_FIELD>, is:archived, not:<ANY_ENUM_FIELD>, not:archived, after:<DATE>. You can also come up with your own idea. Examples:
    • is:archived is:testimonial is:completed will show archived videos of type “testimonial” and which have the status as completed or COMPLETED
    • is:educational not:incomplete after:2023-01-01 will show videos of type “educational”, which have the status as anything but incomplete or INCOMPLETE and the createdOn is after 1st of January, 2023

Deliverables

  1. The solution code in Typescript and using the React UI Framework, and using the create-react-app
  2. The codebase should be completely typed without any usage unless absolutely necessary. Please state why you ended up using any

Database File

A sample list of Project is available in this file db.json. NOTE that values in this file are generated using @faker-js/faker: - db.zip

Sample Screenshots

001