backend/routes/routes.js

@@ -255,7 +255,7 @@ router.post("/comment", (req, res) => {
     })
   comment.save()
     .then(console.log("comment saved successfully"))
-    res.send(comment)
+    res.json(comment)
 
 })
 
@@ -275,14 +275,28 @@ router.put('/savecomment', async (req, res) => {
 
     console.log(comment)
 
-    //post.comments.push(comment)
+    post.comments.push(comment)
 
-    //await post.save()
+    await post.save()
+
+    res.send("Success")
   }
+})
+router.get('/getcomments', async (req, res) => {
 
  
+  const postId = req.headers.author
+
+  postModel.find({ author: postId })
+    .populate('comments')
+    .exec()
+    .then(comments => {
+      res.json(comments)
 
+    })
 })
 
 
+
+
 module.exports = router
\ No newline at end of file

frontend/src/components/Post.js

@@ -126,9 +126,7 @@ return (
       <div className={styles.post_container}>
         <div className={styles.post_header}>
           <h1>Make your drink!</h1>
-        </div>
-
-        <div className={styles.grid_container}>
+        </div> 
           <div className={styles.input_fields}>
             <input className={styles.post_input1} onChange={(e) => setName(e.target.value)} placeholder='Title of your drink' type='text' />
 
@@ -150,44 +148,6 @@ return (
 
           </div>
 
-          <div>
-            <div className={styles.posts_header}>
-           
-
-            </div>
-            <div className={styles.posts_container} >
-
-              <div className={styles.grid_container}>
-                <div className={styles.post_img_container}>
-                  <img className={styles.img} src={picturePreview} />
-                </div>
-                <div>
-                  <h2>{name}</h2>
-                  <div >
-                    <h3>Recipe:</h3>
-                    <div className={styles.tag_container}>
-                      <ul>
-                        {recipe.map((ingredient, index) => (
-                          <li key={index}>
-                            {ingredient}
-                          </li>
-
-                        ))}
-                      </ul>
-
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div className={styles.description}><h3>Description:</h3>{description} </div>
-                </div>
-              </div>
-
-
-            </div>
-          </div>
-        </div>
-
         <button className={buttons.button2} onClick={createPost}>Upload</button>
       </div>
 

frontend/src/components/Posts.js

@@ -17,7 +17,8 @@ const Posts = () => {
   const [searchChange, setSearchChange] = useState()
   const [profileData, setProfileData] = useState()
   const [comment, setComment] = useState("")
-  const [comment_id, setComment_id] = useState()
+  const [commentData, setCommentData] = useState()
+  const [showComments, setShowComments] = useState(false)
 
   const get_profile = () => {
 
@@ -61,7 +62,6 @@ const Posts = () => {
 
     setSearch(e.target.value)
     setLoads(1)
-    console.log(searchChange)
   }
 
   const handleUpvote = (id) => {
@@ -70,7 +70,6 @@ const Posts = () => {
     const decodedToken = jwt_decode(token);
 
     const author = decodedToken.userId;
-    console.log(id)
 
     axios.put("http://localhost:5000/upvote", { upvote: author, post_id: id })
       .then((res) => {
@@ -82,19 +81,18 @@ const Posts = () => {
 
   const handleComment = (id) => {
 
-    console.log(profileData)
-
-    console.log(id)
-
     axios.post("http://localhost:5000/comment", { profile_name: profileData.username, profile_picture: profileData.photo, comment: comment })
       .then((res) => {
-        console.log(res.data)
-        setComment_id(res.data._id)
-      }).catch(err => console.log(err))
-
-
+       console.log(res.data._id)
       
-      save_comment(id)
+       axios.put("http://localhost:5000/savecomment", {post_id: id, comment_id: res.data._id })
+       .then((res) => {
+         console.log(res.data)
+ 
+       }).catch(err => console.log(err))
+
+      }).catch(err => console.log(err))
+  
   }
 
   const save_comment = (id) => {
@@ -102,13 +100,13 @@ const Posts = () => {
    
 
   
-      console.log(comment_id)
+      console.log(commentData)
 
-      axios.put("http://localhost:5000/savecomment", {post_id: id, comment_id: comment_id })
+   /*   axios.put("http://localhost:5000/savecomment", {post_id: id, comment_id: comment_id._id })
       .then((res) => {
         console.log(res.data)
 
-      }).catch(err => console.log(err))
+      }).catch(err => console.log(err))*/
 
   }
 
@@ -119,7 +117,6 @@ const Posts = () => {
       </div>
     )
   } else
-    console.log(posts)
   return (
 
 
@@ -159,20 +156,31 @@ const Posts = () => {
 
                         ))}
                       </ul>
-
+                    
                     </div>
                   </div>
                 </div>
                 <div>
                   <div className={styles.description}><h3>Description:</h3>{post.description} </div>
                 </div>
+              
               </div>
 
              
             </div>
   <div>
-                  <input type='text' className={styles.input} onChange={(e) => setComment(e.target.value)} />
-                  <button onClick={() => handleComment(post._id)} className={buttons.button2} >Comment</button>
+                  <input type='text' className={styles.comment_input} onChange={(e) => setComment(e.target.value)} />
+                  <button onClick={() => handleComment(post._id)} className={styles.comment_button} >Comment</button>
+                  <div className={styles.comments}>
+                    {showComments ? (
+                    <div >HELLO
+                      <button onClick={() => setShowComments(false)}>hide comments</button>
+                    </div>
+                    
+                ) : (
+                    <> <button onClick={() => setShowComments(true)}>show comments</button></>
+                )}
+                  </div>
                 </div>
           </div>
         )

frontend/src/pages/Feed.js

@@ -7,12 +7,21 @@ import buttons from '../styles/buttons.module.css'
 import { FaArrowLeft } from 'react-icons/fa';
 import { Link } from 'react-router-dom'
 import axios from 'axios'
-
+import { useNavigate } from 'react-router-dom'
 
 const Feed = () => {
     const [profileData, setProfileData] = useState()
     const [loading, setLoading] = useState(true)
     const [openPost, setOpenPost] = useState(false)
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const navigate = useNavigate();
+
+
+    const logout = () => {
+        localStorage.removeItem("token")
+        setIsLoggedIn(false)
+        navigate('/')
+      }
 
     const fetchProfile = async () => {
 
@@ -31,9 +40,26 @@ const Feed = () => {
 
 
     }
+    const checkLoggedIn = async () => {
 
-    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (!token) {
+          logout()
+          return;
+        }
+        const response = await axios.get('http://localhost:5000/profile', {
+          headers: { Authorization: `Bearer ${token}` },
+        }).then((res) => {
+          setIsLoggedIn(true);
+        }).catch(err => {
+          localStorage.removeItem("token")
+          logout()
+        })
+      }
 
+
+    useEffect(() => {
+        checkLoggedIn()
         fetchProfile()
 
     }, [])
@@ -51,7 +77,7 @@ const Feed = () => {
 
         return (
 
-            <div>
+            <div className={styles.feed}>
                 <div className={styles.header}>
 
                     <div className={styles.header_photo}> <img className={styles.posts_header_img} src={`http://localhost:5000/uploads/${profileData.photo}`} /></div>
@@ -59,12 +85,12 @@ const Feed = () => {
                     <div className={styles.header_button}><button onClick={handleOpenPost} className={buttons.button3}>add post +
                     </button></div>
                 </div>
-                <div className={buttons.arrow}><Link to='/'><FaArrowLeft /></Link></div>
-                <div> {openPost ? (
-                    <Post/>
+                <div className={buttons.arrow}><Link to='/'><FaArrowLeft /> Home</Link></div>
+                {openPost ? (
+                    <div className={styles.body}> <Post /></div>
                 ) : (
-                   <></>
-                )}</div>
+                    <></>
+                )}
 
 
                 <div className={styles.container} >

frontend/src/pages/Login.js

@@ -17,11 +17,7 @@ const Login = () => {
 
         <p>or register <Link to='/register'>here</Link></p>
       </div>
-      <div className={styles.right}>
-        <div className={styles.image_container}>
-          <img src='../content/cheers.jpg' />
-        </div>
-      </div>
+
     </div>
   )
 }

frontend/src/pages/Profile.js

@@ -74,7 +74,7 @@ const Profile = () => {
     return (
       <>
         <div className={styles.header}>
-        <div className={buttons.arrow}><Link to='/'><FaArrowLeft /></Link></div>
+        <div className={buttons.arrow}><Link to='/'><FaArrowLeft /> Home</Link></div>
           <h1>Welcome to your profile page</h1>
           <p>Redirect through these links</p>
 

frontend/src/pages/Register.js

@@ -9,14 +9,9 @@ const Register = () => {
   return (
     <div className={styles.parent}>
       <div className={styles.left}>
-      <div className={buttons.arrow}><Link to='/'><FaArrowLeft /></Link></div>
+        <div className={buttons.arrow}><Link to='/'><FaArrowLeft /></Link></div>
         <h1 className={styles.label}>Register</h1>
-        <SignUp/>
-      </div>
-      <div className={styles.right}>
-        <div className={styles.image_container}>
-          <img src='../content/cheers.jpg' />
-        </div>
+        <SignUp />
       </div>
     </div>
   )

frontend/src/styles/buttons.module.css

@@ -41,11 +41,11 @@
   .arrow{
     position: absolute;
     justify-self: left;
-    margin: 15px;
-    width: 40px;
+    margin: 20px;
+    width: 100px;
     height: 40px;
-    border-radius: 50%;
-    background: rgb(0, 0, 0);
+    border-radius: 20px;
+    background: #5192b1;
     display: flex;
     justify-content: center;
     text-align: center;
@@ -57,19 +57,15 @@
   .arrow:hover{
    transform: scale(1.2);
     
-  }
-  .arrow:hover a{
-    transform: scale(1.1);
-    
-    
   }
   .arrow a{
-    color: rgb(255, 251, 190);
+    color: rgb(255, 255, 255);
     font-size: 120%;
     justify-self: center;
     align-items: center;
     justify-content: center;
     display: flex;
+    text-decoration: none;
   }
   .button2 {
     font-family: 'Outfit', sans-serif;

frontend/src/styles/feed.module.css

@@ -17,6 +17,17 @@ textarea {
   resize: none;
   font-family: 'Outfit', sans-serif;
 
+}
+.body{
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 1;
+  background-color: rgba(46, 46, 46, 0.582);
+
 }
 
 .pick_file {
@@ -72,7 +83,6 @@ textarea {
 
 .header{
   height: 8vh;
-  margin-bottom: 5px;
   background-color:#71caf3;
   box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
   align-items: center;
@@ -125,57 +135,110 @@ margin: auto;
 
 .post_container {
   height: 65vh;
-  align-self: center;
-  justify-self: center;
-  margin-left: auto;
-  margin-right: auto;
   margin-top: 200px;
-  width:93%;
-  display: flex;
   flex-direction: column;
   box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
-  background-color: #F28482;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 10px;
+  border: 1px solid rgba(147, 164, 165, 0.2);
+  box-shadow: 0 8px 23px 0 rgba(85, 85, 85, 0.651);
+  background: #6e979ca6;
+  margin: auto;
+  padding: 20px;
 }
 
 
 .post_header{
-  margin-top: 100px;
    margin: 10px;
    display: flex;
-   width: 100%;
    color: white;
+   text-align: center;
+
 }
 .input_fields{
   display: flex;
   flex-direction: column;
+  text-align: center;
+
   
 }
 
 .post_input1 {
-  border: none;
-  background-color: rgb(235, 235, 235);
+  background-color: rgba(235, 235, 235, 0.63);
   width: 500px;
   height: 30px;
   color: rgb(0, 0, 0);
   outline: none;
   border-radius: 4px;
-  border: 2px solid rgb(255, 255, 255);
+  border: 1px solid rgba(172, 171, 171, 0.692);
   margin-top: 10px;
 
 }
 
 .post_input2 {
   border: none;
-  background-color: rgb(235, 235, 235);
+  background-color: rgba(235, 235, 235, 0.61);
   width: 500px;
   height: 100px;
   color: rgb(0, 0, 0);
   outline: none;
   border-radius: 4px;
-  border: 2px solid rgb(255, 255, 255);
+  border: 1px solid rgba(172, 171, 171, 0.616);
+}
+.comment_input {
+  background-color: rgba(235, 235, 235, 0.61);
+  width: 770px;
+  height: 27px;
+  color: rgb(0, 0, 0);
+  border:none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;  
 }
+.comment_button {
+  font-family: 'Outfit', sans-serif;
+  appearance: none;
+  background-color: #ffcd6f;
+border:none;
+outline: none;
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: normal;
+  height: 30px;
+  width: 130px;
+  outline: none;
+  text-align: center;
+  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  will-change: transform;
+  box-sizing: border-box;
 
 
+ 
+ 
+ }
+ .comment_button:hover {
+  color: #ffffff;
+  background-color: #5cbbd8;
+  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
+ }
+ 
+ .comment_button:active {
+  box-shadow: none;
+ }
+.comments{
+   width:900px;
+   min-height: 50px;
+   border: solid 1px rgba(128, 128, 128, 0.644);
+   border-bottom-left-radius: 5px;
+   border-bottom-right-radius: 5px;
+
+ }
 .delete {
   background: rgb(182, 55, 55);
   color: rgb(255, 255, 255);
@@ -211,12 +274,10 @@ margin: auto;
 
 
 .posts_container {
-  min-height: 35vh;
+  min-height: 300px;
   width: 900px;
   display: flex;
-  
   background-color: white;
-  border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
   text-align: left;
@@ -236,28 +297,12 @@ margin: auto;
   grid-gap: 10px;
 }
 
-.preview_img_container {
-  width: 300px;
-  /* set width of image container */
-  height: 300px;
-  border-radius: 50%;
-  /* make image container circular */
-  overflow: hidden;
-  /* Add display flex to center image vertically */
-  align-items: center;
-  /* Center image vertically */
-  justify-content: center;
-  /* Center image horizontally */
-  margin-left: 20px;
-}
 
 .post_img_container {
-  width: 300px;
+  width: 100%;
   /* set width of image container */
-  height: 35vh;
+  height: 100%;
   /* set height of image container */
-  border-bottom-left-radius: 10px;
-
   overflow: hidden;
   display: flex;
   /* Add display flex to center image vertically */
@@ -271,7 +316,7 @@ margin: auto;
 
 .post_img_container img {
 
-  height: 100%;
+  height: 300px;
   width: 100%;
   object-fit: cover;
 }
@@ -323,7 +368,7 @@ margin: auto;
 
 .posts_header {
   height: 55px;
-  background-color: #F28482;
+  background-color:#71caf3;
   margin-top: 30px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
@@ -332,7 +377,7 @@ margin: auto;
   color: white;
   display: flex;
   align-items: center;
-
+  width: 900px;
 }
 
 .posts_header_img {

frontend/src/styles/login.module.css

@@ -3,8 +3,15 @@ p{
 }
 
 .parent{
-  display: flex;
+  background-image: url('../../public/content/register.jpg');
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
   height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
 }
 .arrow{
   position: absolute;
@@ -42,42 +49,28 @@ p{
 }
 .left{
  width: 30%;
- background: #ffffff;
- border-right: solid 4px #000000;
+ background: #ffffffe1;
+ border: solid 1px #929292;
  box-shadow: 200px 300px 300px 400px rgba(8, 8, 8, 0.863);
  backdrop-filter: blur(10px);
- -webkit-backdrop-filter: blur(10px);
- text-align: center;
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 10px;
+  box-shadow: 0 8px 23px 0 rgba(255, 255, 255, 0.2);
+padding: 10px;
+border-radius: 10px;
+
 
 }
 .left h1{
-  margin: 10;
+  margin: 0;
   font-size: 300%;
   color: #203ec5;
   text-align: center;
 
 }
-.right{
-  width: 70%;
-  height: 100vh;
-  background: black;
-}
-.image_container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
 
-.image_container img{
-  max-width: 150%;
-  max-height: 150%;
-  object-fit: cover;
-}
 .input {
-  max-width: 190px;
+  max-width: 200px;
   height: 44px;
   background-color: #05060f0a;
   border-radius: .5rem;

frontend/src/styles/profile.module.css

@@ -19,7 +19,7 @@ h3{
     display: block;
     overflow: hidden;
     margin: 20px auto;
-    border: 3px solid rgb(0, 0, 0);
+    border: 1px solid rgb(156, 156, 156);
     
 }
 .profile{
@@ -27,12 +27,13 @@ h3{
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 5px;
-    border: 2px solid rgb(0, 0, 0);
+    border: 1px solid rgb(156, 156, 156);
     box-shadow: 0 8px 23px 0 rgba(37, 37, 37, 0.562);
     text-align: center;
     width: 40vw;
     margin: 100px auto;
     min-height: 50vh;
+   
     
 }
 .header{