diff --git a/.gitignore b/.gitignore index b02a1ff..f770f6d 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,7 @@ dist dist-ssr *.local package-lock.json +progress.md # Editor directories and files .vscode/* @@ -23,3 +24,4 @@ package-lock.json *.njsproj *.sln *.sw? + diff --git a/index.html b/index.html index f7ac4e4..76287fe 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,33 @@ - + Race To-Do The Finish! + - Todo + + + + + + + + +
- + diff --git a/package.json b/package.json index caf6289..fdd34b2 100644 --- a/package.json +++ b/package.json @@ -10,18 +10,23 @@ "preview": "vite preview" }, "dependencies": { + "date-fns": "^4.1.0", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-router-dom": "^7.6.0", + "styled-components": "^6.1.18", + "zustand": "^5.0.4" }, "devDependencies": { "@eslint/js": "^9.21.0", "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", "@vitejs/plugin-react": "^4.3.4", + "babel-plugin-styled-components": "^2.1.4", "eslint": "^9.21.0", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^15.15.0", - "vite": "^6.2.0" + "vite": "^6.3.5" } } diff --git a/progess.md b/progess.md new file mode 100644 index 0000000..309b297 --- /dev/null +++ b/progess.md @@ -0,0 +1,192 @@ +✅ Task App Project Plan (Using Zustand + React) +🧠 Goal: +Build a responsive, accessible, and easy-to-use task manager app using Zustand for state management, React components, and clean code. + +🗓️ DAY 1 – Plan, Set Up & Display Tasks +Focus: Understand the app structure, create the store, and list tasks on screen. + +⏰ Total Time: ~4 hours (includes breaks) + +1️⃣ Session 1: Sketch & Plan (60 min) + +Why: Planning first prevents confusion later. + +Sketch your layout on paper: input field, task list, counter. + +Break it into components: TaskList, TaskItem, TaskForm, TaskCounter. + +Define a task object: + +{ +id: string, +text: string, +completed: boolean, +createdAt: string +} +Learn why Zustand helps: No prop drilling → better control of data. + +🧘 Break – 10 minutes + +2️⃣ Session 2: Set up project + Zustand store (60 min) +Why: Zustand holds your data in one place — like a digital white board. + +Create a new React app (npm create vite@latest or CRA). + +Install Zustand: npm install zustand + +Make a useTaskStore.js file. + +Add this basic store: + +import { create } from 'zustand'; + +const useTaskStore = create((set) => ( +{tasks: [], +addTask: (task) => set((state) => ({ tasks: [...state.tasks, task] })), +removeTask: (id) => set((state) => ({ +tasks: state.tasks.filter((task) => task.id !== id), +})), +})); + +export default useTaskStore; +🧘 Break – 10 minutes + +3️⃣ Session 3: List tasks on screen (60 min) +Why: Seeing results early helps you understand your app’s flow. + +Create TaskList component. + +Get tasks from Zustand using: + +const tasks = useTaskStore((state) => state.tasks); +For now, hardcode a few tasks in tasks: [...] in the store. + +Map over tasks and render them: + +tasks.map(task =>
  • {task.text}
    • ) +💡 End-of-day reflection (15 min): + +What worked? + +What was tricky? + +What do you want to understand better? + +🗓️ DAY 2 – Add, Toggle, and Count Tasks +Focus: Add tasks, mark them as completed, and display counters. + +⏰ Total Time: ~4 hours +1️⃣ Session 1: Add new task (90 min) +Why: This is how users interact with your app. + +Create TaskForm with input + button. + +On submit, call addTask() from store. + +Use: + +const newTask = { +id: crypto.randomUUID(), +text: inputValue, +completed: false, +createdAt: new Date().toISOString() +} +Clear the input after adding a task. + +🧘 Break – 10 minutes + +2️⃣ Session 2: Toggle task complete/incomplete (60 min) +Why: Interactivity makes it a real to-do app. + +Add a checkbox in TaskItem. + +In the store, add: + +toggleTaskCompleted: (id) => +set((state) => ({ +tasks: state.tasks.map((task) => +task.id === id ? { ...task, completed: !task.completed } : task +), +})), +Hook checkbox to that function using onChange. + +🧘 Break – 10 minutes + +3️⃣ Session 3: Count tasks & delete tasks (60 min) +Why: Good UX shows users what’s going on. + +Show total tasks and/or uncompleted tasks. + +Add a "Delete" button to TaskItem that calls removeTask(id). + +Use semantic HTML (like