Technigo · joheri1 · Nov 19, 2024 · Nov 21, 2024 · Nov 21, 2024 · Nov 24, 2024
diff --git a/README.md b/README.md
@@ -6,29 +6,69 @@
 
 # Todo - useContext Project
 
-Replace this readme with your own information about your project.
+The assignment is to build a Todo app using Zustand for state management.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+### Dependency Installation & Startup Development Server
 
-## Getting Started with the Project
+This project uses npm (Node Package Manager) to handle its dependencies and run the development server.
 
-### Dependency Installation & Startup Development Server
+```bash
+npm i && code . && npm run dev
+```
+Before deployment:
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
+```bash
+npm run build
+```
 
-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.
+Install Zustand: 
 
 ```bash
-npm i && code . && npm run dev
+npm i zustand
+```
+
+Install Styled components: 
+
+```bash
+npm install styled-components
+```
+
+Install Routes: 
+
+```bash
+npm install react-router-dom
 ```
 
+Font Awesome:  
+```bash
+npm install --save @fortawesome/fontawesome-svg-core  
+npm install --save @fortawesome/free-solid-svg-icons  
+npm install --save @fortawesome/react-fontawesome  
+```  
+
+### Useful resources
+
+- [This CodePen](https://codepen.io/joheri1/pen/MWNdRNX) borrowed from [DesignCouch](https://codepen.io/designcouch)   
+- [One of my previous projects](https://github.com/joheri1/project-movies-vite)
+
 ### The Problem
+- Understanding how to actually use Zustand. I wanted to make my app bigger, with several pages, to make fully use of a Global state management, but time is always a struggle.
 
-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?
+### If I had more time
+## Stretch Goals
+- Add a timestamp for each task indicating when it was created. The timestamp should be displayed as a formatted date but stored as a raw date. You can use a third-party library, such as date-fns or Moment.js for this.
+- Add a complete all button to set all tasks as completed. You could also use this opportunity to make your app look nice when there's no data. See empty states UX design for some ideas.
+- Add a button to switch dark/light mode.
+- Implement local storage
+## Advanced Stretch Goals
+- Add a date input to your new task form to set a due date on a task. It could be required, or optional - it's up to you. You could then display this in the list and style it differently when a task is overdue.
+- Add filters to display completed/uncompleted tasks, tasks created after a given date or anything else you consider important.
+- Create categories/tags for tasks so they can be grouped - for example, 'Housework', 'Shopping', etc.
+- Create projects for tasks → A project could be a group of tasks which all need to be completed and when they are completed, the project is marked as complete.
 
 ### 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.
+[Johannas Checklists](https://johannas-checklists.netlify.app/)
 
 ## Instructions
 

diff --git a/dist/assets/index-9e8d7c5d.js b/dist/assets/index-9e8d7c5d.js
diff --git a/dist/assets/index-feb71f98.css b/dist/assets/index-feb71f98.css
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,14 @@
+<!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>
+    <script type="module" crossorigin src="/assets/index-9e8d7c5d.js"></script>
+    <link rel="stylesheet" href="/assets/index-feb71f98.css">
+  </head>
+  <body>
+    <div id="root"></div>
+
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todos App Context API</title>
+    <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    rel="stylesheet"/>
+    <title>Johanna's checklists</title>
   </head>
   <body>
     <div id="root"></div>