Technigo · mimmi-eriksson · May 22, 2025 · May 22, 2025 · May 22, 2025 · May 23, 2025
diff --git a/README.md b/README.md
@@ -1 +1,31 @@
-# Todo
+# Todo App 
+A simple todo app built in React using Zustand for state management. \
+Users are able to add, list, filter and remove tasks, and toggle whether a task is completed or not.
+
+## Features
+* Each task has a time stamp when it was created
+* A task can be marked as completed (or uncompleted) by clicking the task
+* A task can be deleted by clicking the trash bin icon next to each task
+* All tasks can be deleted by clicking the trash bin icon in the top control bar
+* All tasks can be marked as completed by clicking the check box icon in the top control bar
+* Uncompleted tasks can be filtered out by clicking the funnel icon in the top control bar
+* Toggle between light/dark mode by clicking the toggle button in the header
+
+## Installation & Usage
+Install the required dependencies by running the following command:
+```
+npm install
+```
+Start the server by running:
+```
+npm run dev
+```
+
+## Link
+https://task-completed.netlify.app/
+
+## Screenshots
+<span>
+<img src="./public/TodoApp-screenshot.png" alt="Screenshot of todo app - dark mode." height="400">
+<img src="./public/TodoApp-screenshot-light.png" alt="Screenshot of todo app - light mode." height="400">
+</span>
diff --git a/index.html b/index.html
@@ -1,16 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <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>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script
-      type="module"
-      src="./src/main.jsx">
-    </script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link
+    rel="icon"
+    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>✔️</text></svg>"
+  />
+  <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=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet"
+  >
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <title>Todo</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script
+    type="module"
+    src="./src/main.jsx"
+  >
+  </script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -10,8 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.7",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.511.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.7",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

diff --git a/public/TodoApp-screenshot-light.png b/public/TodoApp-screenshot-light.png
diff --git a/public/TodoApp-screenshot.png b/public/TodoApp-screenshot.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,16 @@
+import Footer from "./sections/Footer"
+import Header from "./sections/Header"
+import Main from "./sections/Main"
+
 export const App = () => {
   return (
-    <h1>React Boilerplate</h1>
+    <>
+      <div className="flex flex-col min-h-screen">
+        <Header />
+        <Main />
+        <Footer />
+      </div>
+
+    </>
   )
 }
