finished frontend

frontend/public/index.html

@@ -8,6 +8,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="shortcut icon" href="images/logo.ico" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

frontend/src/components/Events.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 
 const Events = (props) => {
   const [state, setState] = useState({
-    user: { username: "" },
+    user: { username: "HyperionLegion" },
     events: [
       {
         id: 1,

frontend/src/components/Main.js

@@ -15,11 +15,13 @@ const Main = (props) => {
       >
         <div className="container">
           <br />
-          <br />
+          <div class="text-center">
-          <br />
+            <img
-          <h1 className="text-primary text-center bg-white rounded-lg shadow-lg p-3 mb-5">
+              class="text-center img-fluid"
-            PoliTalk
+              src="images/logo.png"
-          </h1>
+              width="350px"
+            />
+          </div>
           <br />
           <br />
           <br />
@@ -32,7 +34,7 @@ const Main = (props) => {
         <div className="container">
           <h1 className="d-flex justify-content-center m-2 p-2">About Us</h1>
           <p className="d-flex justify-content-center m-2 p-2">
-            PoliTalk is a politics exchange platform, aiming to create a
+            ThinkOpenly is a politics exchange platform, aiming to create a
             professional and efficient connection between underrepresented
             minority groups and politics. Community members can post questions
             or concerns and other members can +1 the post. Professional
@@ -54,15 +56,27 @@ const Main = (props) => {
 
             <div className="row exp-grids py-3 d-inline-flex justify-content-center">
               <div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
-                <img src="images/browse.png" alt=" " className="img-fluid" />
+                <img src="images/posts.jpg" alt=" " className="img-fluid" />
                 <div className="exp wthree">
-                  <h5>Browse Stocks</h5>
+                  <h5>Browse Posts</h5>
                   <div className="clearfix"></div>
                   <p>
-                    Easily browse through stocks and see their past. Change the
+                    Easily browse through NLP generated recommended posts in
-                    scale of the graph to your pleasing. Then if you wish to
+                    your feed. These posts match your previous interests and
-                    hold a position, specify the amount of money you wish to
+                    recent trending political and social subjects.
-                    donate and submit.
+                  </p>
+                </div>
+              </div>
+              <div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
+                <img src="images/events.jpg" alt=" " className="img-fluid" />
+                <div className="exp wthree">
+                  <h5>Browse Events</h5>
+                  <div className="clearfix"></div>
+
+                  <p>
+                    Browse local community political events that match your
+                    political interests in order to best advocate your concerns
+                    and have your voice heard.
                   </p>
                 </div>
               </div>
@@ -70,22 +84,20 @@ const Main = (props) => {
                 <br />
                 <br />
                 <br />
-                <img src="images/logo.png" alt=" " className="img-fluid" />
+                <img src="images/post.jpg" alt=" " className="img-fluid" />
                 <div className="exp wthree">
                   <br />
                   <br />
                   <br />
 
-                  <h5>Charities</h5>
+                  <h5>Discussion Thread</h5>
                   <div className="clearfix"></div>
 
                   <p>
-                    Help out your favorite charities while learning and
+                    View someone's post and leave a like or comment to further
-                    practicing trading. The charities will receive the initial
+                    discuss the thread or show your support. Each like or
-                    buy price. Then, you can set a percentage of the profits
+                    comment will make your feed give more posts or events that
-                    that also goes to charity. In this era, instead of a simple
+                    are similar.
-                    donation, you can use our trading platform to trade for your
-                    charities.
                   </p>
                 </div>
               </div>
@@ -93,21 +105,24 @@ const Main = (props) => {
                 <br />
                 <br />
                 <br />
-                <img src="images/portfolio.png" alt=" " className="img-fluid" />
+                <img
+                  src="images/createpost.jpg"
+                  alt=" "
+                  className="img-fluid"
+                />
                 <div className="exp wthree">
                   <br />
                   <br />
                   <br />
 
-                  <h5>Portfolio</h5>
+                  <h5>Create Posts</h5>
                   <div className="clearfix"></div>
 
                   <p>
-                    Easily manage your portfolio with Reinvest. Here you can see
+                    Create your own post anonymously for free and easily. Your
-                    all the positions you currently hold as well as the initial
+                    post will be seen by many others as well as politicians that
-                    buy price and quantity. You can sell the stock by clicking
+                    can possibly advocate and recognize your interests for your
-                    Sell for the desired stock. You can also see the current
+                    given enough support.
-                    earnings for yourself and the charity.
                   </p>
                 </div>
               </div>

frontend/src/components/Posts.js

@@ -2,15 +2,36 @@ import React, { useState, useEffect } from "react";
 
 const Posts = (props) => {
   const [state, setState] = useState({
-    user: { username: "" },
+    user: { username: "HyperionLegion" },
     posts: [
       {
         id: 1,
         upvotes: 2,
         text: "Action for Climate Change",
-        comments: 0,
+        comments: 6,
         topics: ["climate change", "air pollution"],
       },
+      {
+        id: 2,
+        upvotes: 19,
+        text: "Cancel Culture",
+        comments: 14,
+        topics: ["cancel", "celebrities"],
+      },
+      {
+        id: 3,
+        upvotes: 152,
+        text: "Stimulus Checks",
+        comments: 40,
+        topics: ["stimulus checks"],
+      },
+      {
+        id: 4,
+        upvotes: 24,
+        text: "Asian Hate Crimes",
+        comments: 14,
+        topics: ["hate", "Asian"],
+      },
     ],
   });
 

website/index.html

@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PoliTalk</title>
+    <title>ThinkOpenly</title>
+    <link rel="shortcut icon" href="images/logo.ico" />
     <link rel="stylesheet" href="css/index.css" />
     <link
       rel="stylesheet"
@@ -16,7 +17,7 @@
     <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
       <a href="#reinvest"
         ><h1 class="navbar-brand" width="100px" href="#reinvest">
-          PoliTalk
+          ThinkOpenly
         </h1></a
       >
       <button
@@ -70,13 +71,14 @@
     >
       <div class="container">
         <br />
-        <br />
+        <div class="text-center">
-        <br />
+          <img
-        <h1
+            class="text-center img-fluid"
-          class="text-primary text-center bg-white rounded-lg shadow-lg p-3 mb-5"
+            src="images/logo.png"
-        >
+            width="350px"
-          PoliTalk
+          />
-        </h1>
+        </div>
+
         <br />
         <br />
         <br />
@@ -89,7 +91,7 @@
       <div class="container">
         <h1 class="d-flex justify-content-center m-2 p-2">About Us</h1>
         <p class="d-flex justify-content-center m-2 p-2">
-          PoliTalk is a politics exchange platform, aiming to create a
+          ThinkOpenly is a politics exchange platform, aiming to create a
           professional and efficient connection between underrepresented
           minority groups and politics. Community members can post questions or
           concerns and other members can +1 the post. Professional legislators
@@ -108,15 +110,27 @@
 
           <div class="row exp-grids py-3 d-inline-flex justify-content-center">
             <div class="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
-              <img src="images/browse.png" alt=" " class="img-fluid" />
+              <img src="images/posts.jpg" alt=" " class="img-fluid" />
               <div class="exp wthree">
-                <h5>Browse Stocks</h5>
+                <h5>Browse Posts</h5>
                 <div class="clearfix"></div>
                 <p>
-                  Easily browse through stocks and see their past. Change the
+                  Easily browse through NLP generated recommended posts in your
-                  scale of the graph to your pleasing. Then if you wish to hold
+                  feed. These posts match your previous interests and recent
-                  a position, specify the amount of money you wish to donate and
+                  trending political and social subjects.
-                  submit.
+                </p>
+              </div>
+            </div>
+            <div class="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
+              <img src="images/events.jpg" alt=" " class="img-fluid" />
+              <div class="exp wthree">
+                <h5>Browse Events</h5>
+                <div class="clearfix"></div>
+
+                <p>
+                  Browse local community political events that match your
+                  political interests in order to best advocate your concerns
+                  and have your voice heard.
                 </p>
               </div>
             </div>
@@ -124,21 +138,20 @@
               <br />
               <br />
               <br />
-              <img src="images/logo.png" alt=" " class="img-fluid" />
+              <img src="images/post.jpg" alt=" " class="img-fluid" />
               <div class="exp wthree">
                 <br />
                 <br />
                 <br />
 
-                <h5>Charities</h5>
+                <h5>Discussion Thread</h5>
                 <div class="clearfix"></div>
 
                 <p>
-                  Help out your favorite charities while learning and practicing
+                  View someone's post and leave a like or comment to further
-                  trading. The charities will receive the initial buy price.
+                  discuss the thread or show your support. Each like or comment
-                  Then, you can set a percentage of the profits that also goes
+                  will make your feed give more posts or events that are
-                  to charity. In this era, instead of a simple donation, you can
+                  similar.
-                  use our trading platform to trade for your charities.
                 </p>
               </div>
             </div>
@@ -146,21 +159,20 @@
               <br />
               <br />
               <br />
-              <img src="images/portfolio.png" alt=" " class="img-fluid" />
+              <img src="images/createpost.jpg" alt=" " class="img-fluid" />
               <div class="exp wthree">
                 <br />
                 <br />
                 <br />
 
-                <h5>Portfolio</h5>
+                <h5>Create Posts</h5>
                 <div class="clearfix"></div>
 
                 <p>
-                  Easily manage your portfolio with Reinvest. Here you can see
+                  Create your own post anonymously for free and easily. Your
-                  all the positions you currently hold as well as the initial
+                  post will be seen by many others as well as politicians that
-                  buy price and quantity. You can sell the stock by clicking
+                  can possibly advocate and recognize your interests for your
-                  Sell for the desired stock. You can also see the current
+                  given enough support.
-                  earnings for yourself and the charity.
                 </p>
               </div>
             </div>