first commit

.gitignore

@@ -1,7 +1,8 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # dependencies
-/node_modules 
+node_modules
+dist
 
 
 # testing

netlify.toml

@@ -0,0 +1,6 @@
+[build]
+command = "npm run build"
+publish = "dist"
+
+[dev]
+publish = "src"

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "facerecognitionbrain",
+  "name": "smartbrain",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -9,12 +9,19 @@
     "react-parallax-tilt": "^1.7.164",
     "react-scripts": "^5.0.1",
     "tachyons": "^4.12.0"
+  },
+   "devDependencies": {
+    "netlify-cli": "*"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+     "dev": "react-scripts start",
+    "start": "netlify dev",
+    "build": "mkdir -p dist && cp -R src/* dist/",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+    "eslintConfig": {
+    "extends": "react-app"
   },
   "browserslist": {
     "production": [
@@ -27,5 +34,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+   "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
+  "main": "index.js",
+  "devDependencies": {},
+  "author": "Maria Corban",
+  "license": "ISC"
 }
+

src/App.css

@@ -1,5 +1,11 @@
+body{
+  background-image: url("https://img.freepik.com/premium-vector/abstract-blue-background-with-modern-concept_191234-1066.jpg");
+  background-repeat: no-repeat; /* Do not repeat the image */
+  background-size: cover; /* Resize the background image to cover the entire container */
+}
 .App {
   text-align: center;
+
 }
 
 .center {
@@ -15,3 +21,6 @@
   left: 0;
   z-index: -1;
 }
+.black{
+  color:white;
+}

src/App.js

@@ -42,6 +42,11 @@ class App extends Component {
     }})
   }
 
