mir4cles · matiasgarcia91 · Jun 18, 2020 · Jun 18, 2020 · Jun 19, 2020 · Jun 19, 2020
diff --git a/README.md b/README.md
@@ -1,42 +1,49 @@
-# Frontend template
+# teamMate
 
-This is a simple react/redux/jwt template to start a project quickly
+See the deployed site [here](https://modest-austin-b02609.netlify.app/) (loading times may vary due to database hosting).
 
 ## Table of contents:
 
-- **[Setup](#setup-how-to-use-this-template)**
-- **[Create React App docs](#cra-docs)**
+- **[About](#about-teamMate)**
+- **[Getting started](#getting-started)**
+- **[Built with](#built-with)**
+- **[User stories and Wireframe](#User-stories-and-Wireframe)**
 
-## SETUP How to use this template
+## About teamMate
 
-1. Create a new project based on this template using the `Use this template` button
+teamMate allows users to browse and host sport events. users can start a team, join an existing one or ride solo and attend private or public pick-up games.
 
-![HOW_TO_USE](https://user-images.githubusercontent.com/20372832/77003323-70966180-695d-11ea-8abe-b362d57135f3.gif)
+## Getting started
 
-2. Clone the app
+1. Clone the repo
 
-```
-git clone git@github.com:YOUR_GITHUB_NAME/YOUR_PROJECT_NAME.git
-```
+2. cd into the repo on your computer.
 
-3. cd into your project
+3. Install dependencies
 
 ```
-cd YOUR_PROJECT_NAME
+$ npm install
 ```
 
-4. install dependencies
+4. Compile and run to run the app in a browser
 
 ```
-npm install
+$ npm run start
 ```
 
-5. Start development server with npm start
+4. If you like to use the server to see some data go [here](https://github.com/mir4cles/teamMate-server) and repeat steps 1,2,3,4
 
-```
-npm start
-```
+5. Let me know what you think.
+
+## Built With
+
+- [Material Ui](https://material-ui.com/)
+- [React](https://reactjs.org/)
+- [Redux](https://redux.js.org/)
+- [Codaisseur's React Redux Template](https://github.com/Codaisseur/express-template)
 
-## CRA docs
+## User stories and Wireframe
 
-The normal Create React App docs can be found in [CRA_DOCS.md](./CRA_DOCS.md)
+- [User storires](https://github.com/users/mir4cles/projects/1#column-9641210)
+- [Wireframe of design](https://wireframepro.mockflow.com/view/teamMate-client-wireframe)
+- [Database diagram](https://app.lucidchart.com/invitations/accept/9dd630e3-019a-48af-91cd-c250ff20fdec)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,15 +4,20 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.10.2",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
     "bootstrap": "^4.4.1",
+    "fontsource-roboto": "^2.1.4",
+    "history": "^5.0.0",
     "react": "^16.13.0",
     "react-bootstrap": "^1.0.0-beta.17",
     "react-dom": "^16.13.0",
     "react-redux": "^7.2.0",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
     "redux": "^4.0.5",

diff --git a/public/index.html b/public/index.html
@@ -3,41 +3,21 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="minimum-scale=1, initial-scale=1, width=device-width"
+    />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>teamMate</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,49 +1,49 @@
 import React, { useEffect } from "react";
-import "./App.css";
-
 import { Switch, Route } from "react-router-dom";
+
 import Navigation from "./components/Navigation";
-import Loading from "./components/Loading";
 import MessageBox from "./components/MessageBox";
+import Home from "./pages/Home";
 import SignUp from "./pages/SignUp";
 import Login from "./pages/Login";
+import MyProfile from "./pages/MyProfile";
+import Teams from "./pages/Teams";
+import TeamDetails from "./pages/TeamDetails";
+import Events from "./pages/Events";
+import EventDetails from "./pages/EventDetails";
+import CreateEvent from "./pages/CreateEvent";
+import Support from "./pages/Support";
+import NotFound from "./pages/NotFound";
 
-import { useDispatch, useSelector } from "react-redux";
-import { selectAppLoading } from "./store/appState/selectors";
+import { useDispatch } from "react-redux";
 import { getUserWithStoredToken } from "./store/user/actions";
-import { Jumbotron } from "react-bootstrap";
-
-const Home = () => (
-  <Jumbotron>
-    <h1>Home</h1>
-  </Jumbotron>
-);
-const Other = () => (
-  <Jumbotron>
-    <h1>Other</h1>
-  </Jumbotron>
-);
 
 function App() {
   const dispatch = useDispatch();
-  const isLoading = useSelector(selectAppLoading);
 
   useEffect(() => {
     dispatch(getUserWithStoredToken());
   }, [dispatch]);
 
   return (
-    <div className="App">
+    <>
       <Navigation />
       <MessageBox />
-      {isLoading ? <Loading /> : null}
       <Switch>
         <Route exact path="/" component={Home} />
-        <Route path="/other" component={Other} />
-        <Route path="/signup" component={SignUp} />
+        <Route exact path="/teams" component={Teams} />
+        <Route path="/teams/:id" component={TeamDetails} />
+        <Route exact path="/events" component={Events} />
+        <Route path="/events/:id" component={EventDetails} />
+        <Route path="/create-event" component={CreateEvent} />
         <Route path="/login" component={Login} />
+        <Route path="/profiles/:id" component={MyProfile} />
+        <Route path="/signup" component={SignUp} />
+        <Route path="/support" component={Support} />
+        <Route path="/" component={NotFound} />
+        <Route path="/404" component={NotFound} />
       </Switch>
-    </div>
+    </>
   );
 }