Merge branch 'development' into diego-codeMirrorComponent

README.md

@@ -5,4 +5,4 @@ Group project - Code Monkey Master - App to learn about array methods and go fro
 - [backend](https://github.com/codeMonkeyMasters/codeMonkeyMaster-backend)
 - [project board](https://github.com/orgs/codeMonkeyMasters/projects/1)
 - [database diagram](https://dbdiagram.io/d/5f43890d7b2e2f40e9de85a3)
-- [wireframe]()
+- [wireframe](https://github.com/codeMonkeyMasters/codeMonkeyMaster-frontend/blob/development/Wireframe.png)

package.json

@@ -15,7 +15,7 @@
     "react-dom": "^16.13.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
+    "react-scripts": "^3.4.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0"
   },

src/App.js

@@ -7,20 +7,16 @@ import Loading from "./components/Loading";
 import MessageBox from "./components/MessageBox";
 import SignUp from "./pages/SignUp";
 import Login from "./pages/Login";
+import Welcome from "./pages/Welcome";
 
 import { useDispatch, useSelector } from "react-redux";
 import { selectAppLoading } from "./store/appState/selectors";
 import { getUserWithStoredToken } from "./store/user/actions";
 import { Jumbotron } from "react-bootstrap";
 
-const Home = () => (
+const Exercise = () => (
   <Jumbotron>
-    <h1>Home</h1>
-  </Jumbotron>
-);
-const Other = () => (
-  <Jumbotron>
-    <h1>Other</h1>
+    <h1>Here comes exercises</h1>
   </Jumbotron>
 );
 
@@ -38,10 +34,10 @@ function App() {
       <MessageBox />
       {isLoading ? <Loading /> : null}
       <Switch>
-        <Route exact path="/" component={Home} />
-        <Route path="/other" component={Other} />
+        <Route exact path="/" component={Welcome} />
         <Route path="/signup" component={SignUp} />
         <Route path="/login" component={Login} />
+        <Route path="/exercise/:id" component={Exercise} />
       </Switch>
     </div>
   );

src/components/Navigation/index.js

@@ -16,7 +16,10 @@ export default function Navigation() {
   return (
     <Navbar bg="light" expand="lg">
       <Navbar.Brand as={NavLink} to="/">
-        YOUR PROJECT NAME
+        CodeMonkeyMaster
+        <span role="img" aria-label="monkey">
+          🐵
+        </span>
       </Navbar.Brand>
       <Navbar.Toggle aria-controls="basic-navbar-nav" />
       <Navbar.Collapse id="basic-navbar-nav">

src/pages/Welcome/index.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import gif from "../../images/CodeMonkeyMaster.gif";
+import "./welcome.css";
+
+export default function Welcome() {
+  return (
+    <>
+      <div className="welcomeHeader">
+        <img className="welcomeGif" src={gif} alt="Logo" />
+      </div>
+      <div className="welcomeText">
+        <h4>Welcome to CodeMonkeyMaster!</h4>
+        <p>
+          Here you will learn everything you need to know about{" "}
+          <i>array methods</i>. <br />
+          You will start as a code monkey but if you complete all the exercises
+          you can become the ultimate code master!
+          <p>
+            <br />
+            <b>
+              <Link to="/signup">
+                <button className="welcomeButton">Register</button>
+              </Link>{" "}
+              for free and start your code challenge now!
+            </b>
+          </p>
+        </p>
+      </div>
+    </>
+  );
+}