Final

README.md

@@ -21,6 +21,12 @@ _Note : This application is made as part of internship selection process at AirT
 
 <br>
 
+## Project Explainer Video
+
+<h3><a href="https://www.loom.com/share/b3488cffb899433882031369f211e57b/">See the Video</a></h3>
+
+<br>
+
 ## Live URL
 
 The application is hosted on Netlify. Please find the link to it below.

package.json

@@ -14,7 +14,7 @@
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "18.2.0",
-    "react-scripts": "^2.1.3",
+    "react-scripts": "^5.0.1",
     "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -23,7 +23,6 @@ function App() {
           Kanban Board
         </Typography>
         <DividerBar />
-        {/* <Kanban /> */}
         <Kanban />
       </Layout>
     </>

src/components/Kanban/AddColumn.js

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { v4 as uuid } from "uuid";
+import { Modal, Box, Button, TextField } from "@mui/material";
+import randomColor from "randomcolor";
+
+const AddColumn = (props) => {
+  const [title, setTitle] = useState("");
+
+  const newColumn = {
+    id: props.columnId,
+    name: title,
+    color: randomColor({ luminosity: "light" }),
+    taskIds: [
+      {
+        id: uuid(),
+        text: "Change css img",
+        idColumn: props.columnId,
+        title: "Meeting with Airtribe",
+      },
+    ],
+  };
+
+  const style = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 500,
+    backgroundColor: "white",
+    boxShadow: 24,
+    p: 2,
+    borderRadius: 4,
+    display: "flex",
+    justifyContent: "center",
+  };
+  return (
+    <Modal open={props.openModal} onClose={props.closeModal}>
+      <Box sx={style}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            props.addColumn(newColumn);
+            props.closeModal();
+          }}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+          }}
+        >
+          <TextField
+            label="Title"
+            type="text"
+            name="title"
+            id="title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            sx={{ m: 1, width: 400 }}
+          ></TextField>
+          <Button
+            sx={{
+              m: 1,
+              color: "#aaa",
+              bgcolor: "transparent",
+              width: 400,
+              ":hover": { bgcolor: "#aaa", color: "white" },
+            }}
+            type="submit"
+          >
+            Add New Column
+          </Button>
+        </form>
+      </Box>
+    </Modal>
+  );
+};
+
+export default AddColumn;

src/components/Kanban/Column.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { Button } from "@mui/material";
+import { Button, IconButton } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import Task from "./Task";
-
+import DeleteIcon from "@mui/icons-material/Delete";
 import { Droppable } from "react-beautiful-dnd";
 import { Box, Typography } from "@mui/material";
 
@@ -51,7 +51,7 @@ const Column = (props) => {
           display: "flex",
           flexDirection: "row",
           alignItems: "center",
-          justifyContent: "flex-start",
+          justifyContent: "space-between",
           width: "100%",
         }}
       >
@@ -69,6 +69,15 @@ const Column = (props) => {
         >
           {props.columnData.name} ({props.columnData.taskIds.length})
         </Typography>
+        <IconButton
+          sx={{ right: 20 }}
+          onClick={(e) => {
+            e.preventDefault();
+            props.removeColumn(props.columnData.id);
+          }}
+        >
+          <DeleteIcon fontSize="small" />
+        </IconButton>
       </Box>
 
       <Droppable droppableId={`${props.columnData.id - 1}`}>

src/components/Kanban/Data.js

@@ -29,7 +29,12 @@ export const columnsRawData = [
     limit: taskLimitNumber,
     color: randomColor({ luminosity: "light" }),
     taskIds: [
-      { id: uuid(), text: "Blog assets", idColumn: 2, title: "Finalize Blogs" },
+      {
+        id: uuid(),
+        text: "Blog assets",
+        idColumn: 2,
+        title: "Finalize Blogs",
+      },
     ],
   },
   {
@@ -45,7 +50,12 @@ export const columnsRawData = [
         idColumn: 3,
         title: "Meeting with Airtribe",
       },
-      { id: uuid(), text: "Meeting", idColumn: 3, title: "Wash Clothes" },
+      {
+        id: uuid(),
+        text: "Meeting",
+        idColumn: 3,
+        title: "Wash Clothes",
+      },
     ],
   },
 ];

src/components/Kanban/Kanban.js

@@ -1,34 +1,38 @@
 import React, { useEffect, useState } from "react";
 import { columnsRawData } from "./Data";
 import Column from "./Column";
-
+import AddColumn from "./AddColumn";
 import KanModal from "./Modal";
 import { DragDropContext } from "react-beautiful-dnd";
-import { Box } from "@mui/material";
+import { Box, Button } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
 
 const Kanban = () => {
+  const [openColModal, setOpenColModal] = useState(false);
   const [open, setOpen] = useState(false);
   const [columns, setColumns] = useState(
     JSON.parse(window.localStorage.getItem("columns")) || columnsRawData
   );
   const [modal, setModal] = useState(false);
 
+  const closeColModal = () => {
+    setOpenColModal(false);
+  };
+
   const onDragEnd = (result) => {
     const { destination, source, draggableId } = result;
 
     if (!destination) {
       console.log("no destination");
       return;
     }
-
     if (
       destination.droppableId === source.droppableId &&
       destination.index === source.index
     ) {
       console.log("index and destination the same");
       return;
     }
-
     const start = columns[source.droppableId];
     const finish = columns[destination.droppableId];
 
@@ -45,7 +49,6 @@ const Kanban = () => {
           return c;
         } else return c;
       });
-
       const newColumnsState2 = [...newColumnsState];
       setColumns(newColumnsState2);
     } else {
@@ -119,6 +122,13 @@ const Kanban = () => {
     });
     setColumns(updatedColumns);
   };
+  const addColumn = (newColumn) => {
+    setColumns([...columns, newColumn]);
+  };
+  const removeColumn = (columnId) => {
+    const updatedColumns = columns.filter((item) => item.id !== columnId);
+    setColumns(updatedColumns);
+  };
 
   useEffect(() => {
     window.localStorage.setItem("columns", JSON.stringify(columns));
@@ -127,6 +137,30 @@ const Kanban = () => {
   return (
     <>
       <DragDropContext onDragEnd={onDragEnd}>
+        <AddColumn
+          openModal={openColModal}
+          closeModal={closeColModal}
+          addColumn={addColumn}
+          columnId={columns.length + 1}
+        />
+        <Button
+          startIcon={<AddIcon />}
+          sx={{
+            color: "#000",
+            backgroundColor: "#eee",
+            textTransform: "none",
+            ":hover": {
+              backgroundColor: "#ddd",
+            },
+            py: 1,
+            my: 2,
+          }}
+          onClick={() => {
+            setOpenColModal(true);
+          }}
+        >
+          Add New Column
+        </Button>
         <Box>
           {modal && (
             <KanModal
@@ -151,6 +185,7 @@ const Kanban = () => {
                   key={c.name}
                   openModal={openModal}
                   removeTask={removeTask}
+                  removeColumn={removeColumn}
                   editTask={editTask}
                 />
               );

src/components/Navbar.js

@@ -17,10 +17,10 @@ const Navbar = () => {
       position="static"
       sx={{
         flexGrow: 1,
-        position: "fixed",
+        position: "absolute",
         top: 0,
         width: "80vw",
-        right: 0,
+        right: 50,
         color: "#000",
         backgroundColor: "#fff",
         boxShadow: "none",

src/index.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
+
 body {
   margin: 0;
   font-family: "DM Sans" sans-serif;