Ultimate MERN Stack Development Guide for 2025

  // server.js
  const express = require('express');
  const mongoose = require('mongoose');
  const cors = require('cors');
  const app = express();
  
  app.use(cors());
  app.use(express.json());
  
  mongoose.connect(process.env.MONGO_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  }).then(() => console.log('MongoDB connected'));
  
  app.get('/api', (req, res) => {
    res.json({ message: 'Welcome to the MERN stack API' });
  });
  
  const PORT = process.env.PORT || 5000;
  app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
          

  // models/Post.js
  const mongoose = require('mongoose');
  
  const postSchema = new mongoose.Schema({
    title: { type: String, required: true },
    content: { type: String, required: true },
    author: { type: String, required: true },
    createdAt: { type: Date, default: Date.now }
  });
  
  module.exports = mongoose.model('Post', postSchema);
          

  // components/Post.jsx
  import React from 'react';
  
  const Post = ({ title, content, author, createdAt }) => {
    return (
      

        
{title}
        
{content}
        
By {author} on {new Date(createdAt).toLocaleDateString()}
      
    );
  };
  
  export default Post;
          

  // pages/Posts.jsx
  import { useQuery } from '@tanstack/react-query';
  import axios from 'axios';
  import Post from '../components/Post';
  
  const fetchPosts = async () => {
    const { data } = await axios.get('/api/posts');
    return data;
  };
  
  const Posts = () => {
    const { data: posts, isLoading, error } = useQuery(['posts'], fetchPosts);
  
    if (isLoading) return 
Loading...
;
    if (error) return 
Error: {error.message}
;
  
    return (
      

        {posts.map(post => (
          
        ))}
      
    );
  };
  
  export default Posts;