Community Marketplace App using MERN Stack

// server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

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

// MongoDB connection
mongoose.connect('mongodb://localhost:27017/myapp', {
	useNewUrlParser: true,
	useUnifiedTopology: true
})
	.then(() => console.log('Connected to MongoDB'))
	.catch(err => console.error(err));

// Define Product Schema
const productSchema = new mongoose.Schema({
	name: {
		type: String,
		required: true
	},
	description: String,
	price: {
		type: Number,
		required: true
	},
	category: String,
	imageUrl: String, // Directly store image URL
});

const Product = mongoose.model('Product', productSchema);

// Middleware for CORS
app.use(cors());
// Middleware for parsing JSON bodies
app.use(express.json());

// Route to fetch products
app.get('/product', async (req, res) => {
	try {
		const products = await Product.find();
		res.json(products);
	} catch (err) {
		console.error(err);
		res.status(500).json({ message: 'Server Error' });
	}
});

// Route to add new product
app.post('/product', async (req, res) => {
	try {
		const { name, description, price, category, imageUrl } = req.body;
		const newProduct = new Product({
			name,
			description,
			price,
			category,
			imageUrl,
		});
		const savedProduct = await newProduct.save();
		res.status(201).json(savedProduct);
	} catch (err) {
		console.error(err);
		res.status(500).json({ message: 'Server Error' });
	}
});

// Start the server
app.listen(PORT, () => {
	console.log(`Server is running on port ${PORT}`);
});

// App.js
import React from 'react';
import {
	BrowserRouter as Router,
	Routes,
	Route
} from 'react-router-dom';
import Nav from './Nav.js';
import ProductList from './ProductList.js';
import Seller from './Seller.js';
import './index.css'

const App = () => {
	return (
		<Router>
			<div>
				<Nav />
				<Routes>
					<Route path="/" element={<ProductList />} />
					<Route path="/seller" element={<Seller />} />
				</Routes>
			</div>
		</Router>
	);
}

export default App;

// Seller.js
import React, { useState } from 'react';
import axios from 'axios';

const Seller = () => {
	const [formData, setFormData] = useState({
		name: '',
		description: '',
		price: '',
		category: '',
		imageUrl: '',
	});

	const handleSubmit = async (e) => {
		e.preventDefault();
		try {
			const response = await axios.post('http://localhost:5000/product',
				formData);
			console.log(response.data);
		} catch (error) {
			console.error('Error:', error);
		}
	}

	const handleChange = (e) => {
		setFormData({ ...formData, [e.target.name]: e.target.value });
	}

	return (
		<div>
			<h2>Become a Seller</h2>
			<form onSubmit={handleSubmit}>
				<input type="text" name="name"
					placeholder="Product Name" onChange={handleChange} />
				<input type="text" name="description"
					placeholder="Description" onChange={handleChange} />
				<input type="number" name="price"
					placeholder="Price" onChange={handleChange} />
				<input type="text" name="category"
					placeholder="Category" onChange={handleChange} />
				<input type="text" name="imageUrl"
					placeholder="Image URL" onChange={handleChange} />
				<button type="submit">Add Product</button>
			</form>
		</div>
	);
}

export default Seller;

// ProductList.js
import React, {
	useState,
	useEffect
} from 'react';
import axios from 'axios';
import './index.css'


const ProductList = () => {
	const [products, setProducts] = useState([]);

	useEffect(() => {
		fetchProducts();
	}, []);

	const fetchProducts = async () => {
		try {
			const response = await axios.get('http://localhost:5000/product');
			setProducts(response.data);
		} catch (error) {
			console.error('Error:', error);
		}
	}

	return (
		<div className="container">
			<h2>Products</h2>
			<div className="product-list">
				{products.map((product, index) => (
					<div key={product._id} className="product">
						<h3>{product.name}</h3>
						<img src={product.imageUrl}
							alt={product.name} className="product-image" />
						<p className="product-description">
							Description: {product.description}
						</p>
						<p className="product-price">
							Price: ${product.price}
						</p>
						<p className="product-category">
							Category: {product.category}
						</p>
						{/* Add a line break after every third product */}
						{((index + 1) % 3 === 0) &&
							(<hr key={index} className="break-line" />)}
						<button>Add to cart</button>
					</div>
				))}
			</div>
		</div>
	);
}

export default ProductList;

// Nav.js
import React from 'react';
import { Link } from 'react-router-dom';

const Nav = () => {
	return (
		<nav className="navbar">
			<h1 className="navbar-brand">
				Marketplace
			</h1>
			<ul className="nav-links">
				<li className="nav-item">
					<Link to="/" className="nav-link">
						Home
					</Link>
				</li>
				<li className="nav-item">
					<Link to="/seller" className="nav-link">
						Become a Seller
					</Link>
				</li>
			</ul>
		</nav>
	);
}

export default Nav;