Skip to content

umitarat-dev/Persistent-Taskflow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

9 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš€ Persistent Taskflow

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.

Navigation


✨ Overview

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.

Persistent-Taskflow


πŸ“– Description

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


πŸš€ Features

  • 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.
add task task list

πŸ—‚οΈ Project Skeleton

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

πŸ› οΈ Tech Stack

  • Frontend: React.js
  • State Management: Hooks (useState, useEffect)
  • Styling: SASS / CSS3
  • Icons: React-icons

⚑ How To Use

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

πŸ“Œ About This Project

  • Built for educational purposes.
  • Demonstrates state management and local persistence in React.
  • Showcases conditional rendering and form handling.

πŸ™ Acknowledgements


πŸ“¬ Contact Information

I am always open to discussing new projects, creative ideas, or opportunities to be part of your visions.

About

πŸš€ High-performance React Task Management app with LocalStorage persistence. Features dynamic state management, responsive UI, and seamless data flow. Clean, efficient, and user-centric architecture.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors