A
Anonymous

Project Board - Copy this React, Tailwind Component to your project

create a project management board. Board Setup: Divide the board into four columns: TO DO (leftmost) IN PROGRESS IN REVIEW DONE (rightmost) Each Column: TO DO: List tasks or issues that are planned but not yet started. The count should be visible at the top (e.g., "TO DO 8" represents 8 tasks). IN PROGRESS: Tasks that are currently being worked on. These tasks should appear visually different to indicate ongoing work. IN REVIEW: Tasks that are completed and awaiting review. Tasks should also display related tags (e.g., BACKEND or CLIENT PAGES). DONE: This column should contain tasks that have been completed and approved. Task Cards: Layout: Each task should be a rectangular card. Each card should display the following details: Task Title: Describes the task (e.g., "Unit test workflow"). Task ID: Unique identifier for the task (e.g., "EK 49"). Tag: A category or department the task belongs to (e.g., BACKEND, CLIENT PAGES). Assignee: A small profile picture of the person assigned to the task. Optionally, have icons or status symbols beside the task IDs (e.g., lock icon, indicating privacy or confidentiality). Customization: Add a distinct color code to certain tags like “CLIENT PAGES” (purple), and adjust visual emphasis on certain tasks depending on their priority or category. Interaction Elements: Allow users to create new tasks or issues through a button or "+" sign under the “TO DO” section. There should be an indicator (e.g., a checkbox or a tick mark) to indicate tasks that are done or reviewed. Order: Keep tasks within each column sorted based on priority or latest updates. Additional Details: Some tasks may display additional notes, a small section preview, or images at the bottom to give context.

Prompt
Component Preview

About

ProjectBoard - Create a project management board with TO DO, IN PROGRESS, IN REVIEW, DONE columns. Built with React and Tailwind. Get instant access!

Share

Last updated 1 month ago