show all posts within a distance of 10km

src/App.scss

@@ -21,6 +21,10 @@ h1 {
   margin-bottom: 20px;
 }
 
+h3 {
+  color: #ff9908;
+}
+
 .new-post-form {
   display: flex;
   flex-direction: column;

src/components/Post.js

@@ -5,14 +5,22 @@ import { faCaretUp, faCaretDown } from '@fortawesome/free-solid-svg-icons';
 const Post = ({ post, upvotePost, downvotePost }) => {
     return (
         <div className="post">
+            <div className="post-container">
+                <div className="post-title">
+                    <h3>{post.title}</h3>
+                </div>
                 <div className="post-content">
-                <p>{post.text}</p>
+                    <p>{post.content}</p>
+                </div>
             </div>
             <div className="votes">
-                <button onClick={(e) => { e.stopPropagation(); upvotePost(post.id); }}>
+                <button onClick={(e) => {
+                    e.stopPropagation();
+                    upvotePost(post.id);
+                }}>
                     <FontAwesomeIcon icon={faCaretUp} />
                 </button>
-                <span>{post.upvotes - post.downvotes}</span>
+                <span>{post.reactions.positive - post.reactions.negative}</span>
                 <button onClick={(e) => { e.stopPropagation(); downvotePost(post.id); }}>
                     <FontAwesomeIcon icon={faCaretDown} />
                 </button>