Task Dashboard - React Project

A professional, fully-functional task management application built with React. This project demonstrates core React concepts including state management, hooks, component architecture, and local storage integration.

🌟 Features

• ✅ Add new tasks with a clean input interface
• ✅ Mark tasks as completed with checkbox functionality
• ✅ Delete tasks you no longer need
• ✅ Filter tasks by status (All, Active, Completed)
• ✅ Real-time statistics showing total, active, and completed tasks
• ✅ Data persistence using browser's localStorage
• ✅ Responsive design that works on mobile and desktop
• ✅ Modern, gradient UI with smooth animations

🚀 Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm (comes with Node.js)

Installation

1. Navigate to the project directory:

   cd task-dashboard

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open your browser: The app will automatically open at http://localhost:3000

📁 Project Structure

task-dashboard/
├── public/
│   └── index.html          # HTML template
├── src/
│   ├── App.js              # Main component with all logic
│   ├── App.css             # Styling for the application
│   ├── index.js            # Entry point
│   └── index.css           # Global styles
├── package.json            # Project dependencies
└── README.md              # This file

🎯 Key React Concepts Demonstrated

1. State Management with useState

const [tasks, setTasks] = useState([]);

• Manages the list of all tasks
• Updates trigger re-renders of the UI

2. Side Effects with useEffect

useEffect(() => {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]);

• Saves tasks to browser storage automatically
• Loads tasks when the app starts

3. Event Handling

• Form submission for adding tasks
• Click handlers for delete and toggle
• Input change handlers

4. Conditional Rendering

• Shows different messages based on filter state
• Displays empty state when no tasks exist

5. Array Methods

• .map() - Render list of tasks
• .filter() - Filter tasks by status
• Immutable updates with spread operator

💡 How It Works

Adding a Task

1. User types in the input field
2. Clicks "Add Task" or presses Enter
3. New task object is created with unique ID
4. Task is added to the state array
5. useEffect automatically saves to localStorage

Toggling Completion

1. User clicks checkbox
2. App finds the task by ID
3. Creates new array with updated task
4. State is updated, triggering re-render
5. Change is saved to localStorage

Filtering Tasks

1. User clicks filter button (All/Active/Completed)
2. Filter state is updated
3. getFilteredTasks() function returns appropriate tasks
4. Only filtered tasks are displayed

🎨 Design Choices

• Gradient Background: Modern, eye-catching purple gradient
• Card-based Layout: Clean white container with shadow for depth
• Smooth Animations: Hover effects and transitions for better UX
• Accessible Colors: High contrast for readability
• Responsive: Works on all screen sizes

🔧 Technologies Used

• React 18 - UI library
• CSS3 - Styling with modern features (Grid, Flexbox, Animations)
• localStorage API - Browser storage for data persistence
• ES6+ JavaScript - Arrow functions, destructuring, spread operator

📝 Possible Improvements (For Discussion)

If asked about future enhancements, you could mention:

• Add task editing functionality
• Implement task priorities (high/medium/low)
• Add due dates to tasks
• Create categories/tags for tasks
• Add search functionality
• Export tasks to JSON or CSV
• Add user authentication
• Sync with a backend database

🤔 Common Interview Questions & Answers

Q: Why did you use useState instead of regular variables? A: Regular variables don't trigger React re-renders. When state changes with useState, React knows to update the UI automatically.

Q: What does the dependency array in useEffect do? A: It tells React when to run the effect. An empty array [] runs once on mount. [tasks] runs whenever tasks change.

Q: Why use localStorage? A: It allows tasks to persist even when the user closes the browser. It's simple, doesn't require a backend, and works offline.

Q: How does the filter feature work? A: I maintain a filter state variable. When rendering, I use JavaScript's filter() method to return only tasks matching the current filter criteria.

👤 Author

Created as a portfolio project to demonstrate React fundamentals and modern web development practices.

📄 License

This project is open source and available for educational purposes.