Project

Subtask Creation Workflow for SaaS App

Implement an interface for users to add and assign subtasks within a Project Management SaaS application.

Frontend
</>
JavaScript
3-5 hours

Start Building

About This Project

Instructions

The PrestoProject application gives users the ability to create tasks within a workspace. But not all tasks are the same shape and size, so your assignment is to implement a way for users to add subtasks to the application.

Your implementation should adhere closely to provided mockups, ensuring a high-fidelity realization of the design vision.

This project will focus on front-end development, with data storage handled locally to simulate interaction with a backend system. We will provide a json file with a sample data model.

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

User Stories

  • Subtask Creation: As a user, I want to be able to add subtasks to a given main task so that I can break down the work into smaller, more manageable parts.
  • Subtask Editing: As a user, I want the ability to edit details of a subtask.
  • Subtask Completion: As a user, I want the ability to mark a task as completed to keep the project updated with the latest progress.
  • Subtask Count Update: As a user, when I add or complete a subtask, the current counts of subtasks should be updated appropriately.

Acceptance Criteria

Functionality

Ensure your solution works as intended, providing users with all the required functionality. Additionally, ensure that the implementation adheres to the design specifications. If you decide to make changes that you feel improve the design, be sure to note those when submitting your solution.

Code Quality

  • Your code should be clear, understandable, and concise.
  • Be sure to provide a README file with instructions on how to setup, run, and test the application. Document major components and functions.
  • Organize your files and directories in a logical and standard manner according to the best practices of whichever framework you choose.
  • Implement robust error handling with user-friendly error messages where appropriate.
  • Utilize version control effectively. Commit often, with clear, concise commit messages.

Stretch Goals

  • Drag and Drop Interface: Implement a drag-and-drop functionality for rearranging subtasks to enhance user interaction.
  • Subtask Dependencies: Allow users to set dependencies between subtasks, where completing one subtask may enable the start of another.
  • Toast Notifications: Utilize toast notifications to confirm the success or failure of user interactions like saving a task.

Coming Soon

Create an account to start building other awesome projects and get notified when this project drops.

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 the subtask list and subtask create/edit views are optimized for various devices using media queries.
  • 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.
  • Clean Code and Organization
  • Error Handling and Performance
  • 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