Page not opening node js

Hi everyone i am new to node js and creating a simple web e-comerse website using node js and a templating engine using PUG

I am following MVC so far for my shop routes everting is working fine but for admin routes it always show 404 not found

here is the my app.js

const path=require("path")
const express = require("express");
const app=express();
const bodyParser=require("body-parser");
const adminRoutes=require("./routes/admin")
const shopRoutes=require("./routes/shop")
const error404Controlle=require("./controllers/404")

app.set("view engine","pug")
app.set("view ","views")

app.use(bodyParser.urlencoded({ extended: false }))

app.use("/admin",adminRoutes)
app.use(shopRoutes)

app.use(error404Controlle.error404)

app.listen(3000)

Here is my admin routes:

const express = require("express")
const router=express.Router();
const adminController=require("../controllers/admin")

//admin/add-product=>GET
router.get('/add-product',adminController.getAddedProducts);

//admin/add-product=>POST
router.post('/add-product',adminController.getPostAddProduct)


router.post('/edit-product',)
router.post('/admin-products-list',)
router.post('/adminHome',adminController.adminHomePage)

module.exports=router;

Here is admin controller:

const Product=require("../model/product")


exports.getAddedProducts=(req,res,next)=>{
    res.render("admin/add-product", )
}

exports.getPostAddProduct=(req,res,next)=>{
    const product=new Product(req.body.Title,req.body.Price,req.body.Description)
    product.save();
      res.redirect('/');
  }

  exports.adminHomePage=(req,res,next)=>{
      res.render('admin/admin-page',);
  }

here is my PUG file page where i created a footer with button to open admin home page

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Products
    link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css")
    link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css")
    style.
      body {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
      }

      main {
          flex-grow: 1;
      }

  body
    header
      nav.navbar.navbar-expand-lg.navbar-light.bg-light
        ul.navbar-nav
          li.nav-item
            a.nav-link(href="/") Shop
          li.nav-item
            a.nav-link(href="/products") Products
          li.nav-item
            a.nav-link(href="cart") Cart

    main.container.mt-4
      h1.display-4 My Products
      if prods.length === 0
        p No products to show
      else
        .row
          each product in prods
            .col-md-4
              .card.mb-4
                img.card-img-top(src=product.imageUrl, alt=product.title)
                .card-body
                  h5.card-title #{product.title}
                  p.card-text #{product.description}
                  p.card-text
                    span Price: $#{product.price}
                    a.btn.btn-primary.float-right(href="#") Add to Cart
                      i.fas.fa-cart-plus

    footer.text-center.text-white(style="background-color: #0a4275;")
      section
        div.container.p-4.pb-0
          section
            p.d-flex.justify-content-center.align-items-center
              span.me-3 Admin Access
              a.btn.btn-outline-light.btn-rounded(type="button", href="/adminHome") Authorize
        div.text-center.p-3(style="background-color: rgba(0, 0, 0, 0.2);")
          | © 2023 Copyright:
          a.text-white(href="https://www.google.com/") Horizam.com

  script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js")

But when ever i click the route not opens. Can anyone tell me where i am doing wrong and how to overcome or tackle issues while developing node js application

Here is the project structure

Solution

I can see two issues.

On the screenshot you pasted, there is a wrong path provided in the .render() call.

Based on your views structure it should be like this:

res.render('admin/admin-page');

Another issue is that the /adminHome path is defined as POST which makes it not possible to access from the browser's URL bar. If you want to render this view in the browser you need to change it to GET in your router:

router.get('/adminHome',adminController.adminHomePage); // notice usage of .get instead of .post

And then, based on your routes, this view should be available under /admin/adminHome