From 73670e07a8a9001274243fda8b639567e6caf084 Mon Sep 17 00:00:00 2001
From: dharshib <Dharshib.8@gmail.com>
Date: Wed, 29 May 2024 19:56:55 +0530
Subject: [PATCH 1/6] add projects link in menu

---
 src/Components/Menu.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Components/Menu.js b/src/Components/Menu.js
index 97dda97e..02a475f8 100644
--- a/src/Components/Menu.js
+++ b/src/Components/Menu.js
@@ -10,6 +10,10 @@ import {
   FaRegClock,
   FaCog,
   FaSignOutAlt,
+  FaCreativeCommons,
+  FaBlog,
+  FaSave,
+  FaList,
 } from "react-icons/fa";
 
 function Menu() {
@@ -31,6 +35,7 @@ function Menu() {
       <img src={logo} alt="" />
     
       <ul className="fromTop" id="mainMenu">
+        <Icon icon={<FaList />} tooltip="My projects" href="/projects"/>
         <Icon icon={<FaDelicious />} tooltip="Delicious" href="/" />
         <Icon icon={<FaShoppingCart />} tooltip="Cart" href="/" />
         <Icon icon={<FaWallet />} tooltip="Wallet" href="/" />

From e148ec281bfeeacae392bcdbb2337398749e26a3 Mon Sep 17 00:00:00 2001
From: dharshib <Dharshib.8@gmail.com>
Date: Wed, 29 May 2024 19:57:34 +0530
Subject: [PATCH 2/6] add my projects page and styles

---
 .../menu_section/my_projects/MyProjects.css   |  77 ++++++++++++
 .../menu_section/my_projects/MyProjects.js    | 116 ++++++++++++++++++
 2 files changed, 193 insertions(+)
 create mode 100644 src/Components/menu_section/my_projects/MyProjects.css
 create mode 100644 src/Components/menu_section/my_projects/MyProjects.js

diff --git a/src/Components/menu_section/my_projects/MyProjects.css b/src/Components/menu_section/my_projects/MyProjects.css
new file mode 100644
index 00000000..19b9e405
--- /dev/null
+++ b/src/Components/menu_section/my_projects/MyProjects.css
@@ -0,0 +1,77 @@
+.my-projects-wrapper .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: white;
+}
+button {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    justify-content: center;
+    font-size: 16px;
+}
+.projects-wrapper {
+    width: 100%;
+   display: flex;
+   align-items: center;
+   justify-content: left;
+   flex-wrap: wrap;
+   gap: 20px;
+   margin: 20px 0;
+}
+.project-card {
+    /* background-color: rgb(23, 23, 83); */
+    color: white;
+    flex: 1 0 300px;
+    max-width: 320px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 0 0 10px #3c395f;
+    transition: 0.3s ease-in-out;
+}
+.project-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 0 15px #6052ff;
+}
+.project-card img {
+    width: 100%;
+    height: 220px;
+}
+.project-card .top h2{
+    margin-right: auto;
+}
+.likes i {
+    display: flex;
+    gap: 5px;
+    align-items:  center;
+    color: hotpink;
+}
+small {
+color: gray;
+}
+.btn-wrapper {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.edit-btn {
+    background-color: blue;
+}
+.github-btn {
+    background-color: purple;
+}
+.edit-btn:hover {
+    background-color: rgb(1, 1, 213);
+}
+.github-btn:hover {
+    background-color: rgb(96, 1, 96);
+}
+.details {
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
\ No newline at end of file
diff --git a/src/Components/menu_section/my_projects/MyProjects.js b/src/Components/menu_section/my_projects/MyProjects.js
new file mode 100644
index 00000000..e7ae7994
--- /dev/null
+++ b/src/Components/menu_section/my_projects/MyProjects.js
@@ -0,0 +1,116 @@
+import { FaPlus } from 'react-icons/fa';
+import Menu from '../../Menu';
+import './MyProjects.css'
+import { Link } from 'react-router-dom';
+import Card1 from "../../../img/card1.jpg";
+import Card2 from "../../../img/card2.jpg";
+import Card3 from "../../../img/card3.jpg";
+import Card4 from "../../../img/card4.jpg";
+import Card5 from "../../../img/card5.jpg";
+import Card6 from "../../../img/card6.jpg";
+import CardMain from '../../CardMain';
+import { BsHeartFill } from 'react-icons/bs';
+
+
+const SampleData = [
+    {
+        id: 1,
+        name: "ToDo app",
+        noOfHearts: "10",
+        github: "/",
+        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
+        skills: ['HTML', 'CSS', 'JavaScript'],
+        uploadedDate: '2023-10-15',
+        image: Card1
+    },
+    {
+        id: 2,
+        name: "Weather app",
+        noOfHearts: "10",
+        github: "/",
+        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
+        skills: ['HTML', 'CSS', 'JavaScript'],
+        uploadedDate: '2023-10-15',
+        image: Card2
+    },
+    {
+        id: 3,
+        name: "Expense tracker",
+        noOfHearts: "10",
+        github: "/",
+        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
+        skills: ['HTML', 'CSS', 'JavaScript'],
+        uploadedDate: '2023-10-15',
+        image: Card3
+    },
+    {
+        id: 4,
+        name: "E commerce website",
+        noOfHearts: "10",
+        github: "/",
+        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
+        skills: ['HTML', 'CSS', 'JavaScript'],
+        uploadedDate: '2023-10-15',
+        image: Card4
+    }
+]
+
+function MyProjects() {
+    return (
+        <div className="container my-projects-wrapper">
+            <Menu />
+            <div className="content">
+                <div className='top fromTop'>
+                    <h1>My Projects</h1>
+                    <Link to='/new/project'><button><FaPlus size={15} /> New Project</button></Link>
+                </div>
+                <div className='projects-wrapper zoomIn'>
+
+                    {
+                        SampleData.map(project => {
+                            return (
+                                <MyProjectCard project={project}/>
+                            )
+                        })
+                    }
+                    {
+                        SampleData.map(project => {
+                            return (
+                                <MyProjectCard project={project}/>
+                            )
+                        })
+                    }
+
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default MyProjects;
+
+
+function MyProjectCard({ project }) {
+    return (
+        <div className='project-card'>
+            <img src={project.image} alt={project.name} />
+            <div className='details'>
+                <div className="top">
+                    <h2>{project.name}</h2>
+                    <div className="likes">
+                        <i>
+                            <BsHeartFill /> <span>{project.noOfHearts}</span>
+                        </i>
+                    </div>
+                </div>
+                <p>{project.description.substring(0, 75)}...</p>
+                <small>{project.uploadedDate}</small>
+                <div className="btn-wrapper">
+                    <Link to="/"><button className='edit-btn'>Edit</button></Link>
+                    <Link to={project.github}><button className='github-btn'>GitHub</button></Link>
+                </div>
+            </div>
+
+        </div>
+    )
+}
\ No newline at end of file

From 15b488bf4f704eadc617ce0f951b300e4269252d Mon Sep 17 00:00:00 2001
From: dharshib <Dharshib.8@gmail.com>
Date: Wed, 29 May 2024 19:58:01 +0530
Subject: [PATCH 3/6] add new project form page

---
 .../menu_section/new_project/NewProject.css   | 124 +++++++++++
 .../menu_section/new_project/NewProject.js    | 203 ++++++++++++++++++
 2 files changed, 327 insertions(+)
 create mode 100644 src/Components/menu_section/new_project/NewProject.css
 create mode 100644 src/Components/menu_section/new_project/NewProject.js

diff --git a/src/Components/menu_section/new_project/NewProject.css b/src/Components/menu_section/new_project/NewProject.css
new file mode 100644
index 00000000..f7d848b4
--- /dev/null
+++ b/src/Components/menu_section/new_project/NewProject.css
@@ -0,0 +1,124 @@
+* {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+form {
+    padding: 20px 0;
+    width: 100%;
+}
+.input-box {
+    width: 100%;
+    color: white;
+    margin-bottom: 18px;
+    animation-name: fadeIn;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+    opacity: 0;
+    transform: translateY(10px);
+    transform: scale(0.5);
+
+}
+input, textarea {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #201d41;
+    border: 2px solid #201d41;
+    outline: none;
+    margin: 7px 0;
+    color: whitesmoke;
+    
+}
+input:focus, textarea:focus {
+    border: 2px solid #231c6e;
+}
+span {
+    color: red;
+}
+.input-box:last-of-type {
+    display: flex;
+    gap: 10px;
+}
+.input-box:nth-of-type(2) {
+    animation-delay: 0.2s;
+}
+.input-box:nth-of-type(3) {
+    animation-delay: 0.4s;
+}
+.input-box:nth-of-type(4) {
+    animation-delay: 0.6s;
+}
+.input-box:nth-of-type(5) {
+    animation-delay: 0.8s;
+}
+.input-box:nth-of-type(6) {
+    animation-delay: 1s;
+}
+.suggesion-list {
+    width:fit-content;
+    min-width: 200px;
+    background-color: #231c6e;
+    position: relative;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+.suggesion-list li {
+    padding: 10px;
+    cursor: pointer;
+}
+.suggesion-list::before {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: -8.9px;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid #231c6e;
+}
+.suggesion-list li:hover {
+    background-color: #201d41;
+}
+.selected {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+.selected li {
+    width: fit-content;
+    padding: 7px 15px;
+    border-radius: 25px;
+    background-color: green;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+.error {
+    padding: 10px;
+    background-color: rgb(255, 207, 207);
+    color: rgb(205, 4, 4);
+    width: 100%;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 15px;
+    font-size: 14px;
+
+}
+@keyframes fadeIn {
+    0% {
+        transform: translateY(20px);
+        transform: scale(0.5);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        transform: scale(1);
+        opacity: 1;
+    }
+}
\ No newline at end of file
diff --git a/src/Components/menu_section/new_project/NewProject.js b/src/Components/menu_section/new_project/NewProject.js
new file mode 100644
index 00000000..4e605bb9
--- /dev/null
+++ b/src/Components/menu_section/new_project/NewProject.js
@@ -0,0 +1,203 @@
+import './NewProject.css'
+import Menu from '../../Menu';
+import { Link } from 'react-router-dom';
+import { FaArrowCircleLeft, FaTimes } from 'react-icons/fa';
+import { useState } from 'react';
+
+
+const Skills = ['HTML', 'CSS', 'Javascript', 'Python', 'Java', 'React js', 'Angular', 'PHP', 'TypeScript', 'Spring boot']
+
+function NewProject() {
+
+    const [data, setData] = useState({name: "", github: "", description: "", image: null, skill: ""});
+    const [suggestions, setSuggestions] = useState([])
+    const [selectedSkills, setSelectedSkills] = useState([])
+    const [error, setError] = useState("")
+
+    const onInputChange = (name, value) => {
+        setData(prev => ({...prev, [name]: value}));
+        console.log(data)
+    }
+
+    const onSkillChange = (val) => {
+        if (val === "") {
+            setSuggestions([])
+        }
+        else {
+            const arr = Skills.filter(skill => skill.toLowerCase().startsWith(val.toLowerCase())).slice(0, 5)
+            setSuggestions(arr);
+        }
+        onInputChange("skill", val)
+    }
+
+    const addSkill = (val) => {
+        if (selectedSkills.length ===5) return;
+        const existing = selectedSkills.filter(skill => val===skill)
+        if (existing.length===0) {
+            setSelectedSkills(prev => [...prev, val])
+        }
+        setSuggestions([])
+        onInputChange("skill", "")
+    }
+
+    const removeSkill = (val) => {
+        const newSkills = selectedSkills.filter(skill => skill !== val)
+        setSelectedSkills(newSkills)
+    }
+
+    const onImageChange = (e) => {
+        setData(prev => ({...prev, "image": e.target.files[0]}));
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault()
+        const err = validateData(data, selectedSkills);
+        setError(err)
+        if (err!=="") {
+            window.scroll(0, 0)
+        }
+    }
+
+
+    return (
+        <div className="container my-projects-wrapper">
+            <Menu />
+            <div className="content">
+                <div className='top fromTop'>
+                    <h1>New Project</h1>
+                    <Link to='/projects'><button><FaArrowCircleLeft size={15} /> Back to projects</button></Link>
+                </div>
+
+                <form onSubmit={handleSubmit}>
+
+                    {
+                        (error !== "") && (
+                            <small 
+                                className='error'
+                            >
+                                <FaTimes />
+                                {error}
+                            </small>
+                        )
+                    }
+                    <div className='input-box'>
+                        <label>
+                            Project Name: <span>*</span>
+                            <input 
+                                type='text' 
+                                placeholder='Eg. Weather app' 
+                                name="name"
+                                value={data.name}
+                                onChange={(e) => onInputChange(e.target.name, e.target.value)}
+                            />
+                        </label>
+                    </div>
+                    <div className='input-box'>
+                        <label>
+                            GitHub Repository Link: <span>*</span>
+                            <input 
+                                type='text' 
+                                name="github"
+                                value={data.github}
+                                placeholder='Eg. https://github.com/your-username/repository-name' 
+                                onChange={(e) => onInputChange(e.target.name, e.target.value)}
+                            />
+                            
+                        </label>
+                    </div>
+                    <div className='input-box'>
+                        <label>
+                            Description: <span>*</span>
+                            <textarea 
+                                placeholder='Share about what makes your project special?' 
+                                rows={15} 
+                                name="description"
+                                value={data.description}
+                                onChange={(e) => onInputChange(e.target.name, e.target.value)}
+                            />
+                        </label>
+                    </div>
+                    <div className='input-box'>
+                        <label>
+                            Image: <span>*</span>
+                            <input 
+                                type='file' 
+                                onChange={(e) => onImageChange(e)}
+                                accept='image/*'
+                            />
+                        </label>
+                    </div>
+                    <div className='input-box'>
+                        <label>
+                            Skills (Add skills upto to 5, so users can know what your project about.): <span>*</span>
+                            <input 
+                                type='text' 
+                                placeholder='Eg. JAVA, React js...'
+                                name='skill'
+                                value={data.skill}
+                                onChange={e => onSkillChange(e.target.value)}
+                                disabled={selectedSkills.length===5}
+                            />
+                            {
+                                (suggestions.length > 0) && (
+                                    <ul className='suggesion-list'>
+                                        {
+                                            suggestions.slice(0, 5).map(sug => {
+                                                return (
+                                                    <li 
+                                                        key={sug}
+                                                        onClick={() => addSkill(sug)}
+                                                    >
+                                                        {sug}
+                                                    </li>
+                                                )
+                                            })
+                                        }
+                                    </ul>
+                                )
+                            }
+                            <ul className='selected'>
+                                {
+                                    selectedSkills.map(skill => {
+                                        return (
+                                            <li 
+                                                key={skill}
+                                            >
+                                                {skill}
+                                                <FaTimes 
+                                                    size={13} 
+                                                    onClick={() => removeSkill(skill)}
+                                                />
+                                            </li>
+                                        )
+                                    })
+                                }
+                            </ul>
+                        </label>
+                    </div>
+                    <div className='input-box'>
+                        <button>Publish</button>
+                    </div>
+                </form>
+
+            </div>
+        </div>
+    )
+}
+
+export default NewProject;
+
+
+function validateData(data, skills) {
+    let error = "";
+    const ImageMaxSize = 10 * 1024 * 1024;
+
+    if (data.name.trim() === "" ) error+="Project name is required! "
+    if (data.github.trim() === "")  error+="Github repo link is required! "
+    if (data.description.trim() === "")  error+="Description is required! "
+    if (skills.length === 0)  error+="Select atleast one skill! "
+    if (!data.image)  error+="Project image is required! "
+    else if (data.image.size > ImageMaxSize)  error+="Select an image, not exceeding 10MB! "
+
+    return error;
+}
\ No newline at end of file

From 804cf00041941c544d167319af4898e36fa2401a Mon Sep 17 00:00:00 2001
From: dharshib <Dharshib.8@gmail.com>
Date: Wed, 29 May 2024 19:58:39 +0530
Subject: [PATCH 4/6] add my-projects and new project routes in app.js

---
 src/App.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/App.js b/src/App.js
index 32a719b5..1159c54d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,8 @@ import Settings from "./Components/Settings/SettingsPage";
 import About_us from "./Components/footer_section/about_us/About_us";
 import BlogPage from "./Components/footer_section/BlogPage/BlogPage"
 import ContactUs from "./Components/footer_section/ContactUs/contact_us";
+import MyProjects from "./Components/menu_section/my_projects/MyProjects";
+import NewProject from "./Components/menu_section/new_project/NewProject";
 
 function App() {
   return (
@@ -18,6 +20,8 @@ function App() {
           <Route path="/about" element={<About_us />} />
           <Route path="/blogs" element={<BlogPage />} />
           <Route path="/contacts" element={<ContactUs />} />
+          <Route path="/projects" element={<MyProjects />} />
+          <Route path="/new/project" element={<NewProject />} />
         </Routes>
         <Footer />
       </div>

From 9dd9e7f1ee0c3d02ebfa5e155d487efb7f1bafaf Mon Sep 17 00:00:00 2001
From: dharshib <Dharshib.8@gmail.com>
Date: Wed, 29 May 2024 20:59:06 +0530
Subject: [PATCH 5/6] add url validation for github repo link input

---
 src/Components/menu_section/new_project/NewProject.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/menu_section/new_project/NewProject.js b/src/Components/menu_section/new_project/NewProject.js
index 4e605bb9..cb581023 100644
--- a/src/Components/menu_section/new_project/NewProject.js
+++ b/src/Components/menu_section/new_project/NewProject.js
@@ -96,7 +96,7 @@ function NewProject() {
                         <label>
                             GitHub Repository Link: <span>*</span>
                             <input 
-                                type='text' 
+                                type='url' 
                                 name="github"
                                 value={data.github}
                                 placeholder='Eg. https://github.com/your-username/repository-name' 

From c73f05fe7db3ce48a1a55247fa6f5df127479a80 Mon Sep 17 00:00:00 2001
From: dharshib <Dharshib.8@gmail.com>
Date: Thu, 30 May 2024 15:10:49 +0530
Subject: [PATCH 6/6] update new project form input errors

---
 .../menu_section/new_project/NewProject.css   |  12 +-
 .../menu_section/new_project/NewProject.js    | 113 +++++++++---------
 2 files changed, 64 insertions(+), 61 deletions(-)

diff --git a/src/Components/menu_section/new_project/NewProject.css b/src/Components/menu_section/new_project/NewProject.css
index f7d848b4..7c1e64c2 100644
--- a/src/Components/menu_section/new_project/NewProject.css
+++ b/src/Components/menu_section/new_project/NewProject.css
@@ -98,17 +98,15 @@ span {
     gap: 15px;
 }
 .error {
-    padding: 10px;
-    background-color: rgb(255, 207, 207);
+    margin-bottom: 15px;
+}
+.error small {
     color: rgb(205, 4, 4);
-    width: 100%;
-    border-radius: 5px;
     display: flex;
     align-items: center;
-    gap: 15px;
-    margin-bottom: 15px;
+    gap: 7px;
     font-size: 14px;
-
+    margin-bottom: 5px;
 }
 @keyframes fadeIn {
     0% {
diff --git a/src/Components/menu_section/new_project/NewProject.js b/src/Components/menu_section/new_project/NewProject.js
index cb581023..2e4c1da1 100644
--- a/src/Components/menu_section/new_project/NewProject.js
+++ b/src/Components/menu_section/new_project/NewProject.js
@@ -9,31 +9,33 @@ const Skills = ['HTML', 'CSS', 'Javascript', 'Python', 'Java', 'React js', 'Angu
 
 function NewProject() {
 
-    const [data, setData] = useState({name: "", github: "", description: "", image: null, skill: ""});
-    const [suggestions, setSuggestions] = useState([])
+    const [data, setData] = useState({ name: "", github: "", description: "", image: null, skill: "" });
+    const [skillSuggestions, setSuggestions] = useState([])
     const [selectedSkills, setSelectedSkills] = useState([])
-    const [error, setError] = useState("")
+    const [error, setError] = useState([])
 
-    const onInputChange = (name, value) => {
-        setData(prev => ({...prev, [name]: value}));
-        console.log(data)
+    const onInputChange = (e) => {
+        const { name, value } = e.target
+        setData(prev => ({ ...prev, [name]: value }));
+        setError([])
     }
 
-    const onSkillChange = (val) => {
-        if (val === "") {
+    const onSkillChange = (e) => {
+        const { value } = e.target
+        if (value === "") {
             setSuggestions([])
         }
         else {
-            const arr = Skills.filter(skill => skill.toLowerCase().startsWith(val.toLowerCase())).slice(0, 5)
+            const arr = Skills.filter(skill => skill.toLowerCase().startsWith(value.toLowerCase())).slice(0, 5)
             setSuggestions(arr);
         }
-        onInputChange("skill", val)
+        setData(prev => ({ ...prev, "skill": value }));
     }
 
     const addSkill = (val) => {
-        if (selectedSkills.length ===5) return;
-        const existing = selectedSkills.filter(skill => val===skill)
-        if (existing.length===0) {
+        if (selectedSkills.length === 5) return;
+        const existing = selectedSkills.filter(skill => val === skill)
+        if (existing.length === 0) {
             setSelectedSkills(prev => [...prev, val])
         }
         setSuggestions([])
@@ -46,14 +48,14 @@ function NewProject() {
     }
 
     const onImageChange = (e) => {
-        setData(prev => ({...prev, "image": e.target.files[0]}));
+        setData(prev => ({ ...prev, "image": e.target.files[0] }));
     }
 
     const handleSubmit = (e) => {
         e.preventDefault()
         const err = validateData(data, selectedSkills);
         setError(err)
-        if (err!=="") {
+        if (err.length !== 0) {
             window.scroll(0, 0)
         }
     }
@@ -71,58 +73,61 @@ function NewProject() {
                 <form onSubmit={handleSubmit}>
 
                     {
-                        (error !== "") && (
-                            <small 
+                        (error.length !== 0) && (
+                            <div
                                 className='error'
                             >
-                                <FaTimes />
-                                {error}
-                            </small>
+                                {
+                                    error.map(err => {
+                                        return <small>ERROR: &nbsp;  {err} <br /></small>
+                                    })
+                                }
+                            </div>
                         )
                     }
                     <div className='input-box'>
                         <label>
                             Project Name: <span>*</span>
-                            <input 
-                                type='text' 
-                                placeholder='Eg. Weather app' 
+                            <input
+                                type='text'
+                                placeholder='Eg. Weather app'
                                 name="name"
                                 value={data.name}
-                                onChange={(e) => onInputChange(e.target.name, e.target.value)}
+                                onChange={onInputChange}
                             />
                         </label>
                     </div>
                     <div className='input-box'>
                         <label>
                             GitHub Repository Link: <span>*</span>
-                            <input 
-                                type='url' 
+                            <input
+                                type='url'
                                 name="github"
                                 value={data.github}
-                                placeholder='Eg. https://github.com/your-username/repository-name' 
-                                onChange={(e) => onInputChange(e.target.name, e.target.value)}
+                                placeholder='Eg. https://github.com/your-username/repository-name'
+                                onChange={onInputChange}
                             />
-                            
+
                         </label>
                     </div>
                     <div className='input-box'>
                         <label>
                             Description: <span>*</span>
-                            <textarea 
-                                placeholder='Share about what makes your project special?' 
-                                rows={15} 
+                            <textarea
+                                placeholder='Share about what makes your project special?'
+                                rows={15}
                                 name="description"
                                 value={data.description}
-                                onChange={(e) => onInputChange(e.target.name, e.target.value)}
+                                onChange={onInputChange}
                             />
                         </label>
                     </div>
                     <div className='input-box'>
                         <label>
                             Image: <span>*</span>
-                            <input 
-                                type='file' 
-                                onChange={(e) => onImageChange(e)}
+                            <input
+                                type='file'
+                                onChange={onImageChange}
                                 accept='image/*'
                             />
                         </label>
@@ -130,21 +135,21 @@ function NewProject() {
                     <div className='input-box'>
                         <label>
                             Skills (Add skills upto to 5, so users can know what your project about.): <span>*</span>
-                            <input 
-                                type='text' 
+                            <input
+                                type='text'
                                 placeholder='Eg. JAVA, React js...'
                                 name='skill'
                                 value={data.skill}
-                                onChange={e => onSkillChange(e.target.value)}
-                                disabled={selectedSkills.length===5}
+                                onChange={onSkillChange}
+                                disabled={selectedSkills.length === 5}
                             />
                             {
-                                (suggestions.length > 0) && (
+                                (skillSuggestions.length > 0) && (
                                     <ul className='suggesion-list'>
                                         {
-                                            suggestions.slice(0, 5).map(sug => {
+                                            skillSuggestions.slice(0, 5).map(sug => {
                                                 return (
-                                                    <li 
+                                                    <li
                                                         key={sug}
                                                         onClick={() => addSkill(sug)}
                                                     >
@@ -160,12 +165,12 @@ function NewProject() {
                                 {
                                     selectedSkills.map(skill => {
                                         return (
-                                            <li 
+                                            <li
                                                 key={skill}
                                             >
                                                 {skill}
-                                                <FaTimes 
-                                                    size={13} 
+                                                <FaTimes
+                                                    size={13}
                                                     onClick={() => removeSkill(skill)}
                                                 />
                                             </li>
@@ -189,15 +194,15 @@ export default NewProject;
 
 
 function validateData(data, skills) {
-    let error = "";
+    let errors = [];
     const ImageMaxSize = 10 * 1024 * 1024;
 
-    if (data.name.trim() === "" ) error+="Project name is required! "
-    if (data.github.trim() === "")  error+="Github repo link is required! "
-    if (data.description.trim() === "")  error+="Description is required! "
-    if (skills.length === 0)  error+="Select atleast one skill! "
-    if (!data.image)  error+="Project image is required! "
-    else if (data.image.size > ImageMaxSize)  error+="Select an image, not exceeding 10MB! "
+    if (data.name.trim() === "") errors.push("Project name is required.")
+    if (data.github.trim() === "") errors.push("Github repo link is required.")
+    if (data.description.trim() === "") errors.push("Description is required.")
+    if (skills.length === 0) errors.push("Select atleast one skill.")
+    if (!data.image) errors.push("Project image is required.")
+    else if (data.image.size > ImageMaxSize) errors.push("Select an image, not exceeding 10MB. ")
 
-    return error;
+    return errors;
 }
\ No newline at end of file