Here are the steps –
1. Create a route “post.route.js”-
import express from ‘express’
import {verifyToken} from ‘../utils/verifyUser.js’
import { create } from ‘../controllers/post.controller.js’;
const router=express.Router();
router.post(‘/create’, verifyToken, create)
export default router;
2. Add route in index.js –
app.use(‘/api/post’, postRoute);
3. Create a “post.controller.js” –
import Post from “../models/post.model.js”;
import { errorHandler } from “../utils/error.js”
export const create=async(req, res, next)=>{
console.log(req.user)
if(!req.user.isAdmin){
return next(errorHandler(403, ‘You are not allowed to create a post’))
}
if(!req.body.title || !req.body.content){
return next(errorHandler(400, ‘Please provide all required fields’))
}
const slug=req.body.title.split(‘ ‘).join(‘-‘).toLowerCase().replace(/[^a-zA-Z0-9-]/g, ”);
const newPost= new Post({
…req.body, slug, userId:req.user.id
})
try {
const savedPost=await newPost.save();
res.status(201).json(savedPost)
} catch (error) {
next(error)
}
}
4. Create a “post.model.js” –
import mongoose from “mongoose”;
const postSchema=new mongoose.Schema(
{
userId:{
type:String,
required:true
},
content:{
type:String,
required:true
},
title:{
type:String,
required:true,
unique:true
},
image:{
type:String,
default:‘https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2021/09/how-to-write-a-blog-post.webp’
},
category:{
type:String,
default:‘uncategorized’
},
slug:{
type:String,
required:true,
unique:true
}
}, {timestamps:true}
)
const Post=mongoose.model(‘Post’, postSchema)
export default Post;
Create a Blog Post API Implementation in React JS –
1. Adss onChange in title –
<TextInput type=‘text’ placeholder=‘Title’ required id=‘title’ className=‘flex-1’
onChange={(e)=>setFormData({…formData, title:e.target.value})}/>
2. Add onChange in select –
<Select onChange={(e)=>setFormData({…formData, category:e.target.value})}>
<option value=‘uncategorized’>Select a Category</option>
<option value=‘javascript’>Java Script</option>
<option value=‘reactjs’>React JS</option>
<option value=‘nextjs’>Next JS</option>
</Select>
3. Add onChange in ReactQuill-
<ReactQuill theme=‘snow’ placeholder=‘Write Something…’ className=‘h-72 mb-12’ required
onChange={(value)=>setFormData({…formData, content:value})}/>
5. Add onSubmit in form –
<form className=‘flex flex-col gap-4’ onSubmit={handleSubmit}>
6. Create handleSubmit method –
const handleSubmit=async(e)=>{
e.preventDefault();
try {
const res=await fetch(‘/api/post/create’, {
method:‘POST’,
headers:{
‘Content-Type’:‘application/json’
},
body:JSON.stringify(formData)
});
const data=await res.json();
if(!res.ok){
setPublishError(data.message);
return
}
if(res.ok){
setPublishError(null)
navigate(`/post/${data.slug}`)
}
} catch (error) {
setPublishError(‘Something went wrong’)
}
}
8. Add PublishError state –
const [publishError, setPublishError]=useState(null)
9. Add Alert if error occurs –
{
publishError && <Alert className=‘mt-5’ color=‘failure’>{publishError}</Alert>
}
10. Import useNavigate –
import {useNavigate} from ‘react-router-dom’
11. Define navigate –
const navigate=useNavigate();
Video Tutorial: –
