Kanban Task Manager

All data stays in your browser via localStorage.

+ +

+ setTitle(event.target.value)} + aria-label="Task title" + /> +

setDescription(event.target.value)}
+            rows={3}
+            aria-label="Task description"
+          />
+          <button type="submit">Add Task</button>
+        </form>
+      </section>
+
+      <section className="board">
+        {COLUMNS.map((column, columnIndex) => (
+          <article key={column.id} className="column">
+            <h2>{column.title}</h2>
+            <div className="task-list">
+              {groupedTasks[column.id]?.length ? (
+                groupedTasks[column.id].map((task) => (
+                  <div key={task.id} className="task">
+                    <h3>{task.title}</h3>
+                    {task.description && <p>{task.description}</p>}
+                    <div className="task-actions">
+                      <button
+                        type="button"
+                        onClick={() => updateTaskStatus(task.id, -1)}
+                        disabled={columnIndex === 0}
+                      >
+                        ←
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => updateTaskStatus(task.id, 1)}
+                        disabled={columnIndex === COLUMNS.length - 1}
+                      >
+                        →
+                      </button>
+                      <button type="button" className="danger" onClick={() => removeTask(task.id)}>
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <p className="empty">No tasks yet.</p>
+              )}
+            </div>
+          </article>
+        ))}
+      </section>
+    </main>
+  );
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..41148c1
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,136 @@
+:root {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: #1f2937;
+  background: #f5f7fb;
+  line-height: 1.5;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.app {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.header h1 {
+  margin: 0 0 8px;
+}
+
+.header p {
+  margin: 0;
+  color: #4b5563;
+}
+
+.create-task {
+  margin: 20px 0;
+}
+
+.create-task form {
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 12px;
+  padding: 16px;
+  display: grid;
+  gap: 10px;
+}
+
+input,
+textarea,
+button {
+  font: inherit;
+}
+
+input,
+textarea {
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+
+button {
+  border: none;
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: #2563eb;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.column {
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 12px;
+  padding: 12px;
+  min-height: 300px;
+}
+
+.column h2 {
+  margin: 4px 0 12px;
+  font-size: 1.1rem;
+}
+
+.task-list {
+  display: grid;
+  gap: 10px;
+}
+
+.task {
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.task h3 {
+  margin: 0 0 6px;
+  font-size: 1rem;
+}
+
+.task p {
+  margin: 0 0 10px;
+  color: #334155;
+  white-space: pre-wrap;
+}
+
+.task-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.task-actions button {
+  padding: 6px 10px;
+}
+
+.task-actions .danger {
+  margin-left: auto;
+  background: #dc2626;
+}
+
+.empty {
+  margin: 0;
+  color: #64748b;
+}
+
+@media (max-width: 900px) {
+  .board {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..f18b0f0
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..db1b19e
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()]
+});