Real-Time Auction Platform using Node and Express.js

//index.js

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const routes = require('./routes');

const app = express();
const PORT = process.env.PORT || 3000;

mongoose.connect('Your MongoDB URI', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
})
    .then(() => console.log('MongoDB connected'))
    .catch(err => console.error('MongoDB connection error:', err));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use('/', routes);

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

//models.js

const mongoose = require('mongoose');

const User = mongoose.model('User', new mongoose.Schema({
    username: String,
    contactNumber: String,
    email: String,
}));

const ItemCategory = mongoose.model('ItemCategory', new mongoose.Schema({
    name: String,
    timeRemaining: String,
    startingTime: Date,
    state: String,
}));

const Product = mongoose.model('Product', new mongoose.Schema({
    name: String,
    description: String,
    price: Number,
}));

module.exports = { User, ItemCategory, Product };

//routes.js

const express = require('express');
const router = express.Router();
const {
    getAllUsers,
    createUser,
    getAllItemCategories,
    createItemCategory,
    getAllProducts,
    createProduct,
} = require('./controllers');

router.get('/users', getAllUsers);
router.post('/users', createUser);
router.get('/itemCategories', getAllItemCategories);
router.post('/itemCategories', createItemCategory);
router.get('/products', getAllProducts);
router.post('/products', createProduct);

module.exports = router;

//controllers.js

const { User, ItemCategory, Product } = require('./models');

exports.getAllUsers = async (req, res) => {
    try {
        const users = await User.find();
        res.json(users);
    } catch (err) {
        res.status(500).json({ error: err.message });
    }
};

exports.createUser = async (req, res) => {
    try {
        const user = await User.create(req.body);
        res.status(201).json(user);
    } catch (err) {
        res.status(400).json({ error: err.message });
    }
};

exports.getAllItemCategories = async (req, res) => {
    try {
        const itemCategories = await ItemCategory.find();
        res.json(itemCategories);
    } catch (err) {
        res.status(500).json({ error: err.message });
    }
};

exports.createItemCategory = async (req, res) => {
    try {
        const itemCategory = await ItemCategory.create(req.body);
        res.status(201).json(itemCategory);
    } catch (err) {
        res.status(400).json({ error: err.message });
    }
};

exports.getAllProducts = async (req, res) => {
    try {
        const products = await Product.find();
        res.json(products);
    } catch (err) {
        res.status(500).json({ error: err.message });
    }
};

exports.createProduct = async (req, res) => {
    try {
        const product = await Product.create(req.body);
        res.status(201).json(product);
    } catch (err) {
        res.status(400).json({ error: err.message });
    }
};

// src/App.js

import React from 'react';
import { BrowserRouter as Router, Route, NavLink, Routes } from 'react-router-dom';
import Home from './components/Home';
import Categories from './components/Categories';
import Members from './components/Members';
import Products from './components/Products';
import './App.css';

function App() {
    return (
        <Router>
            <nav>
                <h1><center>Real Time Auction Platform</center></h1>
                <div>
                    <NavLink to="/" activeClassName="active">
                        Home
                    </NavLink>
                    <NavLink to="/categories" activeClassName="active">
                        Categories
                    </NavLink>
                    <NavLink to="/members" activeClassName="active">
                        Members
                    </NavLink>
                    <NavLink to="/products" activeClassName="active"> { }
                        Products
                    </NavLink>
                </div>
            </nav>

            <div className="container">
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/categories" element={<Categories />} />
                    <Route path="/members" element={<Members />} />
                    <Route path="/products" element={<Products />} /> { }
                </Routes>
            </div>
        </Router>
    );
}

export default App;

//components/Home.js

import React from 'react';

function Home() {
    const userData = {
        username: 'User 123',
    };

    const username = userData ? userData.username : 'Unknown';

    return (
        <div>
            <h2>Welcome to the Real-Time Auction Platform</h2>
            <p>Hello, {username}!</p>
        </div>
    );
}

export default Home;

