diff --git a/client/src/App.jsx b/client/src/App.jsx index c85fec0..a87b7e6 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -34,7 +34,9 @@ import ResetPassword from "./component/ResetPassword"; import NotFound from "./component/NotFound"; import Faq from "./component/Faq"; import ProgressBar from "./component/ProgressBar/ProgressBar"; -import Cursor from "./component/Cursor"; + import Cursor from './component/Cursor'; +import ReadMoreBlog from './component/ReadMoreBlog'; + import AOS from "aos"; import "aos/dist/aos.css"; @@ -243,149 +245,23 @@ function App() { } /> {/* } /> */} - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - } />{" "} - {/* Add this line */} - } - />{" "} - {/* Add this line */} - } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> {/* Add this line */} + } /> {/* Add this line */} + } /> {/* Add this line */} + } /> + diff --git a/client/src/component/Blog.jsx b/client/src/component/Blog.jsx index 7927443..8a02fed 100644 --- a/client/src/component/Blog.jsx +++ b/client/src/component/Blog.jsx @@ -1,100 +1,13 @@ import { useEffect, useState } from "react"; - - import { Search } from "lucide-react"; import { Link } from "react-router-dom"; - - import img1 from "../assets/blogs/1.webp"; import img2 from "../assets/blogs/2.jpeg"; import img3 from "../assets/blogs/3.png"; import img4 from "../assets/blogs/4.jpeg"; import img5 from "../assets/blogs/5.jpeg"; import img6 from "../assets/blogs/6.png"; - - - -// import { Link } from 'react-router-dom'; -import "../css/Home.css"; - -// Dummy blog data - -const blogPosts = [ - { - id: 1, - title: "The Art of Modern Web Design", - author: "Sarah Chen", - date: "March 15, 2024", - category: "Design", - readTime: "5 min read", - image: img1, - excerpt: - "Exploring the latest trends in web design and how they shape user experiences in the digital age.", - tags: ["Design", "Web", "UI/UX"], - }, - { - id: 2, - title: "Understanding React Hooks", - author: "James Wilson", - date: "March 18, 2024", - category: "Development", - readTime: "8 min read", - image: img2, - excerpt: - "A deep dive into React Hooks and how they're revolutionizing the way we build components.", - tags: ["React", "JavaScript", "Programming"], - }, - { - id: 3, - title: "The Future of AI in Design", - author: "Elena Martinez", - date: "March 20, 2024", - category: "AI", - readTime: "6 min read", - image: img3, - excerpt: - "How artificial intelligence is transforming the design industry and what it means for creators.", - tags: ["AI", "Design", "Technology"], - }, - { - id: 4, - title: "Building Sustainable Tech", - author: "Alex Kumar", - date: "March 22, 2024", - category: "Technology", - readTime: "7 min read", - image: img4, - excerpt: - "Exploring eco-friendly approaches to software development and digital infrastructure.", - tags: ["Sustainability", "Technology", "Green Computing"], - }, - { - id: 5, - title: "The Psychology of UX Design", - author: "Maya Patel", - date: "March 25, 2024", - category: "UX", - readTime: "10 min read", - image: img5, - excerpt: - "Understanding how human psychology influences user experience design decisions.", - tags: ["UX", "Psychology", "Design"], - }, - { - id: 6, - title: "Mobile-First Development", - author: "Thomas Anderson", - date: "March 27, 2024", - category: "Development", - readTime: "6 min read", - image: img6, - excerpt: - "Best practices for building responsive applications with a mobile-first approach.", - tags: ["Mobile", "Development", "Responsive"], - }, -]; - const images = [ { src: img1, category: "Web Development" }, @@ -107,12 +20,9 @@ const images = [ export default function BlogPage() { const [searchTerm, setSearchTerm] = useState(""); const [selectedCategory, setSelectedCategory] = useState("All"); - const [blogPosts, setblogPosts] = useState([]); + const [blogPosts, setBlogPosts] = useState([]); - const categories = [ - "All", - ...new Set(blogPosts.map((post) => post.category)), - ]; + const categories = ["All", ...new Set(blogPosts.map((post) => post.category))]; const filteredPosts = blogPosts.filter((post) => { const matchesSearch = @@ -129,27 +39,21 @@ export default function BlogPage() { throw new Error("Invalid date format"); } const day = String(date.getDate()).padStart(2, "0"); - const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are 0-based + const month = String(date.getMonth() + 1).padStart(2, "0"); const year = date.getFullYear(); return `${day}-${month}-${year}`; }; const categoryImage = (cat) => { - console.log(cat); const imgSrc = images.find((image) => image.category === cat); - if (imgSrc) { - console.log(imgSrc.src); - return imgSrc.src; - } - return ""; // Safeguard for undefined + return imgSrc ? imgSrc.src : ""; }; const fetchData = async () => { try { let response = await fetch("http://localhost:5000/api/blog/all-blog"); let data = await response.json(); - console.log(data); - setblogPosts(data.blogs); + setBlogPosts(data.blogs); } catch (error) { console.error(error); } @@ -165,9 +69,7 @@ export default function BlogPage() {

