News Media Platform with MERN Stack

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const articleRouter = require('./route/articleRoute.js');
const cors = require('cors')

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

// Middleware
app.use(cors())
app.use(bodyParser.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/newsapp', {
	useNewUrlParser: true,
	useUnifiedTopology: true
})
	.then(() => console.log('MongoDB connected'))
	.catch(err => console.log(err));



app.use('/api/articles', articleRouter);


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

const mongoose = require('mongoose');

const articleSchema = new mongoose.Schema({
    title: {
        type: String,
        required: true
    },
    author: {
        type: String,
        required: true
    },
    content: {
        type: String,
        required: true
    },
    category: {
        type: String,
        required: true
    },
    createdAt: {
        type: Date,
        default: Date.now
    }
});

const Article = mongoose.model('Article', articleSchema);

module.exports = Article;

const express = require('express');
const router = express.Router();
const Article = require('../model/articleSchema.js');

// Get all articles
router.get('/', async (req, res) => {
	try {
		const articles = await Article.find();
		res.json(articles);
	} catch (err) {
		res.status(500).json({
			message: err.message
		});
	}
});

// Get a specific article
router.get('/:id', async (req, res) => {
	try {
		const article = await Article.findById(req.params.id);
		if (article == null) {
			return res.status(404).json({
				message: 'Article not found'
			});
		}
		res.json(article)
	} catch (err) {
		return res.status(500).json({
			message: err.message
		});
	}
});

// Create an article
router.post('/', async (req, res) => {
	try {
		const article = new Article({
			title: req.body.title,
			author: req.body.author,
			content: req.body.content,
			category: req.body.category
		});

		const newArticle = await article.save();
		res.status(201).json(newArticle);
	} catch (err) {
		res.status(400).json({
			message: err.message
		});
	}
});

// Update an article
router.put('/:id', async (req, res) => {
	try {
		const article = await Article.findByIdAndUpdate(
			req.params.id, req.body, { new: true });
		if (!article) {
			return res.status(404).json({
				message: 'Article not found'
			});
		}
		res.json(article);
	} catch (err) {
		res.status(400).json({ message: err.message });
	}
});

// Delete an article
router.delete('/:id', async (req, res) => {
	try {
		const article = await Article.findByIdAndDelete(req.params.id);
		if (!article) {
			return res.status(404).json({
				message: 'Article not found'
			});
		}
		res.json({ message: 'Article deleted' });
	} catch (err) {
		res.status(500).json({
			message: err.message
		});
	}
});

module.exports = router;

// ./src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

// src/App.js

import React, { useState } from "react";
import NewArticleForm from "./components/NewArticleForm.jsx";
import DeleteArticle from "./components/DeleteArticle.jsx";
import NewsList from "./components/NewsList.jsx";
import "./index.css";
function App() {
	const [isAuther, setAuther] = useState(false);
	return (
		<div>
			<div className="around">
				<h1>GFG News App</h1>
				<button onClick={() => setAuther(!isAuther)}>
					Switch to {isAuther ? "Viewer" : "Author"}
				</button>
			</div>
			{isAuther ? (
				<>
					<NewArticleForm setAuther={setAuther} />
					<DeleteArticle />
				</>
			) : (
				<NewsList />
			)}
		</div>
	);
}

export default App;

// ./src/components/DeleteArticle.jsx

import { useEffect, useState } from "react";

const DeleteArticle = () => {
	const [articles, setArticles] = useState([]);
	const [deleted, setDelete] = useState(true);

	useEffect(() => {
		// Fetch articles from backend when component mounts
		fetch("http://localhost:5000/api/articles")
			.then((response) => response.json())
			.then((data) => setArticles(data))
			.catch((error) =>
				console.error("Error fetching articles:", error));
	}, [deleted]);

	const handleDelete = async (articleid) => {
		try {
			const response = await fetch(
				`http://localhost:5000/api/articles/${articleid}`,
				{
					method: "DELETE",
				}
			);

			if (!response.ok) {
				throw new Error("Failed to delete article");
			}

			alert("Article deleted");
			setDelete(!deleted);
			/* 
				Assuming you have a state or effect 
				to update the list of articles after deletion
				*/
		} catch (error) {
			console.error("Error deleting article:", error);
		}
	};
	return (
		<div id="tbl-head">
			<h1>Articles</h1>
			<table id="tbl">
				<tr>
					<th>Title</th>
					<th>Category</th>
					<th>Author</th>
					<th>Date</th>
					<th>Action</th>
				</tr>
				{articles.map((article) => (
					<tr>
						<td>{article.title}</td>
						<td>{article.category}</td>
						<td>{article.author}</td>
						<td>{article.createdAt}</td>
						<td>
							<button
								className="dl-btn"
								onClick={() => handleDelete(article._id)}
							>
								Delete
							</button>
						</td>
					</tr>
				))}
			</table>
		</div>
	);
};

export default DeleteArticle;

// ./src/components/NewArticleForm.js

import React, { useState } from 'react';

function NewArticleForm({ setAuther }) {
	const [formData, setFormData] = useState({
		title: '',
		author: '',
		content: '',
		category: ''
	});

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

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

		try {
			const response = await
				fetch('http://localhost:5000/api/articles', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify(formData)
				});

			if (!response.ok) {
				throw new Error('Failed to create article');
			}

			// Reset form data after successful submission
			setFormData({
				title: '',
				author: '',
				content: '',
				category: ''
			});

			alert("Article Added..")
			setAuther(false)

		} catch (error) {
			console.error('Error creating article:', error);
		}
	};

	return (
		<div> {/* Centered container */}
			<div className="form-container">
				<h2>Add New Article</h2>
				<form onSubmit={handleSubmit}>
					<div className="form-group">
						<label >
							Title:
							<input
								type="text"
								name="title"
								value={formData.title}
								onChange={handleChange}
								className="form-input"
							/>
						</label>
					</div>
					<div className="form-group">
						<label>
							Author:
							<input
								type="text"
								name="author"
								value={formData.author}
								onChange={handleChange}
								className="form-input"
							/>
						</label>
					</div>
					<div className="form-group">
						<label>
							Content:
							<textarea
								name="content"
								value={formData.content}
								onChange={handleChange}
								className="form-textarea"
							/>
						</label>
					</div>
					<div className="form-group">
						<label>
							Category:
							<input
								type="text"
								name="category"
								value={formData.category}
								onChange={handleChange}
								className="form-input"
							/>
						</label>
					</div>
					<button type="submit"
						className="submit-button">
						Add Article
					</button>
				</form>
			</div>


		</div>
	);
}

export default NewArticleForm;

// ./src/components/NewsList.js

import React, { useState, useEffect } from 'react';

function NewsList() {
	const [articles, setArticles] = useState([]);

	useEffect(() => {
		// Fetch articles from backend when component mounts
		fetch('http://localhost:5000/api/articles')
			.then(response => response.json())
			.then(data => setArticles(data))
			.catch(error =>
				console.error('Error fetching articles:', error));
	}, []);

	return (
		<div>
			<div className="App">
				<div class="container">
					{articles.map(article => (
						<div class="card">

							<div class="card__body">
								<span class="tag tag-green">
									{article.category}
								</span>
								<h4>{article.title}</h4>
								<p>{article.content}</p>
							</div>
							<div class="card__footer">
								<div class="user">
									<div class="user__info">
										<h5>{article.author}</h5>
										<small>{article.createdAt}</small>
									</div>
								</div>
							</div>
						</div>
					))}
				</div>
			</div>

		</div>
	);
}

export default NewsList;