+  componentDidMount(){
+    fetch('http://localhost:3000')
+    .then(response => response.json())
+    .then(console.log)
+  }
   calculateFaceLocation = (data) => {
     const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box;
     const image = document.getElementById('inputimage');
@@ -65,7 +70,7 @@ class App extends Component {
 
   onButtonSubmit = () => {
     this.setState({imageUrl: this.state.input});
-      fetch('http://localhost:3000/imageurl', {
+      fetch('https://smartbrain-frontend-3e26.onrender.com/imageurl', {
         method: 'post',
         headers: {'Content-Type': 'application/json'},
         body: JSON.stringify({
@@ -75,7 +80,7 @@ class App extends Component {
       .then(response => response.json())
       .then(response => {
         if (response) {
-          fetch('http://localhost:3000/image', {
+          fetch('https://smartbrain-frontend-3e26.onrender.com/image', {
             method: 'put',
             headers: {'Content-Type': 'application/json'},
             body: JSON.stringify({
@@ -107,7 +112,7 @@ class App extends Component {
     const { isSignedIn, imageUrl, route, box } = this.state;
     return (
       <div className="App">
-        <ParticlesBg type="circle" bg={true} />
+        <ParticlesBg type="cobweb" bg={true} />
         <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange} />
         { route === 'home'
           ? <div>

src/components/ImageLinkForm/ImageLinkForm.css

@@ -1,11 +1,12 @@
 .form {
   width: 700px;
-  background:
-  radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
-  radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
-  linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
-  linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
-  linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
-  linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
+  background-color:black;
+background-image:
+radial-gradient(white, rgba(3, 0, 0, 0.952) 2px, transparent 40px),
+radial-gradient(white, rgba(8, 1, 1, 0.979) 1px, transparent 30px),
+radial-gradient(white, rgb(7, 0, 0) 2px, transparent 40px),
+radial-gradient(rgb(12, 1, 1), rgba(5, 0, 0, 0.973) 2px, transparent 30px);
+background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
+background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
   background-size:40px 60px;
 }

src/components/ImageLinkForm/ImageLinkForm.js

@@ -4,14 +4,14 @@ import './ImageLinkForm.css';
 const ImageLinkForm = ({ onInputChange, onButtonSubmit }) => {
   return (
     <div>
-      <p className='f3'>
-        {'This Magic Brain will detect faces in your pictures. Git it a try.'}
+      <p className='f3 navy b'>
+        {'This Magic Brain will detect faces in your pictures. Give it a try.'}
       </p>
       <div className='center'>
         <div className='form center pa4 br3 shadow-5'>
-          <input className='f4 pa2 w-70 center' type='tex' onChange={onInputChange}/>
+          <input className='f4 pa2 w-70 center' type='text' onChange={onInputChange}/>
           <button
-            className='w-30 grow f4 link ph3 pv2 dib white bg-light-purple'
+            className='w-30 grow f4 link ph3 pv2 dib white bg-navy'
             onClick={onButtonSubmit}
           >Detect</button>
         </div>

src/components/Navigation/Navigation.js

@@ -4,14 +4,14 @@ const Navigation = ({ onRouteChange, isSignedIn }) => {
     if (isSignedIn) {
       return (
         <nav style={{display: 'flex', justifyContent: 'flex-end'}}>
-          <p onClick={() => onRouteChange('signout')} className='f3 link dim black underline pa3 pointer'>Sign Out</p>
+          <p onClick={() => onRouteChange('signout')} className='f3 link dim b white  pa3 pointer'>Sign Out</p>
         </nav>
       );
     } else {
       return (
         <nav style={{display: 'flex', justifyContent: 'flex-end'}}>
-          <p onClick={() => onRouteChange('signin')} className='f3 link dim black underline pa3 pointer'>Sign In</p>
-          <p onClick={() => onRouteChange('register')} className='f3 link dim black underline pa3 pointer'>Register</p>
+          <p onClick={() => onRouteChange('signin')} className='f3 link dim b white  pa3 pointer'>Sign In</p>
+          <p onClick={() => onRouteChange('register')} className='f3 link dim b white pa3 pointer'>Register</p>
         </nav>
       );
     }

src/components/Rank/Rank.js

@@ -3,10 +3,10 @@ import React from 'react';
 const Rank = ({ name, entries }) => {
   return (
     <div>
-      <div className='white f3'>
+      <div className='black b f3'>
         {`${name}, your current entry count is...`}
       </div>
-      <div className='white f1'>
+      <div className='red f1'>
         {entries}
       </div>
     </div>

src/components/Register/Register.js

@@ -23,7 +23,7 @@ class Register extends React.Component {
   }
 
   onSubmitSignIn = () => {
-    fetch('http://localhost:3000/register', {
+    fetch('https://smartbrain-frontend-3e26.onrender.com/register', {
       method: 'post',
       headers: {'Content-Type': 'application/json'},
       body: JSON.stringify({
@@ -43,15 +43,15 @@ class Register extends React.Component {
 
   render() {
     return (
-      <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
+      <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center bg-lightest-blue ">
         <main className="pa4 black-80">
           <div className="measure">
             <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
               <legend className="f1 fw6 ph0 mh0">Register</legend>
               <div className="mt3">
                 <label className="db fw6 lh-copy f6" htmlFor="name">Name</label>
                 <input
-                  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
+                  className="pa2 input-reset ba bg-transparent hover-bg-blue hover-white w-100"
                   type="text"
                   name="name"
                   id="name"
@@ -61,7 +61,7 @@ class Register extends React.Component {
               <div className="mt3">
                 <label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
                 <input
-                  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
+                  className="pa2 input-reset ba bg-transparent hover-bg-blue hover-white w-100"
                   type="email"
                   name="email-address"
                   id="email-address"
@@ -71,7 +71,7 @@ class Register extends React.Component {
               <div className="mv3">
                 <label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
                 <input
-                  className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
+                  className="b pa2 input-reset ba bg-transparent hover-bg-blue hover-white w-100"
                   type="password"
                   name="password"
                   id="password"
@@ -94,4 +94,4 @@ class Register extends React.Component {
   }
 }
 
-export default Register;
+export default Register;

src/components/Signin/Signin.js

@@ -18,7 +18,7 @@ class Signin extends React.Component {
   }
 
   onSubmitSignIn = () => {
-    fetch('http://localhost:3000/signin', {
+    fetch('https://smartbrain-frontend-3e26.onrender.com/signin', {
       method: 'post',
       headers: {'Content-Type': 'application/json'},
       body: JSON.stringify({
@@ -38,15 +38,15 @@ class Signin extends React.Component {
   render() {
     const { onRouteChange } = this.props;
     return (
-      <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
+      <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center bg-lightest-blue  ">
         <main className="pa4 black-80">
           <div className="measure">
             <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
-              <legend className="f1 fw6 ph0 mh0">Sign In</legend>
+              <legend className="f1 fw6 ph0 mh0 " >Sign In</legend>
               <div className="mt3">
                 <label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
                 <input
-                  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
+                  className="pa2 input-reset ba bg-transparent hover-bg-blue hover-white w-100"
                   type="email"
                   name="email-address"
                   id="email-address"
@@ -56,7 +56,7 @@ class Signin extends React.Component {
               <div className="mv3">
                 <label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
                 <input
-                  className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
+                  className="b pa2 input-reset ba bg-transparent hover-bg-blue hover-white w-100"
                   type="password"
                   name="password"
                   id="password"
@@ -73,7 +73,7 @@ class Signin extends React.Component {
               />
             </div>
             <div className="lh-copy mt3">
-              <p  onClick={() => onRouteChange('register')} className="f6 link dim black db pointer">Register</p>
+              <p  onClick={() => onRouteChange('register')} className="f6 link dim black db b pointer">Register</p>
             </div>
           </div>
         </main>
@@ -82,4 +82,4 @@ class Signin extends React.Component {
   }
 }
 
-export default Signin;
+export default Signin;

src/index.css

@@ -1,8 +1,10 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: "Courier New", Courier, monospace;
+  font-family: "Gill Sans Extrabold", sans-serif;
+
   background: linear-gradient(89deg, #FF5EDF 0%, #04C8DE 100%); /* w3c */
+
 }
 
 button {