https://github.com/ucangun/task_minder
Task Minder is a React-based To-Do app that allows users to add, view, check, and delete tasks. Tasks are stored in Local Storage for data persistence. The app is built with React hooks and provides a responsive, user-friendly interface for managing daily tasks efficiently.
https://github.com/ucangun/task_minder
Last synced: about 2 months ago
JSON representation
Task Minder is a React-based To-Do app that allows users to add, view, check, and delete tasks. Tasks are stored in Local Storage for data persistence. The app is built with React hooks and provides a responsive, user-friendly interface for managing daily tasks efficiently.
- Host: GitHub
- URL: https://github.com/ucangun/task_minder
- Owner: ucangun
- Created: 2024-07-12T14:26:30.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-14T08:29:05.000Z (11 months ago)
- Last Synced: 2025-02-10T08:15:17.957Z (4 months ago)
- Language: CSS
- Homepage:
- Size: 472 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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! ✅