PJ
Pratham Jaiswal

Kanban Board Assignment

Frontend Assignment Instructions Breakdown: Technology: Use React JS. Write Pure CSS for styling (no libraries like Bootstrap, Tailwind, etc.). You may use Styled JSX. Avoid using frameworks like NextJS. Design Requirements: Implement a Kanban board that groups and sorts tickets based on the following options: By Status By User By Priority Sorting functionality: By Priority (in descending order) By Title (in ascending order) The UI should be exactly as provided in the design screenshots. The Kanban board should be responsive and visually appealing. State Persistence: Ensure that the user's view state (grouping and sorting choices) is saved and maintained even after page reload. API Interaction: Use the provided API: https://api.quicksell.co/v1/internal/frontend assignment. Fetch data from the API and update the Kanban board dynamically based on user selections. Grouping Requirements: Status: Group tickets by their current status. User: Group tickets based on the assigned user. Priority: Group tickets by their priority level. Priority Levels: Urgent (Priority level 4) High (Priority level 3) Medium (Priority level 2) Low (Priority level 1) No priority (Priority level 0) Evaluation Criteria: Functionality: Correctly implement all group and sort features. Visual Design: Match the design in the screenshots. Business Logic Optimization: Ensure efficient business logic. Component Structuring: Create reusable and maintainable components. Submission: Zip your source code and upload it to this form. Host the website and provide the link. Suggested Approach: Setup: Create a new React JS project. Create a CSS file or use Styled JSX for styling (stick to the design). API Integration: Use Axios or fetch to interact with the API. Implement functions to fetch and update tickets dynamically on user interaction. State Management: Use React hooks (e.g., useState, useEffect) to manage the grouping and sorting of tickets. Use localStorage or sessionStorage to persist the user's view state. Kanban Board Structure: Break the UI into reusable components: Ticket Card Component Grouping and Sorting Controls Kanban Column Final Steps:Frontend Assignment.pdf PDF do each and every tast as intruction dop it carefully with best perfection and give me each and every thing which has ask Test the application to ensure all functionalities (grouping, sorting, responsiveness) work as expected.

Prompt
Component Preview

About

Implement a responsive Kanban board in React, featuring dynamic API integration, state persistence, and customizable grouping and sorting options.

Share

Last updated 1 month ago