Merge pull request wyncode#18 from wyncode/thip/enhancement-11-commun…

…ity-management

updated community ccomponents, fixed API keys.

README.md

@@ -1,27 +1,45 @@
-# Final Project
+# C40 Final - EstateRev
+
+**EstateRev**\_ is an app that depending where you are wanting to buy or rent a home you get an overview of the community around you, the businesses the schools and even the crime that makes your property or rent increase in price.
+
+## Status
+
+The project is currently done from a functional standpoint on a beginer scale. Though more additional features could be added for a more robust application.
 
 ## Setup
 
-- `git clone` this repo
+- `git` clone into it
 - `cd` into it.
 - `yarn install`
 - `cd client && yarn install`
-- `cp .env.sample .env`
+- `yarn add axios`
+- `yarn add react-bootstrap bootstrap`
+
+## Who
+
+We are Keith, Sebastian, Thip, and Eimy. Wyncode students, developers looking forward to better the world with our ideas and new learned skills.
+
+## How
+
+The idea was to have a fully functional app that would help home buyers and renters view their surroundings depending on the location of the home that they are buying or renting. Users to be able to see what makes their home increase or decrease price according to their surrounding as well as offering them easy management for their home needs depending on the local businesses in the area.
 
-## Available build commands
+We have made use of the CSS, JS, HTML, React, DOM manupulation etc. All the skills we have managed to learn. No specific versions of other software is required to run this app.
 
-- `yarn dev`: Runs BOTH your Express.JS and React developer environment locally at the same time. Any logs coming from Express will be prefaced with `[0]`, any logs from `create-react-app` will be prefaced with `[1]`.
-- `yarn server`: Runs JUST your Express.JS server.
-- `yarn client`: Runs JUST your front-end React app.
+## Install
 
