MERN Product Listing Page

A full-stack product listing feature built with the MERN stack. This project displays listing data from MongoDB, supports dynamic product routes, and allows users to place bids through a connected backend API.

This repository is a personal showcase version of the Product Listing Page feature I built as part of a larger team auction marketplace project.

---

Project Overview

This project demonstrates a product listing workflow built with MongoDB, Express.js, React, and Node.js. The application retrieves listing data from MongoDB, renders individual product pages using dynamic route parameters, and supports bid updates through the backend API.

---

Features

• View a product listing using a dynamic listing ID
• Fetch listing data from MongoDB
• Display product title, images, pricing, seller details, and description
• Submit bids through the backend API
• Validate that bids must be higher than the current bid
• Seed listing data locally for testing
• Run frontend and backend separately for local development

---

My Contribution

This repository focuses on the Product Listing Page feature I built and integrated from a larger team auction marketplace project.

• Built the Product Listing Page frontend
• Connected the page to backend listing data from MongoDB
• Implemented bid submission and validation flow
• Added seller details and related listings
• Extracted and documented this feature as a standalone personal showcase project

---

Tech Stack

Frontend

• React
• React Router
• CSS

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose

---

Project Structure

client/   # React frontend for the product listing page
server/   # Express API, MongoDB models, routes, controllers, and seed utilities

---

Installation

Install dependencies in both project folders:

cd server && npm install
cd ../client && npm install

---

Environment Variables

Create a .env file inside the server folder and add your MongoDB connection string.

MONGODB_URI=mongodb://localhost:27017/your-database-name

PORT=3000

Replace your-database-name with your own local MongoDB database name.

---

Running the Project

You need to run both the backend and frontend.

Start the server

Go into the server folder, install dependencies, and run npm run dev.

Start the client

Go into the client folder, install dependencies, and run npm run dev.

---

Seeding Listing Data

Go into server/listing-data-cli and run node commands/commands.js seedListings.

To clear existing listings first, run node commands/commands.js deleteAllListings, then run node commands/commands.js seedListings again.

---

Routes

Frontend

• /
• /productlisting/:id

Backend

• GET /api/listings - fetch all listings
• GET /api/listings/:id - fetch a single listing by ID
• PATCH /api/listings/:id/bid - submit a new bid for a listing

---

Example Bid Request

{
  "bidAmount": 500
}

---

Example Product Route

http://localhost:5173/productlisting/69c4fb2929691828d2f6f6dd

Use a valid MongoDB listing ID from your seeded data.

---

Notes

• MongoDB must be running locally
• A valid MONGODB_URI is required in the server .env
• The product listing page uses seeded listing data for local testing
• A valid listing ID is required to view an individual product page
• This repository is focused on the product listing feature and related backend/API functionality

---

Future Improvements

• Add form validation feedback on the frontend
• Improve error handling for invalid listing IDs
• Add image upload support
• Add unit and integration tests

---

Author

Justin Uasele
GitHub: NotYourRootUser