Technigo · EmelieNyberg · Nov 20, 2024 · Nov 20, 2024 · Nov 22, 2024 · Nov 22, 2024
diff --git a/README.md b/README.md
@@ -4,31 +4,54 @@
   </a>
 </h1>
 
-# Todo - useContext Project
+# Todo - TypeScript conversion Project
 
-Replace this readme with your own information about your project.
+This project is a to-do application that uses Zustand for global state management. The app allows users to manage their tasks by adding, toggling completion, and removing tasks, while maintaining a clean and responsive design.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+### The Problem
 
-## Getting Started with the Project
+For this project, I approached the problem by starting with the basic requirements: listing tasks, toggling their completion, and adding/removing tasks. I planned the project by sketching out the app's structure and breaking the UI into smaller reusable components.
 
-### Dependency Installation & Startup Development Server
+#### Tools and Technologies:
+Zustand: To manage the global state of tasks and their completion status.
+React: For creating components and handling user interactions.
+CSS: For styling and making the app responsive across devices.
+Local Storage: To persist tasks between page reloads.
+#### My Process:
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
+Planning:
 
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
+I started by designing the app structure, identifying components like the task list, task input, and task counter.
+I defined the data model for a task to include properties like text, remove and completed.
 
-```bash
-npm i && code . && npm run dev
-```
+Implementation:
 
-### The Problem
+I built the Zustand store to handle the global state for tasks and added actions like addTask, removeTask, and toggleTaskCompletion.
+I created a responsive UI using CSS to ensure it looks great on devices ranging from 320px to 1600px in width.
+Local Storage was implemented to save and retrieve tasks so users don't lose their data on page reload.
+
+Accessibility:
+
+I followed accessibility guidelines, and my Lighthouse score was at least 95%, but I didnt get a 100% since I really liked my pink color for the header and footer.
+
+Custom Features:
+
+Added a custom checkbox style for better UI experience.
+Implemented an empty state image for when no tasks are present.
+
+#### Next Steps:
+
+If I had more time, I would:
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+Add timestamps for tasks to show when they were created.
+Implement a "complete all" button.
+Add a dark mode toggle.
+Introduce filtering options to display completed/uncompleted tasks or tasks by categories.
+Enable due dates for tasks with visual indicators for overdue ones.
 
 ### View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://happy-to-do.netlify.app/
 
 ## Instructions
 

diff --git a/index.html b/index.html
@@ -1,12 +1,18 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todos App Context API</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <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=Fuzzy+Bubbles&family=Madimi+One&display=swap" rel="stylesheet">
+  <title>My To-do</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,18 +10,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.0",
+    "@fortawesome/free-solid-svg-icons": "^6.7.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0"
+    "react-router-dom": "^6.18.0",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/node": "^22.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.7.2",
     "vite": "^4.4.5"
   }
 }