Merge pull request #1831 from Sawan-Kushwah/backend/stories

Build Backend for Stories Page: Implement CURD operation Routes ✨🚀
ANSHIKA-26 · Nov 10, 2024 · 236a1bc · 236a1bc · vercel · Nov 10, 2024
2 parents 9eb78d6 + 0a78b6a
commit 236a1bc
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 97 deletions.
diff --git a/backend/app.js b/backend/app.js
@@ -11,6 +11,8 @@ import addBlog from "./routes/addBlogRoutes.js";
 import subscribe from "./routes/subscribeRoutes.js";
 import discussion from "./routes/discussionRoutes.js";
 import faqRoutes from "./routes/faqRoutes.js";
+import stories from "./routes/storiesRoutes.js";
+
 
 import cors from "cors";
 import path from "path"; // Import path module
@@ -42,6 +44,8 @@ app.use("/api/addBlog", addBlog);
 app.use("/api/newsletter", subscribe);
 app.use("/api/discussion", discussion);
 app.use("/api/faq", faqRoutes);
+app.use("/api/stories", stories);
+
 
 const PORT = process.env.PORT || 5000;
 app.listen(PORT, () => {

diff --git a/backend/controllers/postsController.js b/backend/controllers/postsController.js
@@ -0,0 +1,25 @@
+// postsController.js
+import Post from "../models/postModel.js";
+
+// Fetch all posts
+export const getPosts = async (req, res) => {
+    try {
+        const posts = await Post.find();
+        res.status(200).json(posts);
+    } catch (error) {
+        res.status(500).json({ message: "Error fetching posts", error });
+    }
+};
+
+// Save a new post
+export const savePost = async (req, res) => {
+    const { title, content, category, date } = req.body;
+
+    try {
+        const newPost = new Post({ title, content, category, date });
+        const savedPost = await newPost.save();
+        res.status(201).json(savedPost);
+    } catch (error) {
+        res.status(500).json({ message: "Error saving post", error });
+    }
+};
diff --git a/backend/models/postModel.js b/backend/models/postModel.js
@@ -0,0 +1,13 @@
+// postModel.js
+import mongoose from "mongoose";
+
+const postSchema = new mongoose.Schema({
+    title: String,
+    content: String,
+    category: String,
+    date: { type: Date, default: Date.now },
+});
+
+const Post = mongoose.model("Post", postSchema);
+
+export default Post;
diff --git a/backend/routes/storiesRoutes.js b/backend/routes/storiesRoutes.js
@@ -0,0 +1,9 @@
+import express from "express";
+import { getPosts, savePost } from "../controllers/postsController.js";
+
+const router = express.Router();
+
+router.get("/getposts", getPosts);
+router.post("/saveposts", savePost);
+
+export default router;
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
@@ -23,6 +23,7 @@ export function renderFooter() {
                             <li><a href="/blogs" class="text-gray-400 hover:text-white transition-colors duration-300">Blog</a></li>
                             <li><a href="/contact" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li>
                             <li><a href="/termsOfUse" class="text-gray-400 hover:text-white transition-colors duration-300">Terms Of Use</a></li>
+                            <li><a href="/stories" class="text-gray-400 hover:text-white transition-colors duration-300">Explore Stories</a></li>
                         </ul>
                     </div>
                     <div class="w-full md:w-1/3" data-aos="fade-up" data-aos-delay="500">

diff --git a/frontend/src/pages/Stories.js b/frontend/src/pages/Stories.js
@@ -5,34 +5,53 @@ export function renderStories(container) {
     let category = '';
 
     // Function to fetch posts from localStorage
-    const fetchPosts = () => {
-        const storedPosts = localStorage.getItem('posts');
-        if (storedPosts) {
-            posts = JSON.parse(storedPosts);
+    const fetchPosts = async () => {
+        try {
+            const response = await fetch('http://localhost:5000/api/stories/getposts');
+            if (response.ok) {
+                // Get the list of posts from the backend
+                const fetchedPosts = await response.json();
+                posts = fetchedPosts; // Update the local posts array
+                render();  // Render posts on the page
+            } else {
+                console.error('Error fetching posts:', response.statusText);
+            }
+        } catch (error) {
+            console.error('Error fetching posts:', error);
         }
-        render();  // Render after fetching posts
     };
 
     // Function to handle form submission
-    const handleSubmit = (e) => {
+    const handleSubmit = async (e) => {
         e.preventDefault();
 
         if (title && content && category) {
             const newPost = { title, content, category, date: new Date().toISOString() };
 
-            // Add new post to the posts array
-            posts.unshift(newPost);
-
-            // Save the updated posts to localStorage
-            localStorage.setItem('posts', JSON.stringify(posts));
-            // Clear form fields
-            title = '';
-            content = '';
-            category = '';
-
-            render();  // Re-render after saving the post
-
-
+            try {
+                // Send the new post data to the backend API
+                const response = await fetch('http://localhost:5000/api/stories/saveposts', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(newPost),
+                });
+
+                if (response.ok) {
+                    // Clear form fields
+                    title = '';
+                    content = '';
+                    category = '';
+
+                    await fetchPosts();
+
+                } else {
+                    console.error('Error submitting post:', response.statusText);
+                }
+            } catch (error) {
+                console.error('Error submitting post:', error);
+            }
         }
     };
 

diff --git a/frontend/src/styles/output.css b/frontend/src/styles/output.css
@@ -600,10 +600,6 @@ video {
   border-width: 0;
 }
 
-.fixed {
-  position: fixed;
-}
-
 .absolute {
   position: absolute;
 }
@@ -640,14 +636,6 @@ video {
   top: 0.75rem;
 }
 
-.right-4 {
-  right: 1rem;
-}
-
-.top-4 {
-  top: 1rem;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -1044,11 +1032,6 @@ video {
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
 }
 
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
-}
-
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1064,6 +1047,11 @@ video {
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .border-gray-700 {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -1074,14 +1062,14 @@ video {
   border-color: rgb(74 222 128 / var(--tw-border-opacity));
 }
 
-.border-indigo-100 {
+.border-indigo-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(224 231 255 / var(--tw-border-opacity));
+  border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
-.border-indigo-500 {
+.border-indigo-700 {
   --tw-border-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-border-opacity));
+  border-color: rgb(67 56 202 / var(--tw-border-opacity));
 }
 
 .border-teal-600 {
@@ -1093,16 +1081,6 @@ video {
   border-color: transparent;
 }
 
-.border-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
-}
-
-.border-indigo-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(67 56 202 / var(--tw-border-opacity));
-}
-
 .bg-\[\#8b5cf6\] {
   --tw-bg-opacity: 1;
   background-color: rgb(139 92 246 / var(--tw-bg-opacity));
@@ -1143,6 +1121,11 @@ video {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
 .bg-green-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
@@ -1198,16 +1181,6 @@ video {
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
 }
 
-.bg-gray-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-}
-
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1260,6 +1233,11 @@ video {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1305,11 +1283,6 @@ video {
   padding-bottom: 2rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1430,6 +1403,11 @@ video {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1475,9 +1453,9 @@ video {
   color: rgb(22 101 52 / var(--tw-text-opacity));
 }
 
-.text-indigo-500 {
+.text-indigo-400 {
   --tw-text-opacity: 1;
-  color: rgb(99 102 241 / var(--tw-text-opacity));
+  color: rgb(129 140 248 / var(--tw-text-opacity));
 }
 
 .text-indigo-600 {
@@ -1530,16 +1508,6 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
-.text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-.text-indigo-400 {
-  --tw-text-opacity: 1;
-  color: rgb(129 140 248 / var(--tw-text-opacity));
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1646,11 +1614,6 @@ body.dark-mode {
   background-color: rgb(117 63 241 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-blue-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-blue-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
@@ -1676,11 +1639,6 @@ body.dark-mode {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-indigo-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-indigo-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -1716,11 +1674,6 @@ body.dark-mode {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-indigo-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(49 46 129 / var(--tw-bg-opacity));
-}
-
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -2000,11 +1953,6 @@ body.dark-mode {
   color: rgb(253 224 71 / var(--tw-text-opacity));
 }
 
-.dark\:text-gray-500:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .dark\:shadow-gray-800\/30:is(.dark *) {
   --tw-shadow-color: rgb(31 41 55 / 0.3);
   --tw-shadow: var(--tw-shadow-colored);