Project

Filterable and Sortable List Component

Develop a filterable and sortable list view component for an issue tracking application, allowing users to filter tickets based on severity and status.

Frontend
</>
JavaScript
3-5 hours

Start Building

About This Project

Instructions

Your assignment is to implement a list view component within Buggsy, a minimalist issue tracking software, that allows users to sort and filter tickets. This component should help users efficiently manage and prioritize their ticket inbox by displaying tickets according to selected criteria.

Our focus in this project is practicing responsive design, DOM manipulation, and working with JSON data.

Try to get your design to look as close to the provided designs as possible.

You are free to choose your development tools. Suggested technologies include HTML, CSS, JavaScript, and optionally frameworks like React or Vue. Consider using CSS preprocessors if needed.

User Stories

  1. View Tickets: As a user, I want to view a list of all bugs/issues with their title, severity, assignee, date opened, and status so that I can see everything at a glance.
  2. Sort Tickets: As a user, I want to sort the tickets by severity, assignee, date opened, and status to prioritize my work effectively. I should be able to click a column heading to sort by that column, with additional clicks changing the sort order between descending and ascending.
  3. Filter Tickets: As a user, I want to filter tickets based on severity, status, or assignee to focus on the most critical issues first.

Stretch Goals

To take your project to the next level, consider implementing one or more of the following features:

  1. Advanced Filters: Implement multi-select filters and additional filtering options such as filtering by date ranges.
  2. Drag and Drop Columns: Enable users to reorder the columns of their table display using drag and drop, to suit their workflow preferences.
  3. Performance Optimization: Implement lazy loading or pagination to handle large datasets without performance degradation.
  4. Export Options: Enable users to export the filtered and sorted list to CSV or PDF formats for reporting purposes.

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

  1. HTML/CSS: Practice using HTML to structure your component and CSS (or preprocessors) for styling and responsive layouts.
  2. JavaScript: Enhance your skills in DOM manipulation, event handling, and dynamic content generation.
  3. State Management: Learn to manage the application's state effectively, especially useful if using libraries like React or Vue.
  4. Data Handling: Work on sorting and filtering data based on user input, which is a common task in many web applications.
  5. Accessibility: Apply basic accessibility features to make your component usable for all users.
  6. Version Control: Use Git for version control to track changes and collaborate with others.

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