feat: add confetti

package-lock.json

@@ -21,6 +21,7 @@
         "focus-trap-react": "10.2.3",
         "framer-motion": "10.16.4",
         "howler": "2.2.4",
+        "js-confetti": "0.12.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hotkeys-hook": "3.2.1",
@@ -18316,6 +18317,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/js-confetti": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/js-confetti/-/js-confetti-0.12.0.tgz",
+      "integrity": "sha512-1R0Akxn3Zn82pMqW65N1V2NwKkZJ75bvBN/VAb36Ya0YHwbaSiAJZVRr/19HBxH/O8x2x01UFAbYI18VqlDN6g=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -37,6 +37,7 @@
     "focus-trap-react": "10.2.3",
     "framer-motion": "10.16.4",
     "howler": "2.2.4",
+    "js-confetti": "0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "3.2.1",

src/lib/confetti.ts

@@ -0,0 +1,18 @@
+import JSConfetti from 'js-confetti';
+
+export const addConfetti = () => {
+  const jsConfetti = new JSConfetti();
+
+  jsConfetti.addConfetti({
+    confettiColors: [
+      '#6366f1',
+      '#8b5cf6',
+      '#a855f7',
+      '#ec4899',
+      '#f43f5e',
+      '#fb923c',
+      '#eab308',
+      '#22c55e',
+    ],
+  });
+};

src/stores/todo.ts

@@ -3,6 +3,8 @@ import { createJSONStorage, persist } from 'zustand/middleware';
 import merge from 'deepmerge';
 import { v4 as uuid } from 'uuid';
 
+import { addConfetti } from '@/lib/confetti';
+
 interface TodoStore {
   addTodo: (todo: string) => void;
   deleteTodo: (id: string) => void;
@@ -71,6 +73,10 @@ export const useTodoStore = create<TodoStore>()(
             };
           }),
         });
+
+        if (get().doneCount() === get().todos.length) {
+          addConfetti();
+        }
       },
     }),
     {