Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joozef315/task-manager
Task management application built with React, Zustand, Tailwind CSS
https://github.com/joozef315/task-manager
localstorage react tailwindcss task-manager zustand
Last synced: 3 months ago
JSON representation
Task management application built with React, Zustand, Tailwind CSS
- Host: GitHub
- URL: https://github.com/joozef315/task-manager
- Owner: JooZef315
- License: mit
- Created: 2024-08-23T11:28:24.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-15T14:38:54.000Z (4 months ago)
- Last Synced: 2024-09-25T20:01:12.308Z (4 months ago)
- Topics: localstorage, react, tailwindcss, task-manager, zustand
- Language: TypeScript
- Homepage: https://joozef315.github.io/Task-manager/
- Size: 157 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tasks Manager
This is a task management application built with React, Zustand, Tailwind CSS, and Vite. The application allows users to create, update, and manage tasks with features like filtering, sorting, and pagination. The tasks are stored in the browser's `localStorage`, ensuring persistence across sessions.
## Features
- **Dummy Login**: Users can log in with predefined credentials to explore the app's functionality.
- **CRUD Operations**: Create, read, update, and delete tasks.
- **Task Filtering**: Filter tasks by status (e.g., Not Started, In Progress, Completed).
- **Sorting**: Sort tasks alphabetically by description (ascending/descending).
- **Pagination**: View tasks with pagination controls to navigate between pages.
- **Responsive Design**: Fully responsive UI using Tailwind CSS.
## Technologies Used
- **React**: Frontend library for building user interfaces.
- **Zustand**: Lightweight state management for React applications.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **Vite**: Fast frontend build tool for development.
## Installation
To run this project locally, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/JooZef315/digitalhub-task.git
cd digitalhub-task
```
2. **Install dependencies:**
```bash
npm install
```
3. **Start the development server:**
```bash
npm run dev
```
The application will be available at http://localhost:5173
## Local Storage
Tasks are stored in the browser's localStorage. No backend is required to persist data.
## Caching
The application implements caching mechanisms to enhance performance:
- **`currentTasks` Caching**: The `currentTasks` array, which results from pagination, is cached using React's `useMemo` hook. This ensures that the tasks are only recalculated when the relevant state, such as the current page or task list, changes.
- **Local Storage as Cache**: Tasks are stored in the browser's `localStorage`, which acts as a cache for task data. This allows tasks to persist across sessions, reducing redundant data fetching.
## License
This project is licensed under the [MIT License](LICENSE).