diff --git a/src/components/Controls.jsx b/src/components/Controls.jsx
@@ -0,0 +1,60 @@
+import useTaskStore from "../stores/useTaskStore"
+import { useState } from "react"
+import ControlsButton from "./ControlsButton"
+import { Trash2, Funnel, SquareCheck, Plus } from "lucide-react"
+
+const Controls = () => {
+  const addTask = useTaskStore(state => state.addTask)
+  const completeAll = useTaskStore(state => state.completeAll)
+  const deleteAll = useTaskStore(state => state.deleteAll)
+  const hideCompleted = useTaskStore(state => state.hideCompleted)
+
+  const [newTask, setNewTask] = useState("")
+  const [inputVisible, setInputVisible] = useState(false)
+
+  const toggleInputVisible = () => {
+    setInputVisible(!inputVisible)
+  }
+
+  const handleChange = (event) => {
+    setNewTask(event.target.value)
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+
+    if (newTask) {
+      addTask(newTask.trim())
+      setNewTask("")
+      setInputVisible(false)
+    } else {
+      setInputVisible(false)
+    }
+  }
+
+  return (
+    <div className="bg-surface dark:bg-surface-dark border border-border dark:border-border-dark w-full px-2 py-4 h-20 flex items-center max-w-[1024px]">
+      <form className="w-full" onSubmit={handleSubmit}>
+        <div className="flex items-center gap-2 justify-stretch">
+          {!inputVisible &&
+            <label htmlFor="addTask" className="bg-white dark:bg-background-dark rounded-lg border border-border dark:border-border-dark text-accent dark:text-accent-dark hover:text-hover dark:hover:text-hover-dark cursor-pointer flex items-center gap-2 p-2 grow" onClick={() => toggleInputVisible()}>
+              <Plus size={28} />
+              <p className="font-medium text-xl">Add task</p>
+            </label>}
+          {inputVisible &&
+            <input className="bg-white dark:bg-background-dark rounded-lg border border-border dark:border-border-dark p-2 grow" type="text" id="addTask" placeholder="Type here..." value={newTask} onChange={handleChange} />
+          }
+          {inputVisible && <button className="font-medium text-xl text-accent dark:text-accent-dark hover:text-hover dark:hover:text-hover-dark cursor-pointer px-2 py-1" type="submit">Done</button>}
+          {!inputVisible &&
+            <div className="flex items-center gap-1 md:gap-2">
+              <ControlsButton onClick={() => hideCompleted()} icon={Funnel} ariaLabel="Filter" />
+              <ControlsButton onClick={() => completeAll()} icon={SquareCheck} ariaLabel="Complete all" />
+              <ControlsButton onClick={() => deleteAll()} icon={Trash2} ariaLabel="Delete all" />
+            </div>}
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default Controls
diff --git a/src/components/ControlsButton.tsx b/src/components/ControlsButton.tsx
@@ -0,0 +1,25 @@
+type ControlsButtonProps = {
+  icon: React.ElementType
+  onClick?: () => void
+  ariaLabel?: string
+}
+
+const ControlsButton = ({
+  icon: Icon,
+  onClick,
+  ariaLabel = 'icon button',
+}: ControlsButtonProps): JSX.Element => {
+  return (
+    <button
+      onClick={onClick}
+      aria-label={ariaLabel}
+      className="text-lg font-medium text-accent dark:text-accent-dark hover:text-hover dark:hover:text-hover-dark cursor-pointer flex items-center gap-1 p-1"
+    >
+      <Icon className="w-8 h-8" />
+      <p className="hidden md:inline">{ariaLabel}</p>
+    </button>
+  );
+};
+
+export default ControlsButton;
+
diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx
@@ -0,0 +1,14 @@
+import useTaskStore from "../stores/useTaskStore"
+
+const Counter = () => {
+  const tasks = useTaskStore(state => state.tasks)
+  const unCompletedTasks = tasks.filter(task => !task.isCompleted)
+
+  return (
+    <div className="py-8 text-center text-text-secondary dark:text-text-secondary-dark">
+      <p> {unCompletedTasks.length} of {tasks.length} tasks remaining</p>
+    </div>
+  )
+}
+
+export default Counter
diff --git a/src/components/Empty.jsx b/src/components/Empty.jsx
@@ -0,0 +1,11 @@
+const Empty = () => {
+  return (
+    <div className="text-2xl text-center py-20 flex flex-col justify-center items-center gap-5 flex-grow">
+      <p className="text-6xl">🏖️</p>
+      <p>Nothing to do?</p>
+      <p>Enjoy it while it lasts.</p>
+    </div>
+  )
+}
+
+export default Empty
diff --git a/src/components/SocialButton.tsx b/src/components/SocialButton.tsx
@@ -0,0 +1,26 @@
+type SocialButtonProps = {
+  icon: React.ElementType
+  link: string
+  ariaLabel?: string
+}
+
+const SocialButton = ({
+  icon: Icon,
+  link = "",
+  ariaLabel = 'icon button',
+}: SocialButtonProps): JSX.Element => {
+  return (
+    <li>
+      <a
+        className="hover:text-hover dark:hover:text-hover-dark p-2"
+        href={link}
+        target="_blank"
+        aria-label={ariaLabel}
+      >
+        <Icon className="w-4 h-4" />
+      </a>
+    </li>
+  );
+};
+
+export default SocialButton;
diff --git a/src/components/Task.jsx b/src/components/Task.jsx
@@ -0,0 +1,27 @@
+import { Trash2 } from "lucide-react"
+import TaskButton from "./TaskButton"
+import useTaskStore from "../stores/useTaskStore"
+import { formatRelative } from "date-fns"
+
+const Task = ({ task }) => {
+  const toggleCompleted = useTaskStore(state => state.toggleCompleted)
+  const deleteTask = useTaskStore(state => state.deleteTask)
+
+  return (
+    <div className="flex justify-between items-center pl-3 border-b-1 border-b-border dark:border-b-border-dark">
+      <button onClick={() => toggleCompleted(task.id)}>
+        <div className="flex flex-col items-start gap-1">
+          <p className={`${task.isCompleted ? 'line-through' : 'no-underline'} decoration-red-500 cursor-pointer`}>
+            {task.task}
+          </p>
+          {!task.isCompleted && <p className="text-sm text-text-secondary dark:text-text-secondary-dark">created {formatRelative(task.id, new Date())}</p>}
+        </div>
+      </button>
+      <div>
+        <TaskButton onClick={() => deleteTask(task.id)} icon={Trash2} ariaLabel="Delete task" />
+      </div>
+    </div>
+  )
+}
+
+export default Task
diff --git a/src/components/TaskButton.tsx b/src/components/TaskButton.tsx
@@ -0,0 +1,25 @@
+type TaskButtonProps = {
+  icon: React.ElementType
+  onClick?: () => void
+  ariaLabel?: string
+}
+
+const TaskButton = ({
+  icon: Icon,
+  onClick,
+  ariaLabel = 'icon button',
+}: TaskButtonProps): JSX.Element => {
+  return (
+    <button
+      onClick={onClick}
+      aria-label={ariaLabel}
+      className="bg-surface dark:bg-surface-dark border-l-1 border-l-border dark:border-l-border-dark text-accent dark:text-accent-dark hover:text-hover dark:hover:text-hover-dark cursor-pointer p-4"
+    >
+      <Icon className="w-8 h-8" />
+    </button>
+  )
+}
+
+export default TaskButton
+
+
diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx
@@ -0,0 +1,21 @@
+import Task from "./Task"
+import Empty from "./Empty"
+import Counter from "./Counter"
+import useTaskStore from "../stores/useTaskStore"
+
+const TaskList = () => {
+  const tasks = useTaskStore(state => state.tasks)
+  return (
+    <div className="bg-white dark:bg-background-dark border-x-1 border-border dark:border-border-dark w-full flex-grow flex flex-col max-w-[1024px]">
+      {tasks.length > 0 && (
+        <div className="flex flex-col">
+          {tasks.map(task => <Task key={task.id} task={task} />)}
+        </div>
+      )}
+      {tasks.length > 0 && <Counter />}
+      {tasks.length === 0 && <Empty />}
+    </div>
+  )
+}
+
+export default TaskList
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,28 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Work Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
+
+@theme {
+  --color-primary: #EFF6FF;
+  --color-secondary: #1E3A8A;
+  --color-background: #FFFFF;
+  --color-surface: #F9FAFB;
+  --color-border: #E5E7EB;
+  --color-text: #111827;
+  --color-text-secondary: #525967;
+  --color-accent: #064DC1;
+  --color-hover: #03378E;
+  --color-primary-dark: #1E3A8A;
+  --color-secondary-dark: #DBEAFE;
+  --color-background-dark: #1F2937;
+  --color-surface-dark: #111827;
+  --color-border-dark: #374151;
+  --color-text-dark: #F9FAFB;
+  --color-text-secondary-dark: #ADB4C0;
+  --color-accent-dark: #72B9FF;
+  --color-hover-dark: #BADDFF;
+
+}
diff --git a/src/sections/Footer.jsx b/src/sections/Footer.jsx
@@ -0,0 +1,22 @@
+import { Github, Linkedin } from 'lucide-react'
+import SocialButton from '../components/SocialButton'
+import useThemeStore from '../stores/useThemeStore'
+
+const Footer = () => {
+  const theme = useThemeStore(state => state.theme)
+  return (
+    <footer>
+      <div className={`${theme === 'dark' ? 'dark' : ''} bg-primary dark:bg-secondary text-secondary dark:text-primary border-t border-t-border dark:border-t-border-dark text-sm flex items-center justify-center gap-4 py-1`}>
+        <p>&copy; {new Date().getFullYear()} Mimmi Eriksson</p>
+        <ul
+          className="flex gap-2"
+        >
+          <SocialButton link="https://github.com/mimmi-eriksson" icon={Github} ariaLabel="GitHub profile" />
+          <SocialButton link="https://www.linkedin.com/in/mimmi-aj-eriksson/" icon={Linkedin} ariaLabel="LinkedIn profile" />
+        </ul>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer