npm create vite@latest zustand-todo-app
cd zustand-todo-app
npm install

npm install zustand

import { create } from "zustand";

export const useTodoStore = create((set) => ({
  todos: [],

  addTodo: (title) =>
    set((state) => ({
      todos: [
        ...state.todos,
        {
          id: Date.now(),
          title,
          completed: false,
        },
      ],
    })),

  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((todo) =>
        todo.id === id
          ? { ...todo, completed: !todo.completed }
          : todo
      ),
    })),

  deleteTodo: (id) =>
    set((state) => ({
      todos: state.todos.filter((todo) => todo.id !== id),
    })),
}));

import { useState } from "react";
import { useTodoStore } from "../store/todoStore";

function TodoForm() {
  const [title, setTitle] = useState("");
  const addTodo = useTodoStore((state) => state.addTodo);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!title.trim()) return;

    addTodo(title);
    setTitle("");
  };

  return (
    <form onSubmit={handleSubmit} className="todo-form">
      <input
        type="text"
        placeholder="أضف مهمة جديدة..."
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />

      <button type="submit">إضافة</button>
    </form>
  );
}

export default TodoForm;

import { useTodoStore } from "../store/todoStore";

function TodoList() {
  const todos = useTodoStore((state) => state.todos);
  const toggleTodo = useTodoStore((state) => state.toggleTodo);
  const deleteTodo = useTodoStore((state) => state.deleteTodo);

  if (todos.length === 0) {
    return <p className="empty-message">لا توجد مهام حتى الآن.</p>;
  }

  return (
    <ul className="todo-list">
      {todos.map((todo) => (
        <li
          key={todo.id}
          className={`todo-item ${todo.completed ? "completed" : ""}`}
        >
          <span onClick={() => toggleTodo(todo.id)}>
            {todo.title}
          </span>

          <button onClick={() => deleteTodo(todo.id)}>
            حذف
          </button>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;

import { useTodoStore } from "../store/todoStore";

function TodoStats() {
  const todos = useTodoStore((state) => state.todos);

  const totalTodos = todos.length;
  const completedTodos = todos.filter((todo) => todo.completed).length;

  return (
    <div className="todo-stats">
      <p>إجمالي المهام: {totalTodos}</p>
      <p>المهام المكتملة: {completedTodos}</p>
    </div>
  );
}

export default TodoStats;

import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";
import TodoStats from "./components/TodoStats";
import "./App.css";

function App() {
  return (
    <div className="app">
      <div className="todo-container">
        <h1>تطبيق المهام باستخدام Zustand</h1>

        <TodoForm />
        <TodoStats />
        <TodoList />
      </div>
    </div>
  );
}

export default App;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f3f4f6;
  direction: rtl;
}

.app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.todo-container {
  width: 100%;
  max-width: 500px;
  background: #ffffff;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #111827;
}

.todo-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.todo-form input {
  flex: 1;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 16px;
}

.todo-form button,
.todo-item button {
  border: none;
  cursor: pointer;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
}

.todo-form button {
  background: #2563eb;
  color: white;
}

.todo-stats {
  display: flex;
  justify-content: space-between;
  background: #eff6ff;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 20px;
  color: #1e3a8a;
  font-weight: bold;
}

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9fafb;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.todo-item span {
  cursor: pointer;
  flex: 1;
}

.todo-item.completed span {
  text-decoration: line-through;
  color: #6b7280;
}

.todo-item button {
  background: #ef4444;
  color: white;
  margin-right: 10px;
}

.empty-message {
  text-align: center;
  color: #6b7280;
}

npm run dev

const store = useTodoStore();

const todos = useTodoStore((state) => state.todos);