Task Minder App

https://taskminderappumut.netlify.app/

Project Purpose

The primary objective of this project is to develop a practical To Do application that helps manage daily tasks. The "Task Minder" app allows users to add, view, check, and delete tasks. This project focuses on understanding and implementing state management using useState, handling events, and storing data using Local Storage in a React application.

Project Structure

|--Task_Minder(folder)
|
├── public
│     └── index.html
├── src
│    ├── components
│    │       ├── Header.jsx
│    │       ├── Welcome.jsx
│    │       └── TodoList.jsx
│    ├── App.js
│    ├── App.css
│    ├── index.js
│    └── index.css
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

Project Features

• Add Tasks: Users can add new tasks, which are saved as objects in the state and displayed in a list.
• View Tasks: Tasks are displayed with their current status (completed or not).
• Check/Uncheck Tasks: Users can mark tasks as completed or uncompleted, with the UI updating accordingly.
• Delete Tasks: Users can remove tasks from the list.
• Local Storage: Tasks are persisted in Local Storage, ensuring that they remain even after the page is refreshed.
• Responsive Design: The app is styled using CSS to ensure it is responsive and user-friendly.

Outcome

Technologies Used

• HTML: Minimal usage for structuring the React app.
• CSS: Employed for styling and enhancing the visual aspects of the app.
• JavaScript (ReactJS): Utilized for building the user interface. Key React features include:
  • State management using useState
  • Event handling (onClick, onChange)
  • Local Storage for data persistence
  • Mapping through state arrays to dynamically render components -- date-fns: Utilized for formatting dates throughout the application.

At the end of the project, will be able to;

This project has significantly enhanced my understanding and mastery of React state management, event handling, and data persistence using Local Storage. By developing the "Task Minder" application, I have gained practical experience in:

• Managing state with useState in React components.
• Handling user interactions such as adding, checking, and deleting tasks.
• Implementing persistent data storage using Local Storage in a React application.

These skills are essential for developing more complex and user-interactive applications in the future.

📝 Happy Coding! ✅