Project

Task Card Component and Detail View

Master foundational frontend development and responsive design skills by building a reusable Task Card and accompanying Task Detail View for a Project Management SaaS App.

Frontend
</>
JavaScript
3-5 hours

Start Building

About This Project

Instructions

This project involves developing a detailed task view and a reusable task card component for a project management application. Your assignment includes designing a task card component that displays essential information and can be used throughout the application and creating an interactive task detail page that activates when a user clicks on a task card.

The aim is to ensure that both components are user-friendly, adhere to responsive design principles, and align with provided mockups for clarity and ease of navigation.

You may use any tools you wish in order to build the frontend.

We have provided a JSON file with sample user and task information that you can use to populate the task card and detail view.

Objectives

  • Develop a Reusable Task Card Component: Design a task card that summarizes key information such as task priority, status, and due date, which can be used consistently across different parts of the application.
  • Detailed Task Information: Develop a task detail page that displays all critical information about a task, including its priority, status, assignee, due date, and subtasks.
  • Responsive and Accessible Design: Ensure the task detail page is accessible and fully responsive, providing a seamless user experience on both desktop and mobile devices.

User Stories

  1. Task Overview Accessibility:
    • As a user, I want to quickly see important details like task priority, status, and due date on a task card so I can quickly analyze information across multiple tasks and make quick decisions.
  2. Detailed Task Interaction:
    • As a user, when I click on a task card, I expect to be taken to a detailed view where I can see extensive information such as subtasks and assignee details and interact with the task.
  3. Consistent Component Use:
    • As a user, I want to see task information displayed consistently throughout the application.
  4. Cross-Device Usability:
    • As a user, I need the interface to be adaptable and easy to navigate on any device, ensuring that I can manage tasks effectively regardless of where I am or what device I am using.

Stretch Goals

To go above and beyond, consider adding one or more of the following features:

  • Task Modification: Enable users to edit task details directly from the detail page, including priority, due date, and assignees.
  • Collaboration Enhancement: Add a comment section where team members can discuss the task, update progress, or ask questions.
  • Activity Tracking: Incorporate a history or activity log showing changes made to the task over time.

Let's Start Building!

This project and many others like it are available with a Curricular account. Get started today.

Sign Up

Already have an account? Sign In

Includes

  • Detailed User Stories
  • Figma Design File
  • Image files of the target layout
  • Starter Code and README file

Skills Practiced

  • Responsive Web Design: Ensure that both the task card and detail view are optimized for various devices using CSS Flexbox, Grid, and media queries.
  • Component-based Architecture: Use a modern development framework like React or Vue to create reusable components, including the task cards, that maintain state and functionality across different parts of the application.
  • UI/UX Design: Follow the provided design mockups closely to develop a user-friendly and visually appealing detail page.
  • State Management and Event Handling: Manage application state and user interactions within the task detail view, ensuring that edits and interactions are reflected in real-time.
  • Version Control: Use Git for version control, documenting your development process and changes.

FAQ

Why should I build this project instead of one from scratch?

In a professional context, you're rarely starting from scratch. Curricular Projects are designed to give you a constrained real world problem so you can focus on practicing the essential skills you'll use as a professional developer, and to surface specific areas to continue studying.

Can I get help if I'm stuck on a project?

Our projects are designed to be a real world assessment of your skills, like the take home assignment during a job interview. Getting yourself unstuck is part of the skills measured. As a result, we offer very little help and direction.

However, if you encounter issues with the setup, or if you find something isn't working right that should be working, you can contact us at support@curricular.dev and we'll help you out.

Do you provide official solutions to projects?

We do not provide official solutions to projects. There are many ways to solve each of our projects. Coding is a journey, so our goal isn't for you to get the "right answer." Instead, our projects are about you flexing your skills to arrive at a solution, practicing talking about your code, and giving you helpful feedback on ways to improve.

Can I get feedback on my work?

Yes! Subscribers to Curricular Pro get their project solutions graded, with personalized feedback.

Where can I ask a question that isn't answered here?

Email us at support@curricular.dev or chat with us.

Start practicing like a pro

Create a Curricular account and start leveling up in minutes.

Join for Free