Explore Our Blog

-

- Discover stories, insights, and knowledge -

+

Discover stories, insights, and knowledge

@@ -191,11 +93,10 @@ export default function BlogPage() { @@ -217,7 +118,7 @@ export default function BlogPage() { className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300" > {post.title} @@ -226,22 +127,16 @@ export default function BlogPage() { {post.category} - {post.readTime} -

+

{post.title}

- -

- {post.excerpt} -

- +

{post.excerpt}

-
@@ -256,9 +151,11 @@ export default function BlogPage() {

- + + +
@@ -283,16 +180,12 @@ export default function BlogPage() { />

-

Page not found

- The page you are looking for doesn't exist. Here are some - helpful links: + The page you are looking for doesnt exist. Here are some helpful links:

- -
diff --git a/client/src/component/ReadMoreBlog.jsx b/client/src/component/ReadMoreBlog.jsx new file mode 100644 index 0000000..24af70a --- /dev/null +++ b/client/src/component/ReadMoreBlog.jsx @@ -0,0 +1,94 @@ +import { useEffect, useState } from 'react'; +import { Link, useParams } from 'react-router-dom'; + + + +import img1 from "../assets/blogs/1.webp"; +import img2 from "../assets/blogs/2.jpeg"; +import img3 from "../assets/blogs/3.png"; +import img4 from "../assets/blogs/4.jpeg"; +import img5 from "../assets/blogs/5.jpeg"; +import img6 from "../assets/blogs/6.png"; + + +const images = [ + { src: img1, category: 'Web Development' }, + { src: img2, category: 'Mobile Development' }, + { src: img6, category: 'Data Science' }, + { src: img5, category: 'Machine Learning' }, + { src: img4, category: 'AI' }, + { src: img3, category: 'Cybersecurity' }, +]; + + +const ReadMoreBlog = (props) => { + const { id } = useParams(); + const [blogPost, setBlogPost] = useState(null); + const fetchData = async () => { + try { + const response = await fetch(`http://localhost:5000/api/blog/getById/${id}`); + + const data = await response.json(); + setBlogPost(data.blog); // Set the retrieved blog post to state + } catch (error) { + console.error('Error fetching blog post:', error); + } + }; + + useEffect(() => { + fetchData(); + }, [id]); + + const categoryImage = (cat) => { + const imgSrc = images.find(image => image.category === cat); + if (imgSrc) { + return imgSrc.src; + } + return '' // Safeguard for undefined + }; + + if (!blogPost) return
Loading...
; + + return ( + <> +
+ {blogPost.title} { e.target.onerror = null; e.target.src = '/placeholder.svg'; }} + /> +
+

{blogPost.title}

+
+ + + + + + + + {blogPost.category} +
+
+
+
+ + + + + Back to all + +
+
+ + + ); +}; + +export default ReadMoreBlog; diff --git a/server/Controllers/blogController.js b/server/Controllers/blogController.js index 45ee7cb..26e8aca 100644 --- a/server/Controllers/blogController.js +++ b/server/Controllers/blogController.js @@ -5,7 +5,6 @@ const { v4: uuidv4 } = require('uuid'); exports.postBlog = async (req, res) => { try { const { title, author, content, category } = req.body; - console.log("Received blog data = ", req.body); // Check if all required fields are present if (!title || !author || !content || !category) { @@ -23,7 +22,6 @@ exports.postBlog = async (req, res) => { // Save the blog post to the database const result = await newBlog.save(); - console.log("Blog saved:", result); // Send a success response res.status(201).json({ message: "Blog post created successfully", blog: result }); @@ -48,3 +46,22 @@ exports.getAllBlogs = async (req, res) => { res.status(500).json({ message: "Error retrieving all blog posts", error }); } }; + + +exports.getBlog = async (req, res) => { + const { id } = req.params; + try { + // Find the blog post by ID + const blog = await Blog.findById(id); + + if (!blog) { + return res.status(404).json({ message: "Blog post not found" }); + } + + // Send the blog post details + res.status(200).json({ message: "Blog post retrieved successfully", blog }); + } catch (error) { + console.error("Error retrieving blog post:", error); + res.status(500).json({ message: "Error retrieving blog post", error }); + } +}; diff --git a/server/routes/blog.js b/server/routes/blog.js index d360e1c..121681c 100644 --- a/server/routes/blog.js +++ b/server/routes/blog.js @@ -4,8 +4,8 @@ const blogController = require('../Controllers/blogController'); router.post('/post-blog', blogController.postBlog); router.get('/all-blog', blogController.getAllBlogs); +router.get('/getById/:id', blogController.getBlog); // router.delete('/delete-all', blogController.deleteAllBlogs); // router.delete('/delete-by-id/:id', blogController.deleteBlog); -// router.get('/get-by-id/:id', blogController.getBlog); module.exports = router; \ No newline at end of file