From 9ef2ab3129c585a976f3931b66046d6e0f5adcb7 Mon Sep 17 00:00:00 2001 From: Janvi Date: Sun, 27 Oct 2024 21:43:36 +0530 Subject: [PATCH 1/3] project details page completed --- data.json | 3 + src/app/(pages)/Projects/Card.jsx | 18 +- src/app/(pages)/Projects/[id]/page.jsx | 421 +++++++++++++++++++++++++ src/app/(pages)/Projects/page.jsx | 80 ++--- 4 files changed, 481 insertions(+), 41 deletions(-) create mode 100644 src/app/(pages)/Projects/[id]/page.jsx diff --git a/data.json b/data.json index 5d6a2d9..ba84b9d 100644 --- a/data.json +++ b/data.json @@ -408,6 +408,7 @@ ], "projects": [ { + "id": "1", "projectTitle": "AI-Powered Chatbot Development", "projectOverview": "This project aims to develop an AI-powered chatbot to enhance customer service efficiency and improve user experience on our platform.", "projectStartDate": "2024-01-15", @@ -485,6 +486,7 @@ "youtubeLink": "https://www.youtube.com/watch?v=dQw4w9WgXcQ" }, { + "id": "2", "projectTitle": "Website Redesign", "projectOverview": "A complete overhaul of the company website to improve navigation, aesthetics, and functionality.", "projectStartDate": "2024-02-01", @@ -558,6 +560,7 @@ "youtubeLink": "https://www.youtube.com/watch?v=5aA7i_8v1h8" }, { + "id": "3", "projectTitle": "Mobile App Development for E-Commerce", "projectOverview": "Development of a mobile application to enhance customer shopping experience and streamline order processes.", "projectStartDate": "2024-03-10", diff --git a/src/app/(pages)/Projects/Card.jsx b/src/app/(pages)/Projects/Card.jsx index 32a0f2b..9eefaa0 100644 --- a/src/app/(pages)/Projects/Card.jsx +++ b/src/app/(pages)/Projects/Card.jsx @@ -1,6 +1,7 @@ -import React from 'react'; -import { FaGithub, FaYoutube } from 'react-icons/fa'; -import Image from 'next/image'; +import React from "react"; +import { FaGithub, FaYoutube } from "react-icons/fa"; +import Image from "next/image"; +import Link from "next/link"; function Card(props) { return ( @@ -17,7 +18,16 @@ function Card(props) { {/* Content Section */}
-
{props.title}
+ +
+ {props.title} +
+

{props.description}

diff --git a/src/app/(pages)/Projects/[id]/page.jsx b/src/app/(pages)/Projects/[id]/page.jsx new file mode 100644 index 0000000..09bda39 --- /dev/null +++ b/src/app/(pages)/Projects/[id]/page.jsx @@ -0,0 +1,421 @@ +"use client"; +import axios from "axios"; +import { motion } from "framer-motion"; +import { useRouter, useSearchParams } from "next/navigation"; +import { useEffect, useState } from "react"; +import { FaGithub, FaLinkedin, FaYoutube } from "react-icons/fa"; + +export default function SingleProject() { + const router = useRouter(); + const searchParams = useSearchParams(); + const id = searchParams.get("id") ?? "1"; + console.log("Project ID:", id); + + const [projectDetails, setProjectDetails] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (id) { + axios + .get(`http://localhost:5000/projects/${id}`) + .then((response) => { + setProjectDetails(response.data); + console.log("Project details:", response.data); + setLoading(false); + }) + .catch((error) => { + console.error("Error fetching project details:", error); + setLoading(false); + }); + } + }, [id]); + + if (loading) return

Loading...

; + + if (!projectDetails) return

No details found for this project.

; + + return ( + <> +
+
+
+
+

+ {projectDetails.projectTitle} +

+

+ {projectDetails.projectOverview} +

+
+
+
+
+ {projectDetails.projectStartDate} +
+
+ Start Date +
+
+
+
+ {" "} + {projectDetails.projectEndDate} +
+
+ {" "} + End Date: +
+
+
+
+ {" "} + {projectDetails.projectManager.name} -{" "} + {projectDetails.projectManager.contact} +
+
+ {" "} + Project Manager +
+
+
+
+ {" "} + ${projectDetails.totalProjectBudget} +
+
+ {" "} + Total Budget +
+
+
+
+
+
+ +
+

+ Current Status +

+
+
+
+
+
+
+
+
+ +
+
+
+

Completed Tasks

+

+

    + {projectDetails.currentStatus.completedTasks.map( + (task, index) => ( +
  • {task}
    • + ) + )} +
+

+
+
+ +
+
+
+
+
+
+ +
+
+
+

+ Ongoing Tasks +

+

+

    + {projectDetails.currentStatus.ongoingTasks.map( + (task, index) => ( +
  • {task}
    • + ) + )} +
+

+
+
+
+
+
+
+
+
+ +
+
+
+

+ Upcoming Milestones +

+

+

    + {projectDetails.currentStatus.upcomingMilestones.map( + (milestone, index) => ( +
  • {milestone}
    • + ) + )} +
+

+
+
+
+
+
+ +
+ + Goals & Objectives + + + + + +

+ 🌟 Primary Goals +

+

+

    + {projectDetails.primaryGoals.map((goal, index) => ( +
  • {goal}
    • + ))} +
{" "} +

+ + + + + + +

+ 🎯 Specific Objectives +

+

+

    + {projectDetails.specificObjectives.map((objective, index) => ( +
  • {objective}
    • + ))} +
+

+ + + + + + +

+ 🚀 Milestone Schedule +

+

+

    + {projectDetails.milestoneSchedule.map((milestone) => ( +
  • + {milestone.milestone} -{" "} + {milestone.targetCompletionDate} +
    • + ))} +
+

+ + +
+ +
+
+

+ Our Team +

+

+ Our Team who put their sweat in to building the project!!! +

+
+
+ {projectDetails.projectTeamMembers.map((member) => ( +
+
+ +
+
+
+ + + +
+
+ +
+

+ {member.name} +

+
+ {member.responsibilities} +
+
+ Designated Work: + {member.designatedWork} +
+
+
+ + + + + {member.role} +
+
+
+
+ +
+
+ ))} +
+
+ +
+
Additional Links!
+
+ Look at the Project Plan +
+ {/*
Use coupon code:
*/} +
+ Plan Doc + +
+
+

+ + Youtube Link: + + HERE + +

+

+ + Github Link: + HERE + + +

+
+
+ +
+
+

Project Plan

+ + View Project Plan + +
+ +
+

YouTube Link

+ + Watch on YouTube + +
+
+ + ); +} diff --git a/src/app/(pages)/Projects/page.jsx b/src/app/(pages)/Projects/page.jsx index 127c69a..39cd2d8 100644 --- a/src/app/(pages)/Projects/page.jsx +++ b/src/app/(pages)/Projects/page.jsx @@ -1,16 +1,17 @@ -'use client'; -import React, { useState, useEffect } from 'react'; -import Card from './Card.jsx'; -import { projectData } from '../../../lib/Projects'; -import { motion } from 'framer-motion'; -import axios from 'axios'; +"use client"; +import React, { useState, useEffect } from "react"; +import Card from "./Card.jsx"; +import { projectData } from "../../../lib/Projects"; +import { motion } from "framer-motion"; +import axios from "axios"; function ProjectsPage() { - const [searchQuery, setSearchQuery] = useState(''); - const [loading, setLoading] = useState(true); - const filteredProjects = projectData.filter((project) => - project.title.toLowerCase().includes(searchQuery.toLowerCase()) || - project.description.toLowerCase().includes(searchQuery.toLowerCase()) + const [searchQuery, setSearchQuery] = useState(""); + const [loading, setLoading] = useState(true); + const filteredProjects = projectData.filter( + (project) => + project.title.toLowerCase().includes(searchQuery.toLowerCase()) || + project.description.toLowerCase().includes(searchQuery.toLowerCase()) ); useEffect(() => { @@ -26,7 +27,7 @@ function ProjectsPage() { .then((response) => { setAllProjects(response.data); setLoading(false); - console.log("allProjects",allProjects); + console.log("allProjects", allProjects); }) .catch((error) => { console.error("Error fetching data:", error); @@ -36,7 +37,10 @@ function ProjectsPage() { const ProjectsSkeleton = () => (
{Array.from({ length: 4 }).map((_, index) => ( -
+
@@ -68,7 +72,8 @@ function ProjectsPage() { animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.2 }} > - Explore our latest projects and get involved by contributing to open source on GitHub! + Explore our latest projects and get involved by contributing to open + source on GitHub!
@@ -86,29 +91,30 @@ function ProjectsPage() { {loading ? ( ) : ( -
- {allProjects && allProjects.length > 0 ? ( - allProjects.map((project, index) => ( - - - - )) - ) : ( -

No projects available

- )} -
+
+ {allProjects && allProjects.length > 0 ? ( + allProjects.map((project, index) => ( + + + + )) + ) : ( +

No projects available

+ )} +
)}
From db56e00a8c4ca723115711981b24ec5c1e631398 Mon Sep 17 00:00:00 2001 From: Janvi Date: Sun, 27 Oct 2024 21:44:42 +0530 Subject: [PATCH 2/3] done --- src/app/(pages)/Projects/[id]/page.jsx | 26 +------------------------- 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/src/app/(pages)/Projects/[id]/page.jsx b/src/app/(pages)/Projects/[id]/page.jsx index 09bda39..48c1d34 100644 --- a/src/app/(pages)/Projects/[id]/page.jsx +++ b/src/app/(pages)/Projects/[id]/page.jsx @@ -391,31 +391,7 @@ export default function SingleProject() {
-
-
-

Project Plan

- - View Project Plan - -
- -
-

YouTube Link

- - Watch on YouTube - -
-
+ ); } From 7f6eea1b21b8ec006fabe901ca98905314975b20 Mon Sep 17 00:00:00 2001 From: Janvi Date: Sun, 27 Oct 2024 22:01:01 +0530 Subject: [PATCH 3/3] bottom gap --- src/app/(pages)/Projects/[id]/page.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(pages)/Projects/[id]/page.jsx b/src/app/(pages)/Projects/[id]/page.jsx index 48c1d34..d20ca4d 100644 --- a/src/app/(pages)/Projects/[id]/page.jsx +++ b/src/app/(pages)/Projects/[id]/page.jsx @@ -346,7 +346,7 @@ export default function SingleProject() {
-
+
Additional Links!
Look at the Project Plan