A modern, high-performance React Task Management application designed for efficiency. It ensures an uninterrupted user experience by utilizing LocalStorage persistence, keeping your data safe even after browser restarts.
- β¨ Overview
- π Description
- π Features
- ποΈ Project Skeleton
- π οΈ Tech Stack
- β‘ How To Use
- π About This Project
- π Acknowledgements
- π¬ Contact Information
A simple Task Tracker App built with React. Users can add, delete, and mark tasks as done. All data is persisted in localStorage, so tasks remain after page reloads.
A simple Task Tracker App built with React. Users can add, delete, and toggle tasks. Tasks are saved to localStorage so they remain after refresh.
This project demonstrates:
-
βοΈ Using React functional components and hooks (
useState,useEffect) -
πΎ LocalStorage persistence for tasks
-
π¨ Dynamic styling & conditional rendering
-
β Adding, β deleting, β marking tasks as done
- Data Persistence: Tasks stay even after page refresh via LocalStorage.
- Dynamic UI: Toggleable task entry bar and real-time state updates.
- Conditional Styling: Visual feedback for completed tasks using double-click toggle.
- Responsive Design: Seamless experience across mobile and desktop.
Full Stack - Tutorial App
|
|----readme.md
βββ public
β βββ index.html
β
βββ src
β βββ components
β β βββ Header.jsx
β β βββ AddTaskForm.jsx
β β βββ ShowTasks.jsx
β β
β βββ helper
β β βββ starterData.js
β β
β βββ pages
β β βββ Home.jsx
β β
β βββ App.js
β βββ App.scss
β βββ index.js
β βββ index.css
β
βββ package.json
βββ yarn.lock
- Frontend: React.js
- State Management: Hooks (useState, useEffect)
- Styling: SASS / CSS3
- Icons: React-icons
To clone and run this application, you'll need Git, Node.js, and a package manager (yarn or npm) installed on your computer.
# Clone this repository
$ git clone https://github.com/umitarat-dev/Persistent-Taskflow.git
# Navigate into the project folder
$ cd Persistent-Taskflow
# Install dependencies
$ yarn
$ yarn start
# or using npm
$ npm install
$ npm start- Built for educational purposes.
- Demonstrates state management and local persistence in React.
- Showcases conditional rendering and form handling.
I am always open to discussing new projects, creative ideas, or opportunities to be part of your visions.
- LinkedIn: linkedin.com/in/umit-arat
- Email: umitarat8098@gmail.com
- GitHub: github.com/umitarat-dev (Current Workspace)

