Home page seetings and add Post job and jon details

backend/controllers/jobController.js

@@ -97,4 +97,15 @@ export const deleteJob = catchAsyncError(async(req,res,next)=>{
         success: true,
         message: 'Job deleted successfully'
     });
+});
+// get single job details
+export const getJobDetails = catchAsyncError(async(req,res,next)=>{
+    const job = await Job.findById(req.params.id);
+    if(!job){
+        return next(new ErrorHandler('Job not found',404));
+    }
+    res.status(200).json({
+        success: true,
+        job
+    });
 });

backend/routes/jobRouter.js

@@ -1,5 +1,5 @@
 import express from "express";
-import { getAllJobs,postjobs,getmyJobs,updateJob, deleteJob } from "../controllers/jobController.js";
+import { getAllJobs,postjobs,getmyJobs,updateJob, deleteJob, getJobDetails } from "../controllers/jobController.js";
 import { isAuthenticated } from "../middlewares/auth.js";
 const router = express.Router();
 
@@ -8,5 +8,5 @@ router.post("/post",isAuthenticated,postjobs);
 router.get("/getmyjobs",isAuthenticated,getmyJobs);
 router.put("/update/:id",isAuthenticated,updateJob);
 router.delete("/delete/:id", isAuthenticated, deleteJob);
-
+router.get("/:id", isAuthenticated, getJobDetails);
 export default router;

frontend/src/App.css

