gitignore

backend/.gitignore

+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
\ No newline at end of file

backend/index.js

@@ -32,14 +32,11 @@ mongoose.connect(process.env.MONGODB_URI)
 
  app.post("/save", uploadMiddleware.single("photo"), (req,res) => {
 
-   
-
-
     const photo = req.file.filename
 
-
     const post = new postModel({name:req.body.name,description: req.body.description, photo: photo})
     post.save()
+    .then(console.log("Saved successfully"))
 
 })
 

frontend/package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/material": "^5.11.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

frontend/src/App.js

 import axios from 'axios'
 import React, {useState, useEffect} from 'react'
-
+import './styles.css'
+import Paper from '@mui/material/Paper'
 
 function App() {
-
+  const [posts,setPosts] = useState([])
   const [drinks,setDrinks] = useState([])
   const [loading,setLoading] = useState(false)
   const [name,setName] = useState("")
   const [description,setDescription] = useState("")
-  const formData = new FormData()
   const [imageData,setImageData] = useState('')
  
     const createPost = () => {
@@ -37,35 +37,47 @@ function App() {
   
   }
   
-  const handleImage = (e) => {
-    e.preventDefault()
-    
-    formData.append("photo",e.target.files[0])
-
-}
-const handleChange = (e) => {
-  e.preventDefault()
-  
-  const formData = new FormData()
-  formData.append("photo",e.target.files[0])
-
-  axios.post("http://localhost:5000/api/save",{name: name, description: description, formData})
+const loadPosts = () => {
+  axios.get("http://localhost:5000/posts")
   .then((res) => {
-      console.log(res.data)
+    console.log(res.data)
+    setPosts(res.data)
   })
-  .catch((err) => console.log(err))
 }
 
+  useEffect(() => {
+
+    loadPosts()
+  },[])
 
   return (
+<>
     <div>
    <input value={name} onChange={(e) => setName(e.target.value)} placeholder='name' type='text'/>
    <input value={description} onChange={(e) => setDescription(e.target.value)} placeholder='description' type='text'/>
-   
-  <input type='file' onChange={(e) => setImageData(e.target.files[0])}/>
-
-  <button onClick={createPost}>Upload</button>
+   <input type='file' onChange={(e) => setImageData(e.target.files[0])}/>
+   <button onClick={createPost}>Upload</button>
+    </div>
+    <div>
+      <h1>POSTS</h1>
+      <div>{posts.map((post) => {
+        return(
+          <div className='post' key={post._id}>
+           <Paper elevation={5}>
+            <img className='img' src={`http://localhost:5000/uploads/${post.photo}`}/>
+           
+            <div>
+            
+               <h1>{post.name}</h1>
+            <p>{post.description}</p> 
+          
+            </div>
+              </Paper>
+          </div>
+        )
+      })}</div>
     </div>
+</>
   );
 }
 

frontend/src/index.css

+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;900&display=swap');
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-family: 'Poppins', sans-serif;
+  text-align: center;
+  justify-content: center;
+  display: flex;
+}
+.img{
+  margin-top: 10px;
+    object-fit: cover;
+    width: 200px;
+    height: 200px;
+
+}
+.post{
+  width: 50%;
+  margin: auto;
+}
+
+h1{
+  font-weight: bold;
 }
 
 code {