Technigo · LeonEkelund · Jan 13, 2026 · Jan 18, 2026 · Jan 18, 2026
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# Todo
+GoyoTasks is a clean, minimal, and easy-to-use web-based to-do app that helps you organize your tasks and boost productivity.
+
+Live Demo: https://goyotasks.netlify.app/
diff --git a/index.html b/index.html
@@ -4,7 +4,13 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+    <title>Goyo Tasks</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -10,18 +10,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "zustand": "^5.0.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.23",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
     "vite": "^6.2.0"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,22 @@
+import { AddTodo } from "./components/AddTodo";
+import { TaskCounter } from "./components/TaskCounter";
+import { TodoList } from "./components/TodoList";
+
 export const App = () => {
   return (
-    <h1>React Boilerplate</h1>
-  )
-}
+    <div className="min-h-screen bg-bg p-6 sm:p-8">
+      <header className="mb-8 text-center">
+        <h1 className="text-2xl sm:text-3xl font-semibold tracking-tight text-text mb-1">
+          Goyo Tasks <span className="text-text-muted ml-1 inline-block translate-y-[2px]">고요</span>
+        </h1>
+        <TaskCounter />
+      </header>
+      <div className="max-w-lg mx-auto">
+        <div className="space-y-4">
+          <AddTodo />
+          <TodoList />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/assets/goyologo.svg b/src/assets/goyologo.svg
diff --git a/src/components/AddTodo.jsx b/src/components/AddTodo.jsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import useTodoStore from "./store/useTodoStore";
+
+export const AddTodo = () => {
+  const [text, setText] = useState("");
+  const addTask = useTodoStore((state) => state.addTask);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    addTask(text);
+    setText("");
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-3">
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder="Add a new task..."
+        className="flex-1 px-4 py-3 bg-white border border-border/50 rounded-lg text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary shadow-sm transition-shadow"
+      />
+      <button
+        type="submit"
+        aria-label="Add task"
+        className="px-4 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/30 shadow-sm transition-colors"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 5v14"></path>
+          <path d="M5 12h14"></path>
+        </svg>
+      </button>
+    </form>
+  );
+};
diff --git a/src/components/EmptyState.jsx b/src/components/EmptyState.jsx
@@ -0,0 +1,7 @@
+export const EmptyState = () => {
+  return (
+    <div className="text-center py-12 px-4">
+      <p className="text-text-muted text-sm">No tasks yet. Add one above to get started.</p>
+    </div>
+  );
+};
diff --git a/src/components/TaskCounter.jsx b/src/components/TaskCounter.jsx
@@ -0,0 +1,13 @@
+import useTodoStore from "./store/useTodoStore";
+
+export const TaskCounter = () => {
+  const tasks = useTodoStore((state) => state.tasks);
+  const completedCount = tasks.filter((task) => task.completed).length;
+  const totalCount = tasks.length;
+
+  return (
+    <p className="text-sm text-text-muted">
+      {completedCount} of {totalCount} tasks completed
+    </p>
+  );
+};
diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx
@@ -0,0 +1,28 @@
+import { FiTrash2 } from "react-icons/fi";
+import useTodoStore from "./store/useTodoStore";
+
+export const TodoItem = ({ task }) => {
+  const toggleTask = useTodoStore((state) => state.toggleTask);
+  const removeTask = useTodoStore((state) => state.removeTask);
+
+  return (
+    <li className="flex items-center gap-3 p-4 bg-white rounded-lg group border border-border/50 shadow-sm hover:shadow-md transition-shadow">
+      <input
+        type="checkbox"
+        checked={task.completed}
+        onChange={() => toggleTask(task.id)}
+        className="w-4 h-4 accent-primary"
+      />
+      <span className={`flex-1 ${task.completed ? "line-through text-text-muted" : "text-text"}`}>
+        {task.text}
+      </span>
+      <button
+        onClick={() => removeTask(task.id)}
+        aria-label="Delete task"
+        className="text-text-muted hover:text-red-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
+      >
+        <FiTrash2 size={18} />
+      </button>
+    </li>
+  );
+};
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
@@ -0,0 +1,19 @@
+import useTodoStore from "./store/useTodoStore";
+import { TodoItem } from "./TodoItem";
+import { EmptyState } from "./EmptyState";
+
+export const TodoList = () => {
+  const tasks = useTodoStore((state) => state.tasks);
+
+  if (tasks.length === 0) {
+    return <EmptyState />;
+  }
+
+  return (
+    <ul className="space-y-3">
+      {tasks.map((task) => (
+        <TodoItem key={task.id} task={task} />
+      ))}
+    </ul>
+  );
+};
diff --git a/src/components/store/useTodoStore.js b/src/components/store/useTodoStore.js
@@ -0,0 +1,38 @@
+import { create } from "zustand";
+
+const useTodoStore = create((set) => ({
+  tasks: [],
+
+  addTask: (text) => {
+    if (!text.trim()) return;
+
+    set((state) => ({
+      tasks: [
+        {
+          id: Date.now(),
+          text,
+          completed: false,
+        },
+        ...state.tasks,
+      ],
+    }));
+  },
+
+  toggleTask: (id) => {
+    set((state) => ({
+      tasks: state.tasks.map((task) =>
+        task.id === id
+          ? { ...task, completed: !task.completed }
+          : task
+      ),
+    }));
+  },
+
+  removeTask: (id) => {
+    set((state) => ({
+      tasks: state.tasks.filter((task) => task.id !== id),
+    }));
+  },
+}));
+
+export default useTodoStore;
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,19 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+@import "tailwindcss";
+
+@theme {
+  --color-bg: #F8F7F4;
+  --color-surface: #F1F0EC;
+  --color-border: #DAD8D2;
+  --color-text: #1F2328;
+  --color-text-muted: #6B7075;
+  --color-primary: #4A5B6A;
+  --color-primarymuted: #E4E9ED;
 }
+
+@layer base {
+  html, body {
+    font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont,
+      "Segoe UI", sans-serif;
+  }
+}
+
diff --git a/vite.config.js b/vite.config.js
@@ -1,7 +1,8 @@
+import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [tailwindcss(), react()]
 })