https://github.com/aria-hosseini/todo-list-

A modern, responsive TODO list application with a beautiful glassmorphic UI design. Features include task management with priority levels, Persian calendar integration, drag-and-drop reordering, and local storage persistence. Built with React and Tailwind CSS, this application offers a seamless task management experience with full RTL support.
https://github.com/aria-hosseini/todo-list-

jalali-date-picker javascript react reactjs tailwindcss web

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/aria-hosseini/todo-list-
Owner: Aria-Hosseini
Created: 2025-04-05T15:47:31.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2025-04-05T16:11:31.000Z (about 1 year ago)
Last Synced: 2025-04-05T17:20:24.085Z (about 1 year ago)
Topics: jalali-date-picker, javascript, react, reactjs, tailwindcss, web
Language: JavaScript
Homepage:
Size: 43.9 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# TODO-List Application

A modern, responsive TODO list application built with React and Tailwind CSS, featuring a beautiful glassmorphic UI design.

## Features

- **Task Management**: Create, edit, and delete tasks with ease
- **Priority Levels**: Set priority levels for your tasks (Low, Medium, High)
- **Persian Calendar**: Date selection using a Persian calendar
- **Drag and Drop**: Reorder tasks using drag and drop functionality
- **Local Storage**: Tasks are saved in your browser's local storage
- **Responsive Design**: Works on desktop, tablet, and mobile devices
- **Glassmorphic UI**: Modern, translucent design with blur effects
- **RTL Support**: Full support for right-to-left languages

## Technologies Used

- **React**: Frontend library for building user interfaces
- **Tailwind CSS**: Utility-first CSS framework
- **React Beautiful DnD**: Drag and drop functionality
- **React Multi Date Picker**: Date selection with Persian calendar support
- **Local Storage API**: For persistent data storage

## Getting Started

### Prerequisites

- Node.js (v14 or higher)
- npm or yarn

### Installation

1. Clone the repository:
```
git clone https://github.com/Aria-Hosseini/TODO-List-.git
```

2. Navigate to the project directory:
```
cd TODO-List-
```

3. Install dependencies:
```
npm install
```
or
```
yarn install
```

4. Start the development server:
```
npm start
```
or
```
yarn start
```

5. Open your browser and visit `http://localhost:3000`

## Usage

- **Add a Task**: Enter task details in the form and click the "+" button
- **Set Priority**: Select a priority level from the dropdown menu
- **Set Date**: Choose a date using the Persian calendar
- **Complete Task**: Click on a task to mark it as completed
- **Delete Task**: Click the delete icon to remove a task
- **Reorder Tasks**: Drag and drop tasks to change their order

## Project Structure

```
TODO-List-/
├── public/
├── src/
│ ├── components/
│ │ ├── DeleteConfirmModal.jsx
│ │ ├── Footer.jsx
│ │ ├── Header.jsx
│ │ ├── TodoForm.jsx
│ │ └── Todolist.jsx
│ ├── styles/
│ │ └── AnimatedBackground.css
│ ├── App.jsx
│ └── main.jsx
├── .env
├── .gitignore
├── package.json
└── README.md
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

This project is licensed under the MIT License - see the LICENSE file for details.

## Acknowledgments

- [React](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [React Beautiful DnD](https://github.com/atlassian/react-beautiful-dnd)
- [React Multi Date Picker](https://github.com/shahabyazdi/react-multi-date-picker)

---

# برنامه لیست کارها

یک برنامه مدرن و واکنش‌گرا برای مدیریت لیست کارها که با React و Tailwind CSS ساخته شده و دارای طراحی زیبای شیشه‌ای (Glassmorphic) است.

## ویژگی‌ها

- **مدیریت کارها**: ایجاد، ویرایش و حذف کارها به راحتی
- **سطوح اولویت**: تعیین سطوح اولویت برای کارها (کم، متوسط، زیاد)
- **تقویم شمسی**: انتخاب تاریخ با استفاده از تقویم شمسی
- **کشیدن و رها کردن**: تغییر ترتیب کارها با استفاده از قابلیت کشیدن و رها کردن
- **ذخیره‌سازی محلی**: ذخیره کارها در حافظه محلی مرورگر
- **طراحی واکنش‌گرا**: کار در دستگاه‌های رومیزی، تبلت و موبایل
- **رابط کاربری شیشه‌ای**: طراحی مدرن و نیمه‌شفاف با افکت‌های محو
- **پشتیبانی از RTL**: پشتیبانی کامل از زبان‌های راست به چپ

## فناوری‌های استفاده شده

- **React**: کتابخانه فرانت‌اند برای ساخت رابط‌های کاربری
- **Tailwind CSS**: فریم‌ورک CSS با رویکرد utility-first
- **React Beautiful DnD**: قابلیت کشیدن و رها کردن
- **React Multi Date Picker**: انتخاب تاریخ با پشتیبانی از تقویم شمسی
- **Local Storage API**: برای ذخیره‌سازی دائمی داده‌ها

## شروع کار

### پیش‌نیازها

- Node.js (نسخه ۱۴ یا بالاتر)
- npm یا yarn

### نصب

۱. کلون کردن مخزن:
```
git clone https://github.com/Aria-Hosseini/TODO-List-.git
```

۲. رفتن به پوشه پروژه:
```
cd TODO-List-
```

۳. نصب وابستگی‌ها:
```
npm install
```
یا
```
yarn install
```

۴. اجرای سرور توسعه:
```
npm start
```
یا
```
yarn start
```

۵. باز کردن مرورگر و رفتن به آدرس `http://localhost:3000`

## نحوه استفاده

- **افزودن کار**: وارد کردن جزئیات کار در فرم و کلیک روی دکمه "+"
- **تنظیم اولویت**: انتخاب سطح اولویت از منوی کشویی
- **تنظیم تاریخ**: انتخاب تاریخ با استفاده از تقویم شمسی
- **تکمیل کار**: کلیک روی یک کار برای علامت‌گذاری به عنوان تکمیل شده
- **حذف کار**: کلیک روی آیکون حذف برای حذف یک کار
- **تغییر ترتیب کارها**: کشیدن و رها کردن کارها برای تغییر ترتیب آنها

## ساختار پروژه

## مشارکت

مشارکت‌ها مورد استقبال قرار می‌گیرند! لطفاً آزادانه یک Pull Request ارسال کنید.

## مجوز

این پروژه تحت مجوز MIT مجوزدهی شده است - برای جزئیات به فایل LICENSE مراجعه کنید.

## قدردانی‌ها

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/aria-hosseini/todo-list-

Awesome Lists containing this project

README