Update README.md

Author: sbmsr

README.md

@@ -1,4 +1,4 @@
-[![banner](https://og-playground.vercel.app/?share=zVRpa9wwEP0rQlA2AXt97JG1SQolLSWFQmka-sUQZFsrK5ElIct7dNn_3pF3HW8O6LcS8DXzxqOZN0_a4UKVFKf4suSrTCLU2K2gV7ud-0ao5I0WZJui0VLQzcg7eCvKWWXBGYXhh9655qWtXviI4EzeWFo3ABRUWmp66KFtLF9urxU4pcv1HHbLfeaGFpYr6VAl2lr2aE6KR2ZUK8ubmjAKuCElJ8Jn7g2JzohFh4QoV9aq2kOG5WezmYfmcC-i84MjuvBQPPXQJDk6Qg-56_z8qRAo8Jb_gTWm4dElqIXEt5oUXLIU-fFJ6O8jNRfhIXq_z-THTLrPS14z1JjiKsOVtbpJg6DVQpFyvOaPvKbQwFgZFjhLOysoVF0r2QS2aus8SIIkCe6kWi55Ab3efyMrclsYru29UEzdx-NmxYI4nC70xv9X3FhLlmEYkIVy7qTlVtDSj0I_ihfhZj5fAJgrU1IDeAhGr4vjmGPoD2lSlh0FGY5Dvcnwfh9As9DqUUwv5YSGX0YzvQFK9ZOoBgWR1qrBa-nGfnI6eqWRt3QguKTEDDpIwpKyw2iTiZt14h79-C8isMI5PGYnIz_Ney24hrSuiAEe-WuaP3LrD3F-AYGjV5EgW2Wc1xDZaGKgpB50ykCoowuhn7TRMGm-ouhHpaxCX4kQ1Gw7MgNg8_3SGs0cf5OOxGFbgRl1xE6T_03s8404O27E53s5w5NOsG-MIt-iazgSc9LQ75BVmdMZ9G_sYaXd0dTgdIc7hnG6gKXw4WzE6dQZkKZlOF0S0VAP01o98F9b7Y5bu-4syOOK-lLntMSpNS3de9iSHCIqKoRaKyNKvP8L)](https://codebasementor.com?utm_source=github&utm_medium=javascript-photo-gallery&utm_campaign=github_readmes)
+[![banner](https://user-images.githubusercontent.com/2349518/235016177-e315b43d-5007-4025-84c4-03b0d849c5a4.svg)](https://codebasementor.com?utm_source=github&utm_medium=react-kanban-board&utm_campaign=github_readmes)
 
 # React Kanban Board by [CodebaseMentor](https://www.codebasementor.com?utm_source=github&utm_medium=react-kanban-board&utm_campaign=github_readmes)
 
@@ -9,9 +9,9 @@ This is an advanced project in React that allows you to create a dynamic and int
 1. The tasks aren't fetched from the server.
 2. The application doesn't handle the onDragStart, onDragOver, onDrop, and onDragEnd events.
    1. Implement handleTaskDragStart, handleTaskDragOver, handleTaskDrop, and handleTaskDragEnd to handle the drag-and-drop events.
-   2. Make sure the application doesn't incorrectly show duplicate tasks when dragged over themselves. ` && draggedTaskInfo.column !== column`
-   3. Make sure the application doesn't leave a lingering task when dragged over a column but dropped elsewhere. `handleTaskDragEnd`
-   4. Make sure the application doesn't delete a task that is dragged over it's current column. `if (column !== draggedTaskInfo.column) {`
+   2. Make sure the application doesn't incorrectly show duplicate tasks when dragged over themselves.
+   3. Make sure the application doesn't leave a lingering task when dragged over a column but dropped elsewhere.
+   4. Make sure the application doesn't delete a task that is dragged over it's current column.
 3. Task changes aren't being sent to the server.
 
 ## Learning Objectives
@@ -26,7 +26,9 @@ You will learn and gain experience with:
 ## How to start working
 
 1. Fork this repo and clone it locally.
-1. Open index.html in your browser to see the current state of the project.
+1. Install the dependencies by running npm i
+1. Run the app locally by running `npm run dev:client` to start the frontend, and `npm run dev:server` to start the backend.
+1. Open `localhost:3000` in your browser to see the current state of the project.
 1. Fix all the issues (hints are provided as TODO comments in the code)
 1. Once all your solutions are complete, create a single Pull Request to this repository
 1. Check if your solutions passes our automated tests. You need to create an account on [CodebaseMentor](https://www.codebasementor.com?utm_source=github&utm_medium=react-kanban-board&utm_campaign=github_readmes) to do this.
@@ -39,4 +41,4 @@ The best way to ask for help is to ask our Discord community.
 
 ## Want more challenges?
 
-Sign up to [view more challenges](https://app.codebasementor.com/?utm_source=github&utm_medium=javascript-photo-gallery&utm_campaign=github_readmes) and [join our Discord](https://discord.gg/6VsSMZaM7q) to get notified when new challenges are released.
+Sign up to [view more challenges](https://app.codebasementor.com/?utm_source=github&utm_medium=react-kanban-board&utm_campaign=github_readmes) and [join our Discord](https://discord.gg/6VsSMZaM7q) to get notified when new challenges are released.

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React + TypeScript Project</title>
+    <title>React Kanban by Codebase Mentor</title>
   </head>
   <body>
     <div id="root"></div>

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-typescript",
+  "name": "react-kanban-board",
   "version": "1.0.0",
   "type": "module",
   "description": "React TypeScript, using Vite bundler",
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "keywords": [],
-  "author": "",
+  "author": "CodebaseMentor.com",
   "license": "ISC",
   "devDependencies": {
     "@types/react": "^18.0.15",

package.json

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import "./App.css";
-import { fetchTasks, updateTasks } from "./api";
 import KanbanColumn from "./components/KanbanColumn";
 import { Column, DraggableTask, DraggedTaskInfo, Task } from "./types";
 
@@ -14,60 +13,38 @@ export default function App() {
 
   // Fetch Tasks
   useEffect(() => {
-    (async () => {
-      const tasks = await fetchTasks();
-      setKanbanColumns(tasks);
-    })();
+    // TODO: Pull state from json-server
+    // Hint: You may want to use the fetchTasks function from api/index.tsx
   }, []);
 
+  // Hint: You will need these states for dragging and dropping tasks
   const [draggedTaskInfo, setDraggedTaskInfo] = useState<DraggedTaskInfo | null>(null);
   const [hoveredColumn, setHoveredColumn] = useState<Column | null>(null);
 
   const handleTaskDragStart = (task: Task, column: Column) => {
-    setDraggedTaskInfo({ task, column });
+    // TODO: Implement functionality for when the drag starts
   };
 
   const handleTaskDragOver = (e: React.DragEvent, column: Column) => {
     e.preventDefault();
-    if (column !== hoveredColumn) {
-      setHoveredColumn(column);
-    }
+    // TODO: Implement functionality for when an item is being dragged over a column
+    // Hint: Remember to check if the item is being dragged over a new column
   };
 
   const handleTaskDrop = (column: Column) => {
-    if (draggedTaskInfo) {
-      // If the task is dropped in a different column, remove it from the old one and add it to the new one.
-      if (column !== draggedTaskInfo.column) {
-        const taskIndex = kanbanColumns[draggedTaskInfo.column].findIndex(
-          (task) => task.id === draggedTaskInfo.task.id
-        );
-        if (taskIndex > -1) {
-          const newColumnTasks = [...kanbanColumns[column], draggedTaskInfo.task];
-          const oldColumnTasks = [...kanbanColumns[draggedTaskInfo.column]];
-          oldColumnTasks.splice(taskIndex, 1);
-          const newState = { ...kanbanColumns, [column]: newColumnTasks, [draggedTaskInfo.column]: oldColumnTasks };
-          setKanbanColumns(newState);
-          // Update the tasks in the db
-          updateTasks(newState).catch((error) => console.error(error));
-        }
-      }
-    }
-
-    setDraggedTaskInfo(null); // Reset dragInfo state
-    setHoveredColumn(null); // Reset overColumn state
+    // TODO: Implement functionality for when the item is dropped
+    // Hint: Make sure to handle the cases when the item is dropped in the same column or in a new column
   };
 
   const getTasksForColumn = (column: Column): DraggableTask[] => {
-    let tasks = kanbanColumns[column];
-    if (draggedTaskInfo && hoveredColumn === column) {
-      tasks = [...tasks, { ...draggedTaskInfo.task, isDragging: true }];
-    }
-    return tasks;
+    // TODO: Handle the bug where card dragged over itself shows duplicate
+    // Hint: Consider how you can use the dragInfo and overColumn states to prevent this
+    return [{ id: "1", name: "Task 1", isDragging: false }];
   };
 
   const handleTaskDragEnd = () => {
-    setDraggedTaskInfo(null); // Reset dragInfo state
-    setHoveredColumn(null); // Reset overColumn state
+    // TODO: Implement functionality for when the drag ends
+    // Hint: Remember to handle the case when the item is released back to its current column
   };
 
   return (

src/App.tsx

@@ -1,20 +1,10 @@
 const apiUrl = "http://localhost:3001";
 
-export const fetchTasks = async () => {
-  const response = await fetch(`${apiUrl}/tasks`);
-  const data = await response.json();
-  return data;
+export const fetchKanbanTasks = async () => {
+  // TODO: Implement functionality to fetch tasks from the server
 };
 
-export const updateTasks = async (tasks: any) => {
-  const response = await fetch(`${apiUrl}/tasks`, {
-    method: "PUT",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(tasks),
-  });
-
-  const data = await response.json();
-  return data;
+export const updateKanbanTasks = async (tasks: any) => {
+  // TODO: Save the new order of the items when tasks are modified to the server
+  // Hint: You may want to use the fetch API with a "PUT" method
 };