Project Title: Build a Personalized Task Tracker with React Hooks

Project Summary

Create a fully functional Personalized Task Tracker using React Hooks! In this project, you’ll use React Hooks like useState, useEffect, useContext, and useRef to build an interactive and dynamic application for managing daily tasks. You’ll also practice integrating custom hooks to simplify and enhance your app’s functionality.

Steps to Complete the Project

Set Up the Application
- Initialize your React project using Vite.
- Set up the folder structure to keep your code organized (e.g., components/, hooks/).
Create the Task Tracker Interface
- Build a task list interface with fields to add a new task, mark tasks as completed, and delete tasks.
- Style the app to make it user-friendly and visually appealing using simple CSS or libraries like Tailwind CSS.
Manage State with useState
- Use the useState hook to manage the state of tasks (e.g., task name, completed status).
- Implement dynamic updates when tasks are added, marked complete, or deleted.
Add Lifecycle Management with useEffect
- Save tasks to local storage so users don’t lose them on page refresh.
- Load saved tasks from local storage when the app starts.
Enhance Functionality with useRef
- Use useRef to focus on the input field when adding a new task for a better user experience.
Avoid Prop Drilling with useContext
- Implement a global context to manage tasks across the application.
- Use a context provider to make task state and actions available to all components.
Create and Use a Custom Hook
- Build a custom hook, useTaskManager, to encapsulate logic for managing tasks (e.g., adding, updating, deleting).
Personalization Features
- Allow users to customize their task categories (e.g., "Work," "Personal").
- Add the ability to filter tasks based on completion status or category.

Final Deliverable

Upload the completed project to the Project Gallery. Your submission should include:

A screenshot or screen recording of the final Task Tracker app.
A brief description of your app and any additional features you added.

Andhika Wahyu P

--

1