Community Forum Page using MERN Stack

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');

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

app.use(cors());
app.use(bodyParser.json());
mongoose.connect(
'mongodb://localhost:27017/societyDB',
    {
        useNewUrlParser: true,
        useUnifiedTopology: true
    });


const requestSchema = new mongoose.Schema({
    residentName: { type: String, required: true },
    content: { type: String, required: true },
    likes: { type: Number, default: 0 },
});

const Request =
    mongoose.model('Request', requestSchema);

// Create a new request
app.post('/requests', async (req, res) => {
    try {
        const { residentName, content } = req.body;
        const newRequest =
            new Request({ residentName, content });
        const savedRequest = await newRequest.save();
        res.json(savedRequest);
    } catch (error) {
        res.status(500)
            .json({ error: 'Internal Server Error' });
    }
});

// Get all requests
app.get('/requests', async (req, res) => {
    try {
        const requests = await Request.find();
        res.json(requests);
    } catch (error) {
        res.status(500)
            .json(
                {
                    error: 'Internal Server Error'
                }
            );
    }
});

// Like a request
app.patch('/requests/:id/like', async (req, res) => {
    try {
        const { id } = req.params;
        const updatedRequest =
            await Request.findByIdAndUpdate(
                id,
                { $inc: { likes: 1 } },
                { new: true });
        res.json(updatedRequest);
    } catch (error) {
        res.status(500)
            .json(
                {
                    error: 'Internal Server Error'
                }
            );
    }
});

// Delete a request
app.delete('/requests/:id', async (req, res) => {
    try {
        const { id } = req.params;
        await Request.findByIdAndDelete(id);
        res.json(
            {
                message: 'Request deleted successfully'
            }
        );
    } catch (error) {
        res.status(500)
            .json(
                {
                    error: 'Internal Server Error'
                }
            );
    }
});
// Example: routes/requests.js

const router = express.Router();


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

// src/App.js
import React from "react";
import {
	BrowserRouter as Router,
	Route, Routes
} from "react-router-dom";
import RequestList
	from "./components/RequestList";
import RequestForm
	from "./components/RequestForm";
import About from "./components/About";
import Navbar from "./components/Navbar";
const App = () => {
	return (
		<Router>
			<Navbar />
			<Routes>
				<Route path="/"
					element={<RequestList />} />
				<Route path="/about"
					element={<About />} />
			</Routes>
		</Router>
	);
};

export default App;

// src/components/RequestList.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
// Import the RequestForm component
import RequestForm from './RequestForm'; 
import './RequestList.css';

const RequestList = () => {
	const [requests, setRequests] = useState([]);

	const fetchRequests = async () => {
		try {
			const response = 
				await axios.get('http://localhost:5000/requests');
			setRequests(response.data);
		} catch (error) {
			console.error('Error fetching requests:', error);
		}
	};

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

	const handleLike = async (id) => {
		try {
			await 
				axios.patch(`
http://localhost:5000/requests/${id}/like
				`);
			// Refresh the list of requests after liking
			fetchRequests();
		} catch (error) {
			console.error('Error liking request:', error);
		}
	};

	return (
		<div className="request-list-container">
			<RequestForm onAddRequest={
				(newRequest) =>
					setRequests([newRequest, ...requests])
			} />
			<ul className="request-list">
				{requests.map((request) => (
					<div key={request._id}
						className="request-item">
						<p className="resident-name">
							{request.residentName}
						</p>
						<p className="request-content">
							{request.content}
						</p>
						<p className="likes">
							Likes: {request.likes}
						</p>
						<button className="like-button"
							onClick=
							{
								() => handleLike(request._id)
							}>
							Like
						</button>
					</div>
				))}
			</ul>
		</div>
	);
};

export default RequestList;

// src/components/RequestForm.js
import React, { useState } from 'react';
import axios from 'axios';
import './RequestForm.css'; // Import the CSS file for styling

const RequestForm = ({ onAddRequest }) => {
	const [residentName, setResidentName] = useState('');
	const [content, setContent] = useState('');

	const handleSubmit = async (e) => {
		e.preventDefault();

		try {
			const response =
				await axios.post('http://localhost:5000/requests', {
					residentName,
					content,
				});

			// Assuming the backend returns the newly created request
			onAddRequest(response.data);
			setResidentName('');
			setContent('');
		} catch (error) {
			console.error('Error creating request:', error);
		}
	};

	return (
		<div className="request-form-container">
			<h2>Create a Request</h2>
			<form onSubmit={handleSubmit}>
				<div className="form-group">
					<label htmlFor="residentName">
						Resident Name:
					</label>
					<input
						id="residentName"
						type="text"
						value={residentName}
						onChange={
							(e) =>
								setResidentName(e.target.value)
						}
					/>
				</div>
				<div className="form-group">
					<label htmlFor="content">
						Content:
					</label>
					<textarea
						id="content"
						value={content}
						onChange={
							(e) =>
								setContent(e.target.value)
						}
					/>
				</div>
				<button type="submit"
					className="submit-button">
					Submit Request
				</button>
			</form>
		</div>
	);
};

export default RequestForm;

// src/components/About.js
import React from 'react';
import styled from 'styled-components';

const AboutContainer = styled.div`
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8px;
`;

const Title = styled.h2`
color: #333;
margin-bottom: 20px;
`;

const Paragraph = styled.p`
line-height: 1.6;
margin-bottom: 10px;
`;

const About = () => {
	return (
		<AboutContainer>
			<Title>About Community Forum</Title>
			<Paragraph>
				Welcome to the Community Forum, a place where
				residents can connect, share ideas, and support
				each other. This platform allows you to raise
				requests, express your opinions, and engage in
				discussions with fellow community members.
			</Paragraph>
			<Paragraph>
				We believe in fostering a sense of community
				and collaboration. Feel free to explore the
				forum, like and contribute to requests, and
				be an active participant in shaping our community.
			</Paragraph>
			{/* Add more information as needed */}
		</AboutContainer>
	);
};

export default About;

// src/components/Navbar.js
import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';

const NavbarContainer = styled.div`
background-color: #212e3d;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
`;

const Logo = styled.h1`
color: #fff;
margin: 0;
`;

const NavLink = styled(Link)`
color: #fff;
text-decoration: none;
margin-left: 20px;
font-weight: bold;
transition: color 0.3s ease-in-out;

&:hover {
	color: #0e87ea;
}
`;

const Navbar = () => {
	return (
		<NavbarContainer>
			<Logo>Community Forum</Logo>
			<div>
				<NavLink to="/">Home</NavLink>
				<NavLink to="/about">About</NavLink>
				{/* Add more navigation links as needed */}
			</div>
		</NavbarContainer>
	);
};

export default Navbar;