# Frontend Assignment

# **Use React JS for the Assignment**

**Design:** 

**Display state:** 

![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e1a13657-9dc2-496d-a5c7-b27be15e9fe0/Untitled.png)

**State based on display. - Grouping by user is selected.**

![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/de6f9ade-433a-4185-a6df-4d396ea8be2d/Untitled.png)

**Grouping by priority is selected.**

![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2f8e52ba-2b96-40e8-be6a-34e25dd240eb/Untitled.png)

**Card:**

![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/896834d4-fe3d-4db5-bd76-29049439b0cb/Untitled.png)

**Api** :  https://api.quicksell.co/v1/internal/frontend-assignment 

You are required to create an interactive Kanban board application using React JS that interacts with the provided API from  https://api.quicksell.co/v1/internal/frontend-assignment

When a user clicks the "display" button and selects a grouping option, the Kanban board should dynamically adjust to reflect the user's choice.

The application should offer three distinct ways to group the data:

1. **By Status**: Group tickets based on their current status.
2. **By User**: Arrange tickets according to the assigned user.
3. **By Priority**: Group tickets based on their priority level.

Users should also be able to sort the displayed tickets in two ways:

1. **Priority**: Arrange tickets in descending order of priority.
2. **Title**: Sort tickets in ascending order based on their title.

The Kanban board should be responsive and visually appealing, with a design similar to the provided screenshots. 

**The priority levels for the tickets are as follows:**

- Urgent (Priority level 4)
- High (Priority level 3)
- Medium (Priority level 2)
- Low (Priority level 1)
- No priority (Priority level 0)

**Priority levels: (This values you will receive in the api)**

4 - Urgent

3 - High

2 - Medium

1 - Low

0 - No priority

Additionally, the application should save the user's view state even after page reload.

**Assets**

[Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/867c6222-5e73-49fb-b21f-a276ba2d258b/76bcb3fe-d025-4ad4-9247-e38c2935b859/Untitled.zip)

**Note:** 

1. Don’t use css library like Bootstrap, Tailwind, Vite, Material UI, Charka…etc
2. Don’t use NextJs or similar framework. Code in pure ReactJS
3. Write Pure CSS Code only. No library for css (bootstrap,..etc). Styled JSX can be used though

## **Evaluation Criteria**

Your work will be evaluated based on the following criteria:

> UI Should Look exactly same as screenshot.
> 
1. **Functionality**: The application should effectively fetch data from the provided API and allow users to group and sort tickets based on the given options.
2. **Visual Design**: The UI should match the provided design, including the layout, card design, and overall aesthetics.
3. **Business Logic Optimisation**
4. **Component Structuring**: Components should be appropriately structured, promoting reusability and maintainability.

THe https://api.quicksell.co/v1/internal/frontend-assignment APi response on browser is -
{
  "tickets": [
    {
      "id": "CAM-1",
      "title": "Update User Profile Page UI",
      "tag": [
        "Feature request"
      ],
      "userId": "usr-1",
      "status": "Todo",
      "priority": 4
    },
    {
      "id": "CAM-2",
      "title": "Add Multi-Language Support - Enable multi-language support within the application.",
      "tag": [
        "Feature Request"
      ],
      "userId": "usr-2",
      "status": "In progress",
      "priority": 3
    },
    {
      "id": "CAM-3",
      "title": "Optimize Database Queries for Performance",
      "tag": [
        "Feature Request"
      ],
      "userId": "usr-2",
      "status": "In progress",
      "priority": 1
    },
    {
      "id": "CAM-4",
      "title": "Implement Email Notification System",
      "tag": [
        "Feature Request"
      ],
      "userId": "usr-1",
      "status": "In progress",
      "priority": 3
    },
    {
      "id": "CAM-5",
      "title": "Enhance Search Functionality",
      "tag": [
        "Feature Request"
      ],
      "userId": "usr-5",
      "status": "In progress",
      "priority": 0
    },
    {
      "id": "CAM-6",
      "title": "Third-Party Payment Gateway",
      "tag": [
        "Feature Request"
      ],
      "userId": "usr-2",
      "status": "Todo",
      "priority": 1
    },
    {
      "id": "CAM-7",
      "title": "Create Onboarding Tutorial for New Users",
      "tag": [
        "Feature Request"
      ],
      "userId": "usr-1",
      "status": "Backlog",
      "priority": 2
    },
    {
      "id": "CAM-8",
      "title": "Implement Role-Based Access Control (RBAC)",
      "tag": [
        "Feature Request"
      ],
      "userId": "usr-3",
      "status": "In progress",
      "priority": 3
    },
    {
      "id": "CAM-9",
      "title": "Upgrade Server Infrastructure",
      "tag": [
        "Feature Request"
      ],
      "userId": "usr-5",
      "status": "Todo",
      "priority": 2
    },
    {
      "id": "CAM-10",
      "title": "Conduct Security Vulnerability Assessment",
      "tag": [
        "Feature Request"
      ],
      "userId": "usr-4",
      "status": "Backlog",
      "priority": 1
    }
  ],
  "users": [
    {
      "id": "usr-1",
      "name": "Anoop sharma",
      "available": false
    },
    {
      "id": "usr-2",
      "name": "Yogesh",
      "available": true
    },
    {
      "id": "usr-3",
      "name": "Shankar Kumar",
      "available": true
    },
    {
      "id": "usr-4",
      "name": "Ramesh",
      "available": true
    },
    {
      "id": "usr-5",
      "name": "Suresh",
      "available": true
    }
  ]
}