Update Gary with master

client/package.json

@@ -12,6 +12,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
+    "react-star-rating-component": "^1.4.1",
     "styled-components": "^4.1.1"
   },
   "scripts": {

client/src/Conclusion.js

@@ -2,52 +2,104 @@ import React, {Component} from 'react';
 import NavBar from "./NavBar";
 import Footer from "./Footer";
 import styled from 'styled-components';
+import StarRatingComponent from 'react-star-rating-component';
+
 const SubHeader = styled.h2`
     padding-top: 10%;
     margin-top: -10%;
     color: #424242;
     font-family: 'Roboto';
+    font-weight: 500;
 `
 const MainHeader = styled.h1`
     padding-top: 10%;
     margin-top: -10%;
     color: black;
-    font-size: 3em;
+    font-size: 2.2em;
     font-family: 'Roboto';
+    font-weight: 700;
+    margin-bottom: 1%;
 `
+const FrameworkName = styled.h2`
+    color: #424242;
+    font-family: 'Roboto';
+    font-weight: 500;
+`;
 const Content = styled.p`
     font-family: 'Roboto';
 `
 const PageContent = styled.div`
-    padding: 6% 19% 2%;
-`
-export default class Conclusion extends Component {
-    render(){
-        return(
-           <div>
-               <NavBar/>
-               <PageContent>
-              <MainHeader>
-              Rating</MainHeader>
-<Content> i want to die </Content>
-<MainHeader> Expectations and Difficulty </MainHeader>
-<SubHeader>Ease of Use </SubHeader>
-<Content> Regarding React, the framework was fairly simple to install, but the framework did not meet our expectations on its ease of use.
-The framework was rather complicated, and because it wasn’t intuitive, the project required a lot more research than other frameworks would have.
- </Content>
-<SubHeader>Learning Curve </SubHeader>
-<Content>We would consider that React has a fairly steep learning curve compared to regular HTML and Javascript.
- HTML and Javascript was much easier to get a grasp on and required minimal self teaching, while React required numerous hours to grasp a single concept.
- </Content>
- <MainHeader>Afterthoughts </MainHeader>
- <Content>In retrospect, we should’ve studied React in greater detail to understand all the little nuances that React has.
- This would’ve cut down the amount of work we needed to put in by a significant amount.
-
+    padding-left: 3%;
+    padding-top: 6%;
+    padding-right: 19% ;
+`;
+const RatingContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+`;
+const NameAndRatingDiv = styled.div`
+    margin-right: 3%;
+`;
 
- </Content>
-              </PageContent>
-              <Footer/>
-              </div>
+export default class Conclusion extends Component {
+    render() {
+        return (
+            <div>
+                <NavBar/>
+                <PageContent>
+                    <MainHeader>
+                        Framework Ratings
+                    </MainHeader>
+                    <RatingContainer>
+                        <NameAndRatingDiv>
+                            <FrameworkName>
+                                React
+                            </FrameworkName>
+                            <StarRatingComponent
+                                name="FrameworkRating"
+                                value={4}
+                            />
+                        </NameAndRatingDiv>
+                        <NameAndRatingDiv>
+                            <FrameworkName>
+                                NodeJS
+                            </FrameworkName>
+                            <StarRatingComponent
+                                name="FrameworkRating"
+                                value={3}
+                            />
+                        </NameAndRatingDiv>
+                    </RatingContainer>
+                    <MainHeader> Our Experience </MainHeader>
+                    <SubHeader>Ease of Use </SubHeader>
+                    <Content>
+                        NodeJS was fairly simple to install and set up. We read up that it was a very popular and
+                        well documented back-end framework, which is why we chose it.
+                        Regarding React, the framework was fairly simple to install, but the framework did not
+                        meet our expectations on its ease of use. Wayne had a lot of experience with React so he helped
+                        with the learning process. However, the framework was rather complicated, and because it
+                        wasn’t intuitive, developing the project required a lot more research than other frameworks
+                        would have.
+                    </Content>
+                    <SubHeader>Learning Curve </SubHeader>
+                    <Content>We would consider that React has a fairly steep learning curve compared to regular HTML and
+                        Javascript. HTML and Javascript was much easier to get a grasp on and required minimal self
+                        teaching, while
+                        React was significantly more challenging because we had internalize new concepts such as props,
+                        state and the use of JSX elements.<br/>
+                        The learning curve of NodeJS was much steeper than React & we had a lot of trouble determining
+                        how to implement Express route handlers or handle POST, GET requests.
+                    </Content>
+                    <MainHeader>Afterthoughts </MainHeader>
+                    <Content>In retrospect, we should’ve studied both React and NodeJS in greater detail to understand
+                        the nuances of both frameworks has. This would’ve reduced the amount of work required by a
+                        significant amount. Despite its difficulties, we did recognize that these are frameworks are immensely
+                        powerful and versatile, once mastered. In addition, considering its current popularity, we do not
+                        regret choosing it.
+                    </Content>
+                </PageContent>
+                <Footer/>
+            </div>
         )
     }
 

client/src/CreditTabs.js

@@ -7,7 +7,7 @@ import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 import styled from 'styled-components';
 import Buowen from './assets/meirl.png';
-import Brandon from './assets/brandone.png';
+import Brandon from './assets/brandone.jpg';
 import Jason from './assets/json.png';
 import Wayne from './assets/wane.png';
 
@@ -26,10 +26,18 @@ const Header = styled.h2`
     font-family: 'Roboto';
     font-weight: 500;
 `
+const MainHeader = styled.h1`
+    padding-top: 5%;
+    margin-top: -8%;
+    color: black;
+    font-size: 2.5em;
+    font-family: 'Roboto';
+    font-weight: 700;
+`
 const Content = styled.p`
     font-family: 'Roboto';
     font-weight: 300;
-    font-size: 1.15em
+    font-size: 1.05em
 `
 const Reference = styled.h4`
     font-family: 'Roboto';
@@ -71,6 +79,7 @@ class CreditTabs extends React.Component {
         const {value} = this.state;
         return (
             <div className={classes.root}>
+                <MainHeader> Credits </MainHeader>
                 <AppBar position="static" style={{background: "#424242"}}>
                     <Tabs value={value} onChange={this.handleChange} centered>
                         <Tab label="Buowen Cao"/>
@@ -81,66 +90,78 @@ class CreditTabs extends React.Component {
                 </AppBar>
                 {value === 0 && <TabContainer>
                     <TabContent>
-                        <StyledImg src={Buowen}></StyledImg>
+                        <StyledImg src={Buowen}/>
                         <Content>
-                            <Header>Name:</Header>Buowen Cao
+                            <Header>Student Number:</Header>500833495
                             <Header>Responsibilities:</Header>
                             Created TableContents and Navigation component to search for content on a page
-                            based on it's heading. Design of installation, tutorial, conclusion and credits page using
-                            Styled Components. Wrote content for Frontend portion of the installation page.
+                            based on it's heading.<br/> Design of installation, tutorial, conclusion and credits page
+                            using
+                            Styled Components. <br/>Wrote content for Frontend portion of the Installation page.
                             <Header>References: </Header>
                             <Reference>
-                                https://material-ui.com/demos/drawers/,
-                            </Reference>
-                            <Reference>
+                                https://material-ui.com/demos/drawers/
+                                <br/>
                                 https://material-ui.com/demos/tabs/
                             </Reference>
                         </Content>
                     </TabContent>
                 </TabContainer>}
                 {value === 1 && <TabContainer>
                     <TabContent>
-                        <StyledImg src={Wayne}></StyledImg>
+                        <StyledImg src={Wayne}/>
                         <Content>
-                            <Header>Name:</Header>Wayne Ferrao
+                            <Header>Student Number:</Header>5008112288
                             <Header>Responsibilities:</Header>
-                            Creating the React Router routes & implemented them in the
-                            NavBar. Designed and coded the appearance and functionality of the Home page and Footer.
+                            Installed, configured and linked the NodeJS server with the front end React server. <br/>Created
+                            & implemented the React Router routes, Express route handlers and the navigation bar. <br/>Researched,
+                            designed
+                            and coded the appearance and functionality of the Home page and Footer.<br/>Contributed to
+                            the design
+                            of the Demo page and the back-end instructions on the Installation and Tutorial pages.
                             <Header>References: </Header>
                             <Reference>
-                                https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-reactjs-and-react-native/
-                            </Reference>
-                            <Reference>
-                                https://www.netguru.co/blog/pros-cons-use-node.js-backend
-                            </Reference>
-                            <Reference>
-                                https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png
+                                https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-reactjs-and-react-native/<br/>
+                                https://www.netguru.co/blog/pros-cons-use-node.js-backend<br/>
+                                https://material-ui.com/demos/drawers/<br/>
                             </Reference>
 
                         </Content>
                     </TabContent>
                 </TabContainer>}
                 {value === 2 && <TabContainer>
                     <TabContent>
-                        <StyledImg src={Brandon}></StyledImg>
+                        <StyledImg src={Brandon}/>
                         <Content>
-                            <Header>Name:</Header>Brandon Quach
-                            <Header>Responsibilities:</Header> Stuff
+                            <Header>Student Number:</Header>500834440
+                            <Header>Responsibilities:</Header>
+                            Created Avatars and helped format the Demo Page. <br/>
+                            Contributed to and formatted the Tutorials page.<br/>
+                            Contributed to and formatted the Conclusions page.<br/>
                             <Header>References:</Header>
                             <Reference>
-                                Stuff
+                                https://material-ui.com/demos/avatars/<br/>
+                                https://material-ui.com/api/avatar/ <br/>
+                                https://material-ui.com/layout/grid/
                             </Reference>
                         </Content>
                     </TabContent>
                 </TabContainer>}
                 {value === 3 && <TabContainer>
                     <TabContent>
-                        <StyledImg src={Jason}></StyledImg>
+                        <StyledImg src={Jason}/>
                         <Content>
-                            <Header>Name:</Header>Jason Yu
-                            <Header>Responsiblities:</Header> Demo page, tutorial, conclusion
-                            <Header>References: </Header> <Reference><a
-                            href="https://material-ui.com/demos/cards/">Cards</a>
+
+                            <Header>Student Number:</Header>500828987
+                            <Header>Responsiblities:</Header> Created the cards and contributed to the design of Demo
+                            page.
+                            <br/>
+                            Contributed to the design and content of the Demo tutorial and Conclusion.
+                            <Header>References: </Header> <Reference>
+                            https://material-ui.com/demos/cards/
+                            <br/>
+                            https://material-ui.com/layout/grid/
+
                         </Reference>
                         </Content>
                     </TabContent>

client/src/Demo.js

@@ -54,7 +54,7 @@ export default class Demo extends Component {
                 <br/>
                 <br/>
                 <Grid container justify="center" align Items="center">
-                    <Title>Demo Page</Title>
+                    <Title>Undisputed Top 6 Anime</Title>
                 </Grid>
                 <Grid container justify="center" alignItems="center">
 
@@ -76,15 +76,14 @@ export default class Demo extends Component {
                     />
                 </Grid>
                 <Grid container justify="center" align Items="center">
-                    <StyledH2>Top 6 Animes</StyledH2>
                 </Grid>
                 <Grid container justify="center" align Items="center">
                     <div style={{padding: '0% 12% 0%'}}>
                         <StyledP>
-                            These are the undisputed top  animes of all time. We have discussed for countless minutes
+                            These are the undisputed top anime of all time. We have discussed for countless minutes
                             over which anime belong on this prestigious list and have eliminated
-                            over 5000 other animes that were on our list. We have narrowed them down to the following
-                            animes with a perfect score of 5/7:
+                            over 5000 other anime that were on our list. We have narrowed them down to the following
+                            anime with a perfect score of 5/7.
                         </StyledP>
                     </div>
                 </Grid>

client/src/FWInstallation.js

@@ -23,7 +23,7 @@ const MainHeader = styled.h1`
     padding-top: 10%;
     margin-top: -10%;
     color: black;
-    font-size: 3em;
+    font-size: 2.5em;
     font-family: 'Roboto';
     font-weight: 700;
 `
@@ -178,8 +178,6 @@ export default class FWInstallation extends Component {
                 </div>
                 <Footer/>
             </div>
-
         )
     }
-
 }

client/src/Footer.js

@@ -66,11 +66,13 @@ export default class Footer extends Component {
                             </FooterSTitle>
                             <FooterSubCategory>
                                 <FooterSContent>
-                                    <FooterLink href="https://reactjs.org/">React Docs</FooterLink>
+                                    <FooterLink href="https://reactjs.org/">
+                                        React
+                                    </FooterLink>
                                 </FooterSContent>
                                 <FooterSContent>
                                     <FooterLink href="https://nodejs.org/en/">
-                                        NodeJS Docs
+                                        NodeJS
                                     </FooterLink>
                                 </FooterSContent>
                                 <FooterSContent>

client/src/NavBar.js

@@ -1,6 +1,3 @@
-/*
-Changes made: I changed position of appbar to relative and changed the zindex
-*/
 import React, {Component} from "react";
 import {AppBar, Button, Drawer, ListItem, ListItemIcon, ListItemText, MenuList, Toolbar} from "@material-ui/core";
 import {Routes} from "./routes";
@@ -51,4 +48,4 @@ export default class NavBar extends Component {
             </AppBar>
         );
     }
-}
+}