📝 My Task – Task Management App

A lightweight React.js application designed to capture and categorize user-defined tasks. This project demonstrates best practices in modern front-end development, including component-based design, effective state management, and integration of key third-party libraries.

---

🚀 Project Objective

This project serves as a demonstration of clean React practices and usage of key libraries.

• Component-driven UI architecture
• Dynamic state handling using class components
• Lists and Keys usage
• Use of libraries such as styled-components for styling and uuid for unique key generation

---

🧰 Tech Stack

• React.js – Front-end JavaScript library
• JavaScript (ES6+)
• HTML5
• Styled-components – For component-scoped CSS styling
• UUID – For generating unique identifiers
• Git & GitHub – For version control and collaboration

---

✅ Features

• Users can:

  • Input task descriptions
  • Select a task category from a dropdown
  • Click "Add Task" to submit

• All tasks are displayed after submission

• Task filtering is supported:

  • Clicking on a tag filters tasks by that category
  • Clicking the tag again will remove the filter

• Implements efficient array methods:

  • map() – for rendering lists
  • filter() – for conditional task display

---

🧪 How to Use

1. Enter a task description into the input field.
2. Select a category from the dropdown menu.
3. Click the "Add Task" button to submit.
4. Use the tag buttons above the task list to filter tasks by category.

To remove the filter, click the active tag again.

---

Refer to the image below:

Design Files

Click to view

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Tasks View
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Filter View

Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Colors

Hex: #131213

Hex: #f3aa4e

Hex: #f1f5f9

Hex: #64748b

Hex: #f8f8f8

Hex: #475569

Hex: #323f4b

Hex: #000000

Hex: #ffffff

Hex: #f1f5f9

Hex: #1a171d

Hex: #f8fafc

Font-families

• Roboto

👤 Author GitHub: @bhuvan-007-github