Build a Full-Stack App with MERN Stack Pt 2

				
					mern-blog-app/
├── client/    # React frontend
|	├── public/
│	├── src/
│	│	├── components/
│	│	├── pages/
│	│	├── context/
│	│	├── hooks/
│	│	├── utils/
│	│	└── styles/
│	└── package.json
├── server/	    # Express backend
│	├── controllers/
│	├── models/
│	├── routes/
│	├── middleware/
│	├── config/
│	├── utils/
│	└── server.js
├── package.json
├── .gitignore
└── README.md


				
			

				
					// hooks/usePosts.js
import { useState, useEffect } from 'react';

export const usePosts = (page = 1) => { const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true); const [error, setError] = useState(null);
const [totalPages, setTotalPages] = useState(0);

useEffect(() => {
const fetchPosts = async () => { try {
setLoading(true);
const response = await fetch(`/api/posts?page=${page}`);

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

const data = await response.json(); setPosts(data.posts); setTotalPages(data.totalPages);
} catch (err) { setError(err.message);
} finally { setLoading(false);
}
};

fetchPosts();
}, [page]);

return { posts, loading, error, totalPages };
};

// components/PostCard.jsx import React from 'react'; import './PostCard.css';

const PostCard = ({ post }) => { const formatDate = (dateString) => {
return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric',
month: 'long', day: 'numeric'
));
};

return (
<article className="post-card">
<header className="post-card  header">
<h2 className="post-card title">{post.title}</h2>
<div className="post-card meta">
<span className="post-card  author">By {post.author.name}</span>
<span className="post-card date">
{formatDate(post.publishedAt || post.createdAt)}
</span>
</div>
</header>

<div className="post-card content">
{post.content.length > 150
? `${post.content.substring(0, 150)}...`
: post.content
}
</div>

{post.tags.length > 0 && (
<footer className="post-card  tags">
{post.tags.map(tag => (
<span key={tag} className="tag">#{tag}</span>
))}
</footer>
)}
</article>
);
};

export default PostCard;

// pages/Home.jsx
import React, { useState } from 'react'; import PostCard from '../components/PostCard'; import { usePosts } from '../hooks/usePosts'; import './Home.css';

const Home = () => {
const [currentPage, setCurrentPage] = useState(1);
const { posts, loading, error, totalPages } = usePosts(currentPage);

if (loading) {
return <div className="spinner">Loading posts...</div>;
}

if (error) {
return <div className="error">Error: {error}</div>;
}

return (
<div className="home">
<header className="home  header">
<h1>Latest Blog Posts</h1>
<p>Discover amazing stories and insights from our community</p>
</header>

<main className="home  content">
<div className="posts-grid">
{posts.map(post => (
<PostCard key={post._id} post={post} />
))}
</div>

{totalPages > 1 && (
<nav className="pagination">
<button
disabled={currentPage === 1}
onClick={() => setCurrentPage(prev => prev - 1)} className="pagination btn"
>
Previous
</button>

<span className="pagination info"> Page {currentPage} of {totalPages}
</span>

<button
disabled={currentPage === totalPages} onClick={() => setCurrentPage(prev => prev + 1)} className="pagination btn"
>
Next
</button>
</nav>
)}
</main>
</div>
);
};

export default Home;