-Open [http://localhost:3000](http://localhost:3000) to view your local React app in the browser. The page will reload if you make edits.
+No install or special configuration is necessary for this project to run other than internet connection for this web based application, and a phone or computer to access it.
 
-## To deploy
+## API Information
 
-NOTE: Heroku specifically runs `npm start`, so don't remove that from your package.json file.
+-We have made use of several APIs available to use for this projecct. For the schools we have used the Great Schools API to pull a list of schools in the area, Google Maps API for a view of the map, Cicero API, Realtor API for a listing of forsale and rental houses, Sendgrid API, Yelp API for some businesses in the area, and the FBI Database API to view the crime and violence around.
 
-- `heroku create your-app-name`
-- `heroku config:set MONGODB_URL=<insertYourAtlasDbUri>`
-- `git push heroku master`
+## How It Works
 
+- The end-user will open up the web-application and land on its landing page which will present a suggestion for us to let them guide the user home.
+- The end-user will then type in the City Name of their choosing into the search form.
+- After inputting in the city and either hitting the magnifying glass they will be able to to view the choice of buying, renting the community and the manage option directed on the top of the search bar.
+- This API feeds us a couple different data points from a selected city depending on the choices made.
+- This response data is then sent through several functional components depending on the choices made. If the user choses to view the community of that neighborhood or city or zipcode then the API will give a call and respond with several API endpoints per component in the community page as the map will be the first to show and under it will show the schools the crime and so forth.
+- The outputs of several components may be shown in the same page.
 
+## Enjoy and be aware of your property surroundings to see how it may increase or decrease it's value.

client/src/Pages/Community/Community.css

@@ -14,7 +14,7 @@
 .GoogleSearchBar {
   border: none;
   box-shadow: 1rem 1rem 1rem 1rem rgba(0, 0, 0, 0.15);
-  width: 1095px;
+  width: 1250px;
   height: 70px;
   padding-left: 10px;
   border: 0;
@@ -69,22 +69,22 @@
   flex-direction: row;
   padding-top: 10px;
   padding-bottom: 10px;
+  margin-left: 50px;
 }
 
 .SayThingsTwo {
   display: flex;
   flex-direction: row;
   padding-top: 10px;
   padding-bottom: 10px;
-  margin-left: -10px;
+  margin-left: -16px;
 }
 
 .SayThingsThree {
   display: flex;
   flex-direction: row;
   padding-top: 10px;
   padding-bottom: 10px;
-  margin-left: -5px;
 }
 
 .OneContent {
@@ -148,3 +148,56 @@
   border-radius: 7px;
   box-shadow: 0.2rem 0.2rem 0.2rem 0.2rem rgba(143, 142, 142, 0.15);
 }
+
+.Avatar {
+  height: 50px;
+  width: auto;
+  padding: 0;
+  margin: 0;
+  background-color: white;
+  border-radius: 50px;
+}
+
+.CommunityCards {
+  display: flex;
+  justify-content: center;
+  display: flex;
+  justify-content: space-between;
+  margin-right: 95px;
+}
+
+.CommunityCardComment {
+  border: 1px solid black;
+  width: 200px;
+  height: 300px;
+  padding: 20px;
+  background-color: #7aacc0;
+  margin-left: 2px;
+}
+
+.ResidentComment {
+  flex-wrap: wrap;
+  margin-top: 40px;
+}
+
+.AvatarName {
+  font-weight: bold;
+  width: 200px;
+  margin-left: -20px;
+}
+
+.less-more-two {
+  height: 200px;
+  margin-top: 85px;
+  width: 3%;
+  font-size: 30px;
+  margin-left: -60px;
+}
+
+.less-more-three {
+  height: 200px;
+  margin-top: 85px;
+  width: 3%;
+  font-size: 30px;
+  margin-right: -60px;
+}

client/src/Pages/Community/Community.jsx

@@ -13,7 +13,6 @@ import Sidewalks from '../../Assests/sidewalk.png';
 import StreetLights from '../../Assests/street-light.png';
 import Thumb from '../../Assests/thumbs.png';
 import Avatar from '../../Assests/avatar.png';
-// import BootstrapCarousel from '../../components/Bootstrap/Bootstrap';
 // import Reps from '../../components/Cicero/Cicero';
 
 function Community() {
@@ -90,15 +89,47 @@ function Community() {
           </div>
         </div>
         <h3 className="LocalsMore">More</h3>
-        {/* <div className="CommunityCards">
-          <img className="Avatar" src={Avatar} alt="Avatar Icon"></img>
-          <h3>John Doe</h3>
-          <p>Resident</p>
-          <p>2 months ago</p>
-          <p></p>
-        </div> */}
+        <div className="CommunityCards">
+          <button className="less-more-two">←</button>
+          <div className="CommunityCardComment">
+            <img className="Avatar" src={Avatar} alt="Avatar Icon"></img>
+            <h3 className="AvatarName">Thip Keovilay</h3>
+            <p>Resident</p>
+            <p>2 months ago</p>
+            <p className="ResidentComment">
+              Great place to live. Lots of bars to go to. Wild times.
+            </p>
+          </div>
+          <div className="CommunityCardComment">
+            <img className="Avatar" src={Avatar} alt="Avatar Icon"></img>
+            <h3 className="AvatarName">Eimy Dunaway</h3>
+            <p>Resident</p>
+            <p>3 months ago</p>
+            <p className="ResidentComment">
+              Lovely place to raise your kids. Great schools.
+            </p>
+          </div>
+          <div className="CommunityCardComment">
+            <img className="Avatar" src={Avatar} alt="Avatar Icon"></img>
+            <h3 className="AvatarName">Keith Bryan</h3>
+            <p>Resident</p>
+            <p>4 months ago</p>
+            <p className="ResidentComment">
+              Great community to meet people. Met my wife here.
+            </p>
+          </div>
+          <div className="CommunityCardComment">
+            <img className="Avatar" src={Avatar} alt="Avatar Icon"></img>
+            <h3 className="AvatarName">Sebastian Arnavat</h3>
+            <p>Resident</p>
+            <p>5 months ago</p>
+            <p className="ResidentComment">
+              Great place to stay inside and not go anywhere.
+            </p>
+          </div>
+          <button className="less-more-three">→</button>
+        </div>
       </div>
-      {/* <BootstrapCarousel></BootstrapCarousel> */}
       <Schools></Schools>
       <Realtor></Realtor>
     </>

client/src/Pages/Manage/Manage.css

@@ -96,7 +96,7 @@ hr {
 .Marker {
   background-color: white;
   margin-top: 20px;
-  height: 44px;
+  height: 43px;
   width: 42px;
   padding: 10px;
 }

client/src/Pages/ManageResults/ManageResults.css

@@ -140,7 +140,7 @@
   box-shadow: 1px 1px 1px 1px rgb(0.1, 0.1, 0.1, 0.1);
   display: flex;
   flex-direction: row;
-  margin-left: 160px;
+  margin-left: 210px;
   padding: 10px;
   margin-bottom: 30px;
 }
@@ -261,3 +261,10 @@
   color: grey;
   padding-right: 153px;
 }
+
+.HireLogo {
+  background-color: #102229;
+  width: 60px;
+  height: 37px;
+  margin-right: 10px;
+}

client/src/Pages/ManageResults/ManageResults.jsx

@@ -14,6 +14,7 @@ import Discounts from '../../Assests/discount.png';
 import Marker from '../../Assests/marker.png';
 import { Link } from 'react-router-dom';
 import Eimy from '../../Assests/eimy.jpg';
+import Logo from '../../Assests/logo.png';
 
 const ManageResults = () => {
   return (
@@ -306,11 +307,7 @@ const ManageResults = () => {
                   </div>
                 </div>
                 <div className="Hires">
-                  <img
-                    className="HireLogo"
-                    src={ReplyRate}
-                    alt="EstateRev Logo"
-                  ></img>
+                  <img className="HireLogo" src={Logo} alt="EstateRev"></img>
                   <p className="HiresNumber">429 hires on EstateRev</p>
                 </div>
               </div>
@@ -404,11 +401,7 @@ const ManageResults = () => {
                   </div>
                 </div>
                 <div className="Hires">
-                  <img
-                    className="HireLogo"
-                    src={ReplyRate}
-                    alt="EstateRev Logo"
-                  ></img>
+                  <img className="HireLogo" src={Logo} alt="EstateRev"></img>
                   <p className="HiresNumber">210 hires on EstateRev</p>
                 </div>
               </div>
@@ -508,11 +501,7 @@ const ManageResults = () => {
                   </div>
                 </div>
                 <div className="Hires">
-                  <img
-                    className="HireLogo"
-                    src={ReplyRate}
-                    alt="EstateRev Logo"
-                  ></img>
+                  <img className="HireLogo" src={Logo} alt="EstateRev"></img>
                   <p className="HiresNumber">7 hires on EstateRev</p>
                 </div>
               </div>
@@ -606,11 +595,7 @@ const ManageResults = () => {
                   </div>
                 </div>
                 <div className="Hires">
-                  <img
-                    className="HireLogo"
-                    src={ReplyRate}
-                    alt="EstateRev Logo"
-                  ></img>
+                  <img className="HireLogo" src={Logo} alt="EstateRev"></img>
                   <p className="HiresNumber">695 hires on EstateRev</p>
                 </div>
               </div>