//components/Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
    return (
        <nav>
            <Link to="/">Real-Time Auction Platform</Link>
            <div>
                <Link to="/">Home</Link>
                <Link to="/categories">Categories</Link>
                <Link to="/members">Members</Link>
                <Link to="/products">Products</Link>
            </div>
        </nav>
    );
};

export default Navbar;

// src/components/Members.js

import React, { useState } from "react";
import "../App.css";

function Members() {
    const hardcodedMembers = [
        {
            id: 1,
            username: "User123",
            contactNumber: "9898989898",
            email: "[email protected]",
        },
        {
            id: 2,
            username: "User2",
            contactNumber: "234-567-8901",
            email: "[email protected]",
        },
        {
            id: 3,
            username: "User3",
            contactNumber: "345-678-9012",
            email: "[email protected]",
        },
        {
            id: 4,
            username: "User4",
            contactNumber: "456-789-0123",
            email: "[email protected]",
        },
        {
            id: 5,
            username: "User5",
            contactNumber: "567-890-1234",
            email: "[email protected]",
        },
        {
            id: 6,
            username: "User6",
            contactNumber: "678-901-2345",
            email: "[email protected]",
        },
        {
            id: 7,
            username: "User7",
            contactNumber: "789-012-3456",
            email: "[email protected]",
        },
        {
            id: 8,
            username: "User8",
            contactNumber: "890-123-4567",
            email: "[email protected]",
        },
        {
            id: 9,
            username: "User9",
            contactNumber: "901-234-5678",
            email: "[email protected]",
        },
        {
            id: 10,
            username: "User10",
            contactNumber: "012-345-6789",
            email: "[email protected]",
        },
    ];

    const [members, setMembers] = useState(hardcodedMembers);

    return (
        <div className="members-container">
            <h2>Members</h2>
            <ul className="members-list">
                {members.map((member) => (
                    <li key={member.id} className="members-item">
                        <strong>{member.username}</strong> - {member.contactNumber} -{" "}
                        {member.email}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default Members;

//components/Categories.js

import React, { useState } from "react";
import "../App.css";

function Categories() {
    const [biddingItem, setBiddingItem] = useState(null);
    const [bidAmount, setBidAmount] = useState(0);

    const getUserByIndex = (index) => {
        const users = [
            {
                username: "User1",
                contactNumber: "123-456-7890",
                email: "[email protected]",
            },
            {
                username: "User2",
                contactNumber: "234-567-8901",
                email: "[email protected]",
            },
            {
                username: "User3",
                contactNumber: "345-678-9012",
                email: "[email protected]",
            },
            {
                username: "User4",
                contactNumber: "456-789-0123",
                email: "[email protected]",
            },
            {
                username: "User5",
                contactNumber: "567-890-1234",
                email: "[email protected]",
            },
        ];

        return users[index];
    };

    const categoriesData = [
        {
            id: 1,
            name: "Car",
            description: "Explore the latest car models .",
            imageUrl:
                "https://media.geeksforgeeks.org/wp-content/uploads/20240122184958/images2.jpg",
            sellerInfo: getUserByIndex(0),
            auctionInfo: {
                status: "Open",
                timeRemaining: "5h 30m",
                basePrice: 50,
                currentPrice: 0,
                currentBidder: null,
            },
        },
        {
            id: 2,
            name: "Clothing",
            description: "Stay in style with our fashionable clothing collection.",
            imageUrl:
                "https://media.geeksforgeeks.org/wp-content/uploads/20230407153938/gfg-hoodie.jpg",
            sellerInfo: getUserByIndex(1),
            auctionInfo: {
                status: "Open",
                timeRemaining: "3d 12h",
                basePrice: 30,
                currentPrice: 0,
                currentBidder: null,
            },
        },
        {
            id: 3,
            name: "Books",
            description:
                "Immerse yourself in the world of literature with our diverse book collection.",
            imageUrl:
        "https://media.geeksforgeeks.org/wp-content/uploads/20240110011929/glasses-1052010_640.jpg",
            sellerInfo: getUserByIndex(2),
            auctionInfo: {
                status: "Open",
                timeRemaining: "1w 1d",
                basePrice: 20,
                currentPrice: 0,
                currentBidder: null,
            },
        },
        {
            id: 4,
            name: "Honda second hand vehicle",
            description: "Best working condition .",
            imageUrl:
                "https://media.geeksforgeeks.org/wp-content/uploads/20240122182422/images1.jpg",
            sellerInfo: getUserByIndex(3),
            auctionInfo: {
                status: "Open",
                timeRemaining: "2d 8h",
                basePrice: 80,
                currentPrice: 0,
                currentBidder: null,
            },
        },
        {
            id: 5,
            name: "Sports wear",
            description:
                "Fuel your active lifestyle with our high-quality sports tshirt.",
            imageUrl:
                "https://media.geeksforgeeks.org/wp-content/uploads/20230407153931/gfg-tshirts.jpg",
            sellerInfo: getUserByIndex(4),
            auctionInfo: {
                status: "Open",
                timeRemaining: "6h 20m",
                basePrice: 40,
                currentPrice: 0,
                currentBidder: null,
            },
        },
    ];

    const handleBidClick = (item) => {
        setBiddingItem(item);
        setBidAmount(
            item.auctionInfo.basePrice + Math.floor(Math.random() * 50) + 1
        );
    };

    const handlePlaceBid = () => {
        setBiddingItem((prevItem) => ({
            ...prevItem,
            auctionInfo: {
                ...prevItem.auctionInfo,
                currentPrice: bidAmount,
                currentBidder: "user123",
            },
        }));
    };

    return (
        <div className="categories-container">
            <h2>Categories</h2>
            <div className="categories-list">
                {categoriesData.map((category) => (
                    <div key={category.id} className="category-item">
                        <div className="category-image">
                            <img src={category.imageUrl} alt={category.name} />
                        </div>
                        <div className="category-details">
                            <h3>{category.name}</h3>
                            <p className="category-description">{category.description}</p>
                            <div className="category-seller-info">
                                <p>
                                    <strong>Seller Information:</strong>
                                </p>
                                <p>Username: {category.sellerInfo.username}</p>
                                <p>Contact Number: {category.sellerInfo.contactNumber}</p>
                                <p>Email: {category.sellerInfo.email}</p>
                            </div>
                            <div className="category-auction-info">
                                <p>
                                    <strong>Auction Information:</strong>
                                </p>
                                <p>Status: {category.auctionInfo.status}</p>
                                <p>Time Remaining: {category.auctionInfo.timeRemaining}</p>
                                {category.auctionInfo.status === "Open" && (
                                    <>
                                        <button onClick={() => handleBidClick(category)}>
                                            Click to Bid
                                        </button>
                                    </>
                                )}
                            </div>
                            {biddingItem && biddingItem.id === category.id && (
                                <div className="bid-modal">
                                    <h3>Bid Information</h3>
                                    <p>
                                        <strong>Item:</strong> {biddingItem.name}
                                    </p>
                                    <p>
                                        <strong>Base Price:</strong> $
                                        {biddingItem.auctionInfo.basePrice}
                                    </p>
                                    <p>
                                        <strong>Current Price:</strong> $
                                        {biddingItem.auctionInfo.currentPrice}
                                    </p>
                                    <p>
                                        <strong>Current Bidder:</strong>{" "}
                                        {biddingItem.auctionInfo.currentBidder || "None"}
                                    </p>
                                    <input
                                        type="number"
                                        value={bidAmount}
                                        onChange={(e) => setBidAmount(e.target.value)}
                                        min={biddingItem.auctionInfo.basePrice + 1}
                                    />
                                    <button onClick={handlePlaceBid}>Place Bid</button>
                                    <button onClick={() => setBiddingItem(null)}>Close</button>
                                </div>
                            )}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default Categories;

//components/Products.js

import React, { useState } from "react";

function Products() {
    const defaultSellerInfo = {
        username: "User 123",
        contactNumber: "9898989898",
        email: "[email protected]",
    };

    const defaultProduct = {
        name: "",
        description: "",
        price: 0,
        sellerInfo: defaultSellerInfo,
        startingDate: "",
        endingDate: "",
        image: null,
    };

    const [products, setProducts] = useState([]);
    const [newProduct, setNewProduct] = useState(defaultProduct);
    const [editProduct, setEditProduct] = useState(null);
    const [editName, setEditName] = useState("");
    const [editDescription, setEditDescription] = useState("");
    const [editPrice, setEditPrice] = useState("");
    const [editStartingDate, setEditStartingDate] = useState("");
    const [editEndingDate, setEditEndingDate] = useState("");

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        switch (name) {
            case "name":
                setEditName(value);
                break;
            case "description":
                setEditDescription(value);
                break;
            case "price":
                setEditPrice(value);
                break;
            case "startingDate":
                setEditStartingDate(value);
                break;
            case "endingDate":
                setEditEndingDate(value);
                break;
            default:
                break;
        }
    };

    const handleImageChange = (e) => {
        setEditProduct({
            ...editProduct,
            image: e.target.files[0],
        });
    };

    const addProduct = () => {
        setProducts([...products, newProduct]);
        setNewProduct(defaultProduct);
    };

    const deleteProduct = (index) => {
        setProducts(products.filter((_, i) => i !== index));
    };

    const updateProduct = (index) => {
        const updatedProducts = [...products];
        const updatedProduct = {
            ...editProduct,
            name: editName,
            description: editDescription,
            price: editPrice,
            startingDate: editStartingDate,
            endingDate: editEndingDate,
        };
        updatedProducts[index] = updatedProduct;
        setProducts(updatedProducts);
        setEditProduct(null);
        // Clear edit fields
        setEditName("");
        setEditDescription("");
        setEditPrice("");
        setEditStartingDate("");
        setEditEndingDate("");
    };

    return (
        <div
            style={{
                fontFamily: "Arial, sans-serif",
                maxWidth: "800px",
                margin: "0 auto",
            }}
        >
            <h2 style={{ textAlign: "center", marginBottom: "20px" }}>Products</h2>
            <div>
                <h3>Add New Product</h3>
                <div style={{ marginBottom: "10px" }}>
                    <input
                        type="text"
                        name="name"
                        placeholder="Name"
                        value={newProduct.name}
                        onChange={(e) =>
                            setNewProduct({ ...newProduct, name: e.target.value })
                        }
                        style={{ marginRight: "10px", padding: "5px" }}
                    />
                    <input
                        type="text"
                        name="description"
                        placeholder="Description"
                        value={newProduct.description}
                        onChange={(e) =>
                            setNewProduct({ ...newProduct, description: e.target.value })
                        }
                        style={{ marginRight: "10px", padding: "5px" }}
                    />
                    <input
                        type="number"
                        name="price"
                        placeholder="Price"
                        value={newProduct.price}
                        onChange={(e) =>
                            setNewProduct({ ...newProduct, price: e.target.value })
                        }
                        style={{ marginRight: "10px", padding: "5px" }}
                    />
                    <input
                        type="text"
                        name="startingDate"
                        placeholder="Starting Date"
                        value={newProduct.startingDate}
                        onChange={(e) =>
                            setNewProduct({ ...newProduct, startingDate: e.target.value })
                        }
                        style={{ marginRight: "10px", padding: "5px" }}
                    />
                    <input
                        type="text"
                        name="endingDate"
                        placeholder="Ending Date"
                        value={newProduct.endingDate}
                        onChange={(e) =>
                            setNewProduct({ ...newProduct, endingDate: e.target.value })
                        }
                        style={{ marginRight: "10px", padding: "5px" }}
                    />
                    <input
                        type="file"
                        name="image"
                        onChange={(e) =>
                            setNewProduct({ ...newProduct, image: e.target.files[0] })
                        }
                        style={{ padding: "5px" }}
                    />
                    <button
                        onClick={addProduct}
                        style={{ padding: "5px 10px", marginLeft: "10px" }}
                    >
                        Add Product
                    </button>
                </div>
            </div>
            <div>
                <h3>Products List</h3>
                <ul style={{ listStyleType: "none", padding: 0 }}>
                    {products.map((product, index) => (
                        <li
                            key={index}
                            style={{
                                marginBottom: "20px",
                                border: "1px solid #ccc",
                                padding: "10px",
                                borderRadius: "5px",
                                boxShadow: "0 0 5px rgba(0, 0, 0, 0.1)",
                            }}
                        >
                            <div
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                    marginBottom: "10px",
                                }}
                            >
                                {product.image && (
                                    <img
                                        src={URL.createObjectURL(product.image)}
                                        alt="Product"
                                        style={{
                                            marginRight: "10px",
                                            width: "100px",
                                            height: "auto",
                                            borderRadius: "5px",
                                        }}
                                    />
                                )}
                                <div>
                                    <strong>Name:</strong> {product.name}
                                    <br />
                                    <strong>Description:</strong> {product.description}
                                    <br />
                                    <strong>Price:</strong> ${product.price}
                                    <br />
                                    <strong>Starting Date:</strong> {product.startingDate}
                                    <br />
                                    <strong>Ending Date:</strong> {product.endingDate}
                                    <br />
                                    <strong>Seller Info:</strong> <br />
                                    Username: {product.sellerInfo.username}
                                    <br />
                                    Contact Number: {product.sellerInfo.contactNumber}
                                    <br />
                                    Email: {product.sellerInfo.email}
                                </div>
                            </div>
                            <div>
                                {editProduct === product ? (
                                    <>
                                        <input
                                            type="text"
                                            name="name"
                                            value={editName}
                                            onChange={handleInputChange}
                                            style={{ marginRight: "10px", padding: "5px" }}
                                        />
                                        <input
                                            type="text"
                                            name="description"
                                            value={editDescription}
                                            onChange={handleInputChange}
                                            style={{ marginRight: "10px", padding: "5px" }}
                                        />
                                        <input
                                            type="number"
                                            name="price"
                                            value={editPrice}
                                            onChange={handleInputChange}
                                            style={{ marginRight: "10px", padding: "5px" }}
                                        />
                                        <input
                                            type="text"
                                            name="startingDate"
                                            value={editStartingDate}
                                            onChange={handleInputChange}
                                            style={{ marginRight: "10px", padding: "5px" }}
                                        />
                                        <input
                                            type="text"
                                            name="endingDate"
                                            value={editEndingDate}
                                            onChange={handleInputChange}
                                            style={{ marginRight: "10px", padding: "5px" }}
                                        />
                                        <input
                                            type="file"
                                            name="image"
                                            onChange={handleImageChange}
                                            style={{ padding: "5px" }}
                                        />
                                        <button
                                            onClick={() => updateProduct(index)}
                                            style={{ padding: "5px 10px", marginLeft: "10px" }}
                                        >
                                            Update
                                        </button>
                                        <button
                                            onClick={() => setEditProduct(null)}
                                            style={{ padding: "5px 10px", marginLeft: "10px" }}
                                        >
                                            Cancel
                                        </button>
                                    </>
                                ) : (
                                    <>
                                        <button
                                            onClick={() => {
                                                setEditProduct(product);
                                                setEditName(product.name);
                                                setEditDescription(product.description);
                                                setEditPrice(product.price);
                                                setEditStartingDate(product.startingDate);
                                                setEditEndingDate(product.endingDate);
                                            }}
                                        >
                                            Edit
                                        </button>
                                        <button
                                            onClick={() => deleteProduct(index)}
                                            style={{ marginLeft: "10px" }}
                                        >
                                            Delete
                                        </button>
                                    </>
                                )}
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
}

export default Products;