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