@@ -1400,4 +1400,13 @@ nav .hamburger {
 
 .contant_box_404 {
   text-align: center;
+}
+.card {
+  transition: all 0.3s ease;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }

frontend/src/components/Home/HowItWorks.jsx

@@ -1,11 +1,49 @@
-import React from 'react'
+
+import { FaUserPlus } from "react-icons/fa";
+import { MdFindInPage } from "react-icons/md";
+import { IoMdSend } from "react-icons/io";
 
 const HowItWorks = () => {
   return (
-    <div>
-
-    </div>
-  )
-}
+    <>
+      <div className="howitworks">
+        <div className="container">
+          <h3>How JobZee Works</h3>
+          <div className="banner">
+            <div className="card">
+              <FaUserPlus />
+              <p>Create Account</p>
+              <p>
+                Join JobZee now: Enter your name, email, and password. Verify
+                your email to access a world of career opportunities. Explore
+                listings, connect with employers, and take charge of your
+                future!
+              </p>
+            </div>
+            <div className="card">
+              <MdFindInPage />
+              <p>Find a Job/Post a Job</p>
+              <p>
+                Search for your dream job or ideal candidate. Use filters to
+                refine your search. Post job listings to attract top talent.
+                Discover new opportunities and connect with potential employers
+                or employees.
+              </p>
+            </div>
+            <div className="card">
+              <IoMdSend />
+              <p>Apply For Job/Recruit Suitable Candidates</p>
+              <p>
+                Easily apply for jobs or recruit top talent on JobZee.
+                Seamlessly connect with candidates or employers. Get started
+                now!
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
 
-export default HowItWorks
+export default HowItWorks;

frontend/src/components/Home/PopularCategories.jsx

@@ -1,11 +1,84 @@
-import React from 'react'
+
+import {
+  MdOutlineDesignServices,
+  MdOutlineWebhook,
+  MdAccountBalance,
+  MdOutlineAnimation,
+} from "react-icons/md";
+import { TbAppsFilled } from "react-icons/tb";
+import { FaReact } from "react-icons/fa";
+import { GiArtificialIntelligence } from "react-icons/gi";
+import { IoGameController } from "react-icons/io5";
 
 const PopularCategories = () => {
+  const categories = [
+    {
+      id: 1,
+      title: "Graphics & Design",
+      subTitle: "305 Open Positions",
+      icon: <MdOutlineDesignServices />,
+    },
+    {
+      id: 2,
+      title: "Mobile App Development",
+      subTitle: "500 Open Positions",
+      icon: <TbAppsFilled />,
+    },
+    {
+      id: 3,
+      title: "Frontend Web Development",
+      subTitle: "200 Open Positions",
+      icon: <MdOutlineWebhook />,
+    },
+    {
+      id: 4,
+      title: "MERN STACK Development",
+      subTitle: "1000+ Open Postions",
+      icon: <FaReact />,
+    },
+    {
+      id: 5,
+      title: "Account & Finance",
+      subTitle: "150 Open Positions",
+      icon: <MdAccountBalance />,
+    },
+    {
+      id: 6,
+      title: "Artificial Intelligence",
+      subTitle: "867 Open Positions",
+      icon: <GiArtificialIntelligence />,
+    },
+    {
+      id: 7,
+      title: "Video Animation",
+      subTitle: "50 Open Positions",
+      icon: <MdOutlineAnimation />,
+    },
+    {
+      id: 8,
+      title: "Game Development",
+      subTitle: "80 Open Positions",
+      icon: <IoGameController />,
+    },
+  ];
   return (
-    <div>
-
+    <div className="categories">
+      <h3>POPULAR CATEGORIES</h3>
+      <div className="banner">
+        {categories.map((element) => {
+          return (
+            <div className="card" key={element.id}>
+              <div className="icon">{element.icon}</div>
+              <div className="text">
+                <p>{element.title}</p>
+                <p>{element.subTitle}</p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default PopularCategories
+export default PopularCategories;

frontend/src/components/Home/PopularCompanies.jsx

@@ -1,11 +1,56 @@
-import React from 'react'
+import React from "react";
+import { FaMicrosoft, FaApple } from "react-icons/fa";
+import { SiTesla } from "react-icons/si";
 
 const PopularCompanies = () => {
+  const companies = [
+    {
+      id: 1,
+      name: "Microsoft",
+      location: "Bangalore, India",
+      openPositions: 10,
+      icon: <FaMicrosoft />,
+    },
+    {
+      id: 2,
+      name: "Tesla",
+      location: "Mumbai, India",
+      openPositions: 5,
+      icon: <SiTesla />,
+    },
+    {
+      id: 3,
+      name: "Apple",
+      location: "Delhi, India",
+      openPositions: 20,
+      icon: <FaApple />,
+    },
+  ];
+
   return (
-    <div>
-
+    <div className="companies">
+      <div className="container">
+        <h3>TOP COMPANIES</h3>
+        <div className="banner">
+          {companies.map((element) => {
+            return (
+              <div className="card" key={element.id}>
+                <div className="content">
+                  <div className="icon">{element.icon}</div>
+                  <div className="text">
+                    <p>{element.title}</p>
+                    <p>{element.location}</p>
+                  </div>
+                </div>
+                <button>Open Positions {element.openPositions}</button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
     </div>
-  )
-}
+  );
+};
+
 
-export default PopularCompanies
+export default PopularCompanies;

frontend/src/components/Job/Job.jsx

@@ -1,11 +1,49 @@
-import React from 'react'
+import React, { useContext, useEffect, useState } from "react";
+import axios from "axios";
+import { Link, useNavigate } from "react-router-dom";
+import { Context } from "../../main";
 
 const Job = () => {
+  const [jobs, setJobs] = useState([]);
+  const { isAuthorized } = useContext(Context);
+  const navigateTo = useNavigate();
+  useEffect(() => {
+    try {
+      axios
+        .get("http://localhost:4000/api/v1/job/getall", {
+          withCredentials: true,
+        })
+        .then((res) => {
+          setJobs(res.data);
+        });
+    } catch (error) {
+      console.log(error);
+    }
+  }, []);
+  if (!isAuthorized) {
+    navigateTo("/");
+  }
+
   return (
-    <div>
-
-    </div>
-  )
-}
+    <section className="jobs page">
+      <div className="container">
+        <h1>ALL AVAILABLE JOBS</h1>
+        <div className="banner">
+          {jobs.jobs &&
+            jobs.jobs.map((element) => {
+              return (
+                <div className="card" key={element._id}>
+                  <p>{element.title}</p>
+                  <p>{element.category}</p>
+                  <p>{element.country}</p>
+                  <Link to={`/job/${element._id}`}>Job Details</Link>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </section>
+  );
+};
 
-export default Job
+export default Job;

frontend/src/components/Job/JobDetails.jsx

@@ -1,11 +1,77 @@
-import React from 'react'
-
+import  { useContext, useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { Context } from "../../main";
 const JobDetails = () => {
+  const { id } = useParams();
+  const [job, setJob] = useState({});
+  const navigateTo = useNavigate();
+
+  const { isAuthorized, user } = useContext(Context);
+
+  useEffect(() => {
+    axios
+      .get(`http://localhost:4000/api/v1/job/${id}`, {
+        withCredentials: true,
+      })
+      .then((res) => {
+        setJob(res.data.job);
+      })
+      .catch((error) => {
+        navigateTo("/notfound");
+      });
+  }, []);
+
+  if (!isAuthorized) {
+    navigateTo("/login");
+  }
+
   return (
-    <div>
-
-    </div>
-  )
-}
+    <section className="jobDetail page">
+      <div className="container">
+        <h3>Job Details</h3>
+        <div className="banner">
+          <p>
+            Title: <span> {job.title}</span>
+          </p>
+          <p>
+            Category: <span>{job.category}</span>
+          </p>
+          <p>
+            Country: <span>{job.country}</span>
+          </p>
+          <p>
+            City: <span>{job.city}</span>
+          </p>
+          <p>
+            Location: <span>{job.location}</span>
+          </p>
+          <p>
+            Description: <span>{job.description}</span>
+          </p>
+          <p>
+            Job Posted On: <span>{job.jobPostedOn}</span>
+          </p>
+          <p>
+            Salary:{" "}
+            {job.fixedSalary ? (
+              <span>{job.fixedSalary}</span>
+            ) : (
+              <span>
+                {job.salaryFrom} - {job.salaryTo}
+              </span>
+            )}
+          </p>
+          {user && user.role === "Employer" ? (
+            <></>
+          ) : (
+            <Link to={`/application/${job._id}`}>Apply Now</Link>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
 
-export default JobDetails
+export default JobDetails;