Typescript react single page app

Task

Background

On the application, a User can manage their 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 lists 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 completed
  • type is an string enum which will be one of the values: "educational" , "testimonial" , training , recreational or some known unique type of video.
  • createdOn is a Date on which the project was created by the user
  • archived 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 the database from the given db.json file directly or via a JSON API using https://github.com/typicode/json-server.
• [ ] Projects 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: , is:archived , not: , not:archived after: . You can also come up with your own. 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:2022-06-02 will show videos of type ”educational”, which have the status as anything but incomplete or INCOMPLETE and the createdOn is after the 2nd of June, 2022

Deliverables

1. The solution code MUST be in Typescript and we insist you bootstrap your project using the React UI Framework.

              npx create-react-app college-task --template typescript

    2.      The codebase should be completely typed without any usage unless absolutely necessary.              Please state why you ended up using any

    3.     Provide a simple user manual (ex: using notepad) on how to run your application

- please see the attachment to see sample UI design

- For example json database file will be given later

- only need frontend side