From 93bbc88059acefa978b4fd6d997031926e1a9b86 Mon Sep 17 00:00:00 2001
From: sarL3y <matt.tapper@gmail.com>
Date: Fri, 17 Jan 2020 01:11:41 -0800
Subject: [PATCH 1/7] Add dashboard, add auth, add login

---
 client/src/App.js                       |  23 ++-
 client/src/components/DashboardUsers.js |  54 ++++++
 client/src/components/Navbar.js         |  13 +-
 client/src/context/authContext.js       |  93 ++++++++++
 client/src/hooks/useAuth.js             |   9 +
 client/src/hooks/useIsLoggedIn.js       |  31 ++++
 client/src/index.css                    |   4 +-
 client/src/pages/AdminDashboard.js      | 231 +++++++++++++++++++++---
 client/src/pages/AdminLogin.js          |  88 ++++++---
 client/src/pages/Home.js                |   4 -
 client/src/sass/AdminLogin.scss         |  17 ++
 client/src/sass/Dashboard.scss          | 105 ++++++++++-
 client/src/sass/DashboardUsers.scss     |   5 +
 client/src/sass/Home.scss               |  10 +-
 routers/users.router.js                 |  36 +++-
 15 files changed, 646 insertions(+), 77 deletions(-)
 create mode 100644 client/src/components/DashboardUsers.js
 create mode 100644 client/src/context/authContext.js
 create mode 100644 client/src/hooks/useAuth.js
 create mode 100644 client/src/hooks/useIsLoggedIn.js
 create mode 100644 client/src/sass/AdminLogin.scss
 create mode 100644 client/src/sass/DashboardUsers.scss

diff --git a/client/src/App.js b/client/src/App.js
index 8d58bb31..20f2d463 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ProvideAuth } from './context/authContext';
 import { Route } from 'react-router-dom';
 
 import Home from './pages/Home';
@@ -29,17 +30,19 @@ const routes = [
 
 function App(props) {
   return (
-    <div className="app">
-		<div className="app-container">
-			<Navbar />
-			<main role="main" className="main">
-				{routes.map(({ path, Component }) => (
-					<Route key={path} exact path={path} component={Component} />
-				))}
-			</main>
-			<Footer />
+	<ProvideAuth>
+		<div className="app">
+			<div className="app-container">
+				<Navbar />
+				<main role="main" className="main">
+					{routes.map(({ path, Component }) => (
+						<Route key={path} exact path={path} component={Component} />
+					))}
+				</main>
+				<Footer />
+			</div>
 		</div>
-    </div>
+	</ProvideAuth>
   );
 }
 
diff --git a/client/src/components/DashboardUsers.js b/client/src/components/DashboardUsers.js
new file mode 100644
index 00000000..6565ded8
--- /dev/null
+++ b/client/src/components/DashboardUsers.js
@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+import '../sass/DashboardUsers.scss';
+// import '../sass/EventsContainer-media-queries.scss';
+
+const DashboardUsers = (props) => {
+    // const [isLoading, setIsLoading] = useState(false);
+    const [users, setUsers] = useState([]);
+    // const [isError, setIsError] = useState(false);
+
+    async function fetchData() {
+        try {
+            const res = await fetch("/api/users");
+            const resJson = await res.json();
+
+            setUsers(resJson);
+        } catch(error) {
+            alert(error);
+        }
+    }
+
+    useEffect(() => {
+        fetchData();
+
+    }, []);
+
+    return (
+        <div className="flexcenter-container">
+            <div className="events-list">
+                <ul>
+                    {users.map((user, index) => {
+                        return (
+                            <li key={index}>
+                                <div key={index} className="event">
+                                    <div className="user-name">
+                                        <h5>{user.name.firstName} {user.name.lastName}</h5>
+                                    </div>
+                                    <div className="user-roles">
+                                        <p>Current Role: {user.currentRole}</p>
+                                        <p>Desired Role: {user.desiredRole}</p>
+                                    </div>
+                                </div>
+                            </li>
+                        )
+                    })}
+                </ul>
+            </div>
+        </div>
+    )
+};
+
+export default DashboardUsers;
+    
\ No newline at end of file
diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js
index 65a33c66..b532fd92 100644
--- a/client/src/components/Navbar.js
+++ b/client/src/components/Navbar.js
@@ -4,16 +4,21 @@ import { Link , withRouter } from 'react-router-dom';
 import '../sass/Navbar.scss';
 
 const Navbar = (props) => {
-    console.log(props);
 
     return (
         <div className="nav-wrapper">
             <nav className="navbar" role="navigation" aria-label="main navigation">
                 <div className="navbar-brand">
+                    {props.location.pathname === "/" ? (
+                        <Link to="/admin">
+                            <p className="home-link-text">LOGIN</p>
+                        </Link>
+                    ) : (
+                        <Link to="/">
+                            <p className="home-link-text">HOME</p>
+                        </Link>
+                    )}
                     
-                    <Link to="/">
-                        <p className="home-link-text">Home</p>
-                    </Link>
                 </div>
 
                 {props.location.pathname === "/" || props.location.pathname === "/magicLink" ? (
diff --git a/client/src/context/authContext.js b/client/src/context/authContext.js
new file mode 100644
index 00000000..0fd16b39
--- /dev/null
+++ b/client/src/context/authContext.js
@@ -0,0 +1,93 @@
+import React, { useState, useEffect, createContext } from 'react';
+
+export const authContext = createContext();
+
+export function ProvideAuth({ children }) {
+    const auth = useProvideAuth();
+
+    return <authContext.Provider value={auth}>
+                { children }
+            </authContext.Provider>
+};
+
+function useProvideAuth() {
+    const [isAdmin, setIsAdmin] = useState(null);
+    const [user, setUser] = useState(null);
+    // const [userId, setUserId] = useState(null);
+
+    // const isAdmin = async (userId) => {
+    //     console.log('isAdmin tentatively ran');
+
+    //     try {
+            // fetch('/api/users?email=bonnie@hackforla.org')
+            //     .then(response => response.json())
+            //     .then(resJson => {
+            //         if (resJson.toString() === '5e1d2df6316d2f00172ef09e') {
+            //             console.log('It happened to be true');
+            //             setUserId(resJson);
+            //             setUser(true);
+            //         } else {
+            //             console.log('It was definitely false what were you thinking');
+            //             setUser(false);
+            //         }
+            //     })
+            //     .catch(err => {
+            //         console.log(err);
+            //     })
+            
+        const login = async (email) => {
+            try {
+                const response = await fetch(`/api/users?email=${email}`);
+                const userId = await response.json();
+
+                const userResponse = await fetch(`/api/users/${userId}`);
+                const user = await userResponse.json();
+
+                if(user.accessLevel === 'admin') {
+                    console.log('Hey... that worked...');
+                    setUser(user);
+                    setIsAdmin(true);
+                    return true;
+                } else {
+                    console.log('Nope not gonna work');
+                    setIsAdmin(false);
+                    return false;
+                }
+            } catch(error) {
+                console.log(error);
+            }
+        }
+
+            
+    //     } catch(error) {
+    //         console.log(error);
+    //     }
+    // }
+
+    // const signin = (isLoggedIn) => {
+    //     if(isLoggedIn) {
+    //         return setUser(isLoggedIn);
+    //     }
+        
+    // }
+
+    useEffect(() => {
+        console.log(user);
+
+        // const isTrue = () => {
+        //     console.log(userId === '5e1d2df6316d2f00172ef09e');
+        //     return userId === '5e1d2df6316d2f00172ef09e' ? setUser(true) : setUser(false);
+        // }
+        // // login/subscribe
+        // // user === true;
+        // // // login/unsubscribe
+        // return () => isTrue;
+        // return () => {isAdmin()}
+    }, []);
+
+    return { user, isAdmin, login };
+};
+
+
+
+
diff --git a/client/src/hooks/useAuth.js b/client/src/hooks/useAuth.js
new file mode 100644
index 00000000..bf821fa2
--- /dev/null
+++ b/client/src/hooks/useAuth.js
@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+
+import { authContext } from '../context/authContext';
+
+const useAuth = () => {
+    return useContext(authContext);
+};
+
+export default useAuth;
\ No newline at end of file
diff --git a/client/src/hooks/useIsLoggedIn.js b/client/src/hooks/useIsLoggedIn.js
new file mode 100644
index 00000000..fa1dc5d4
--- /dev/null
+++ b/client/src/hooks/useIsLoggedIn.js
@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+
+export default function useIsLoggedIn(userId){
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    console.log(`UserId: ${userId}`);
+
+    // The login you want to reuse.
+    const handleIsLoggedInChange = (id) => {
+        console.log(`Id: ${id}`);
+        console.log(`isLoggedIn: ${isLoggedIn}`);
+
+        if(id === 1) {
+            console.log(`It's true!!!`);
+            setIsLoggedIn(true);
+            console.log(`isLoggedIn after setIsLoggedIn: ${isLoggedIn}`);
+
+        } else {
+            console.log(`It's false!!!`);
+            setIsLoggedIn(false);
+        }
+    }
+
+    // Perform side effects in useEffect.
+    useEffect(() => {
+        handleIsLoggedInChange(userId);
+        console.log(`isLoggedIn in custom hook useEffect: ${isLoggedIn}`);
+
+    })
+
+    return [ isLoggedIn ];
+}
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index 0f867852..565f24bb 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -75,7 +75,9 @@ a {
   color: inherit;
   margin: 0px;
   padding: 0px;
-  letter-spacing: .05em;
+  /* letter-spacing: .05em; */
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  monospace;
 }
 
 button {
diff --git a/client/src/pages/AdminDashboard.js b/client/src/pages/AdminDashboard.js
index 1233cb8f..9b5d864a 100644
--- a/client/src/pages/AdminDashboard.js
+++ b/client/src/pages/AdminDashboard.js
@@ -1,51 +1,205 @@
 import React, { useState, useEffect } from 'react';
-// import { Link } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 
 import DashboardEvents from '../components/DashboardEvents';
+import DashboardUsers from '../components/DashboardUsers';
+
+// import useIsLoggedIn from '../hooks/useIsLoggedIn';
+import useAuth from '../hooks/useAuth';
 
 import '../sass/Dashboard.scss';
 
 const AdminDashboard = (props) => {
     const [events, setEvents] = useState([]);
     const [users, setUsers] = useState([]);
-    const [tabSelected, setTabSelected] = useState("events");
+    const [user, setUser] = useState([]);
+    const [tabSelected, setTabSelected] = useState();
+    const [optionSelected, setOptionSelected] = useState("left");
+    const [eventsIsSelected, setEventsIsSelected] = useState(false);
+    const [usersIsSelected, setUsersIsSelected] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [event, setEvent] = useState([]);
+    const [isCheckInReady, setIsCheckInReady] = useState(false);
+    // const isLoggedIn = useIsLoggedIn(0);
+
+    const auth = useAuth();
+
+    async function setCheckInReady(e) {
+        // e.preventDefault();
+        
+        // try {
+        //     // const payload = { checkInReady: true };
+
+        //     await fetch(`/api/events/${props.match.params.id}`, {
+        //         method: 'PATCH',
+        //         headers: {
+        //             "Content-Type": "application/json"
+        //         },
+        //         // body: JSON.stringify(payload)
+        //     })
+        //         .then(response => {
+        //             if (response.ok) {
+        //                 setEvent(event);
+        //                 setIsCheckInReady(!isCheckInReady);
+        //             }
+        //         });
+
+        // } catch(error) {
+        //     // setIsError(error);
+        //     setIsLoading(!isLoading);
+        // }
+    }
+
+    async function isAccessLevelAdmin(e) {
+        e.preventDefault();
+        
+        try {
+            const res = await fetch(`/api/users/${props.match.params.id}`);
+            const resJson = await res.json();
+
+            setUser(resJson);
+        } catch(error) {
+            alert(error);
+        }
+    }
+
+    const handleTabSelect = (e, selectedType) => {
+        e.preventDefault();
+
+        if(selectedType === "events") {
+            setTabSelected("events");
+            setUsersIsSelected(false);
+            setEventsIsSelected(true);
+        }
+
+        if(selectedType === "users") {
+            setTabSelected("users");
+            setEventsIsSelected(false);
+            setUsersIsSelected(true);
+        }
+    }
+
+    const handleOptionSelect = (e, selectedType) => {
+        e.preventDefault();
+
+        if(selectedType === "left") {
+            setOptionSelected("left");
+            
+        }
+
+        if(selectedType === "right") {
+            setOptionSelected("right");
+            
+        }
+    }
 
     useEffect(() => {
-        // fetchData();
+        // console.log(`Admin dashboard useffect isLoggedIn: ${isLoggedIn}`);
+        console.log(`Admin dashboard says auth is: ${auth.user}`);
+        // if(!isLoggedIn) {
+        //     props.history.replace("/login");
+        // }
 
     }, []);
 
     return (
-        <div className="flex-container">
+        auth.user ? (
+            <div className="flex-container">
             <div className="dashboard">
-                {/* <div className="dashboard-nav">
+                <div className="dashboard-headers">
+                    <h3>Hi, {auth.user.name.firstName}</h3>
+                </div>
+            
+                <div className="dashboard-warning">
+                    <p>You have an event coming up:</p>
+                </div>
+                
+                <div className="warning-event">
+                    <div className="warning-event-headers">
+                        <h4>HackforLA Westside</h4>
+                        <p>Monday, January 20th</p>
+                    </div>
+                    <div className="warning-event-toggle">
+                        {event && isCheckInReady === false ? 
+                            (
+                                <Link 
+                                    to={`/events/${event._id}`}
+                                    className="dashboard-nav-button fill-green"
+                                    onClick={e => setCheckInReady(e)}>
+                                        OPEN EVENT
+                                </Link>
+                            ) : (
+                                <Link 
+                                    to={`/events/${event._id}`}
+                                    className="dashboard-nav-button fill-red"
+                                    onClick={e => setCheckInReady(e)}>
+                                        CLOSE EVENT
+                                </Link>
+                            )
+                        }
+                    </div>
+                    
+                </div> 
+                <div className="dashboard-nav">
                     {events && users ? (
                         <div className="dashboard-nav-row">
-                            <button>
-                                Events
+                            <button
+                                className={`dashboard-nav-button ${events && tabSelected === "events" ? `tab-selected`: ""}`}
+                                onClick={e => handleTabSelect(e, "events")}
+                            >
+                                EVENTS
                             </button>
-                            <button>
-                                Users
+                            <button
+                                className={`dashboard-nav-button ${users && tabSelected === "users" ? `tab-selected`: ""}`}
+                                onClick={e => handleTabSelect(e, "users")}
+                            >
+                                BRIGADE
                             </button>
                         </div>
                     ) : (
                         <div className="dashboard-nav-row block">
-                            <button>
-                                Loading...
+                            <button
+                                className="dashboard-nav-button"
+                            >
+                                LOADING...
                             </button>
-                            <button>
-                                Loading...
+                            <button
+                                className="dashboard-nav-button"
+                            >
+                                LOADING...
                             </button>
                         </div> 
                     )}
+
+                    {!eventsIsSelected && !usersIsSelected ? (
+                        <div className="eventsandusers-container">
+                        <h4> ^ Select an option above to get started.</h4>
+                        </div>
+                    ) : (
+                        null
+                    )}
+
+                    {tabSelected ? (
+                        <div className="plus-sign">
+                            +
+                        </div>
+                    ) : (
+                        null
+                    )}
                     
                     {eventsIsSelected ? (
                         <div className="dashboard-nav-row">
-                            <button>
-                                Upcoming
+                            <button 
+                                className={`dashboard-nav-button ${events && optionSelected === "left" ? `tab-selected`: ""}`}
+                                onClick={e => handleOptionSelect(e, "left")}
+                            >
+                                UPCOMING
                             </button>
-                            <button>
-                                Past
+                            <button
+                                className={`dashboard-nav-button ${events && optionSelected === "right" ? `tab-selected`: ""}`}
+                                onClick={e => handleOptionSelect(e, "right")}
+                            >
+                                PAST
                             </button>
                         </div>
                     ) : (
@@ -54,22 +208,47 @@ const AdminDashboard = (props) => {
 
                     {usersIsSelected ? (
                         <div className="dashboard-nav-row">
-
+                            <button 
+                                className={`dashboard-nav-button ${events && optionSelected === "left" ? `tab-selected`: ""}`}
+                                onClick={e => handleOptionSelect(e, "left")}
+                            >
+                                NAME
+                            </button>
+                            <button
+                                className={`dashboard-nav-button ${events && optionSelected === "right" ? `tab-selected`: ""}`}
+                                onClick={e => handleOptionSelect(e, "right")}
+                            >
+                                ROLE
+                            </button>
                         </div>
                     ) : (
                         null
                     )}
-                   
-                    <div key={`${event._id}-${index}`} className="home-buttons">
-                        
-                    </div>
-                </div> */}
-                <div className="events">
-                    <h3>Your Events:</h3>
-                    <DashboardEvents />
                 </div>
+                
+
+                {eventsIsSelected ? (
+                    <div className="eventsandusers-container">
+                        <h3>Your Events:</h3>
+                        <DashboardEvents />
+                    </div> 
+                ) : (
+                    null
+                )}
+
+                {usersIsSelected ? (
+                    <div className="eventsandusers-container">
+                        <h3>Your Brigade:</h3>
+                        <DashboardUsers />
+                    </div> 
+                ) : (
+                    null
+                )}
             </div>
         </div>
+        ) : (
+            <Redirect to="/login" />
+        )
     )
 };
 
diff --git a/client/src/pages/AdminLogin.js b/client/src/pages/AdminLogin.js
index 84da4d71..b5c1d2e1 100644
--- a/client/src/pages/AdminLogin.js
+++ b/client/src/pages/AdminLogin.js
@@ -1,43 +1,87 @@
-import React, { useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { Link, Redirect } from 'react-router-dom';
 
+import useAuth from '../hooks/useAuth';
+import { authContext } from '../context/authContext';
 
-// import '../sass/HomeContainer.scss';
+import '../sass/AdminLogin.scss';
 // import '../sass/HomeContainer-media-queries.scss';
 
+
+
 const AdminLogin = (props) => {
+
     // const [isLoading, setIsLoading] = useState(false);
     // const [event, setEvent] = useState([]);
-    // const [isError, setIsError] = useState(null);
-
-    // async function fetchData() {
-    //     try {
-    //         const res = await fetch(`http://localhost:4000/api/events/${props.match.params.id}`);
-    //         const resJson = await res.json();
-    //         setEvent(resJson);
-    //     } catch(error) {
-    //         setIsError(error);
-    //         alert(error);
-    //     }
-    // }
+    const [isError, setIsError] = useState(false);
+    const [email, setEmail] = useState("");
+    const auth = useAuth();
 
+    const handleInputChange = (e) => setEmail(e.currentTarget.value);
+
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        
+        setIsError(false);
+        try {
+            const isAdmin = await auth.login(email);
+
+            if(isAdmin) {
+                console.log('handleLogin worked!');
+                props.history.push('/admin');
+            } else {
+                setIsError(true);
+                console.log('Welp that didnt work...');
+            }
+        } catch(error) {
+            console.log(error);
+        }
+        
+    };
+    
     useEffect(() => {
-        // fetchData();
 
     }, []);
 
     return (
-        <div className="flexcenter-container">
-            <div className="adminlogin">
+        <div className="flex-container">
+            <div className="adminlogin-container">
                 <div className="adminlogin-headers">
                     <h3>Welcome Back!</h3>
-                    <h4>Please login below.</h4>
                 </div>
-                <div className="adminlogin-buttons">
-                    <Link to={'/login'}>Login</Link>
+                    <form className="form-check-in" autoComplete="off" onSubmit={e => e.preventDefault()}>
+                        <div className="form-row">
+                            <div className="form-input-text">
+                                <label htmlFor="email">Enter your email address:</label>
+                                <input 
+                                    type="email"
+                                    name="email"
+                                    placeholder="Email Address"
+                                    value={email.toString()}
+                                    // aria-label="topic"
+                                    onChange={handleInputChange}
+                                    aria-label="Email Address"
+                                    autoComplete="none"
+                                    required
+                                /> 
+                            </div>
+                        </div>
+                    </form>
+                    <div className="adminlogin-warning">
+                        {isError ? `You can try entering your email again, but you might not have access to a dashboard yet` : null}
+                    </div>
+
+                    <div className="form-input-button">
+                        <button
+                            onClick={e => handleLogin(e)}
+                            className="login-button"
+                        >
+                            LOGIN
+                        </button>
+                    </div>
+                    
                 </div>
             </div>
-        </div>
     )
 };
 
diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js
index 93d9a1f9..fc279e7e 100644
--- a/client/src/pages/Home.js
+++ b/client/src/pages/Home.js
@@ -55,10 +55,6 @@ const Home = (props) => {
                         </div>
                     )
                 })}
-                 
-                <div className="login-button">
-                    {/* <Link className="home-button" to={'/login'}>Login</Link> */}
-                </div>
             </div>
         </div>
     )
diff --git a/client/src/sass/AdminLogin.scss b/client/src/sass/AdminLogin.scss
new file mode 100644
index 00000000..bfdccf86
--- /dev/null
+++ b/client/src/sass/AdminLogin.scss
@@ -0,0 +1,17 @@
+.adminlogin-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    padding-top: 6vh;
+}
+
+.adminlogin-headers {
+    margin: 36px 0px;
+}
+
+.adminlogin-warning {
+    width: 300px;
+    color: red;
+}
diff --git a/client/src/sass/Dashboard.scss b/client/src/sass/Dashboard.scss
index b5a8dd9b..ab23db08 100644
--- a/client/src/sass/Dashboard.scss
+++ b/client/src/sass/Dashboard.scss
@@ -1,5 +1,108 @@
 .dashboard {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    height: 96vh;
+    overflow: scroll;
+}
+
+.dashboard-headers {
+    margin: 6px;
+    padding: 48px 6px 6px 6px;
+    border: 1px solid black;
+    border-radius: 6px;
+}
+
+.dashboard-nav {
+    display: flex;
+    flex-direction: column;
+}
+
+.dashboard-nav-row {
+    display: flex;
+    flex-direction: row;
+    min-height: 60px;
+}
+
+.dashboard-nav-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 3px solid black;
+    border-radius: 6px;
+    height: 40px;
+    margin: 12px 6px;
+    font-size: 18px;
+    font-weight: bold;
+    z-index: 1;
+    transition: all .3s ease-in-out;
+
+    &:hover {
+        background-color: black;
+        color: white;
+    }
+}
+
+.fill-green {
+    &:hover {
+        background-color: green;
+        border: 3px solid green;
+    }
+}
+
+.fill-red {
+    &:hover {
+        background-color: red;
+        border: 3px solid red;
+    }
+}
+
+.plus-sign {
+    align-self: center;
+    font-weight: bold;
+    font-size: 24px;
+    margin: 0px;
+    padding: 0px;
+    line-height: 0px;
+}
+
+.tab-selected {
+    background-color: black;
+    color: white;
+}
+
+.dashboard-warning {
+    margin: 6px;
+    padding: 12px 6px 0px 6px;
+
+    p {
+        font-size: 18px;
+        margin: 0px;
+        padding: 0px;
+    }
+}
+
+.warning-event-headers {
+    margin-bottom: 12px;
+
+    p {
+        padding: 0px;
+        margin: 0px;
+    }
+}
+
+.warning-event {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 1px solid black;
+    border-radius: 6px;
+    padding: 6px 6px 6px 6px;
+    margin: 6px;
+}
+
+.eventsandusers-container {
+    margin: 6px;
+    padding: 6px;
+    border: 1px solid black;
+    border-radius: 6px;
 }
\ No newline at end of file
diff --git a/client/src/sass/DashboardUsers.scss b/client/src/sass/DashboardUsers.scss
new file mode 100644
index 00000000..e17b8e1d
--- /dev/null
+++ b/client/src/sass/DashboardUsers.scss
@@ -0,0 +1,5 @@
+.user-roles {
+    p {
+        margin: 0px;
+    }
+}
\ No newline at end of file
diff --git a/client/src/sass/Home.scss b/client/src/sass/Home.scss
index e1a5fb90..9d3f4ce6 100644
--- a/client/src/sass/Home.scss
+++ b/client/src/sass/Home.scss
@@ -22,18 +22,11 @@
     display: flex;
     flex-direction: column;
     align-self: center;
-    width: 70%;
+    width: 80%;
     margin-top: 36px;
     margin-bottom: 8vh;
 }
 
-.login-button {
-    display: flex;
-    flex-direction: column;
-    align-self: center;
-    width: 60%;
-}
-
 .home-button {
     display: flex;
     justify-content: center;
@@ -42,6 +35,7 @@
     border-radius: 6px;
     height: 40px;
     margin-top: 12px;
+    padding: 0px 6px;
     font-size: 18px;
     font-weight: bold;
     z-index: 1;
diff --git a/routers/users.router.js b/routers/users.router.js
index a81210f4..9f4a4dbc 100644
--- a/routers/users.router.js
+++ b/routers/users.router.js
@@ -8,7 +8,8 @@ router.get('/', (req, res) => {
     const { query } = req;
     console.log(query);
 
-    User
+    if(query.email) {
+        User
         .findOne(query)
         .then(user => {
             if (!user) {
@@ -23,8 +24,41 @@ router.get('/', (req, res) => {
                 message: `/GET Internal server error: ${err}`
             })
         });
+    } else {
+        User
+        .find()
+        .then(users => {
+            if (!users) {
+                res.json(false);
+            } else {
+                res.json(users);
+            }
+        })
+        .catch(err => {
+            console.log(err);
+            res.sendStatus(500).json({
+                message: `/GET Internal server error: ${err}`
+            })
+        });
+    }
+    
+});
+
+router.get('/:id', (req, res) => {
+    User
+        .findById(req.params.id)
+        .then(user => {
+            res.json(user);
+        })
+        .catch(err => {
+            console.log(err);
+            res.sendStatus(500).json({
+                message: `/GET Internal server error: ${err}`
+            })
+        });
 });
 
+
 router.patch('/:id', (req, res) => {
     console.log( )
     User

From bcbd249c190e129490d24525fae63af7f87a5b0c Mon Sep 17 00:00:00 2001
From: sarL3y <matt.tapper@gmail.com>
Date: Fri, 17 Jan 2020 16:54:19 -0800
Subject: [PATCH 2/7] Fix widget height

---
 client/src/hooks/useIsLoggedIn.js  | 31 ------------------------------
 client/src/pages/AdminDashboard.js |  4 +---
 client/src/sass/Dashboard.scss     |  3 ++-
 3 files changed, 3 insertions(+), 35 deletions(-)
 delete mode 100644 client/src/hooks/useIsLoggedIn.js

diff --git a/client/src/hooks/useIsLoggedIn.js b/client/src/hooks/useIsLoggedIn.js
deleted file mode 100644
index fa1dc5d4..00000000
--- a/client/src/hooks/useIsLoggedIn.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export default function useIsLoggedIn(userId){
-    const [isLoggedIn, setIsLoggedIn] = useState(false);
-    console.log(`UserId: ${userId}`);
-
-    // The login you want to reuse.
-    const handleIsLoggedInChange = (id) => {
-        console.log(`Id: ${id}`);
-        console.log(`isLoggedIn: ${isLoggedIn}`);
-
-        if(id === 1) {
-            console.log(`It's true!!!`);
-            setIsLoggedIn(true);
-            console.log(`isLoggedIn after setIsLoggedIn: ${isLoggedIn}`);
-
-        } else {
-            console.log(`It's false!!!`);
-            setIsLoggedIn(false);
-        }
-    }
-
-    // Perform side effects in useEffect.
-    useEffect(() => {
-        handleIsLoggedInChange(userId);
-        console.log(`isLoggedIn in custom hook useEffect: ${isLoggedIn}`);
-
-    })
-
-    return [ isLoggedIn ];
-}
\ No newline at end of file
diff --git a/client/src/pages/AdminDashboard.js b/client/src/pages/AdminDashboard.js
index 9b5d864a..b0c098c9 100644
--- a/client/src/pages/AdminDashboard.js
+++ b/client/src/pages/AdminDashboard.js
@@ -4,7 +4,6 @@ import { Link, Redirect } from 'react-router-dom';
 import DashboardEvents from '../components/DashboardEvents';
 import DashboardUsers from '../components/DashboardUsers';
 
-// import useIsLoggedIn from '../hooks/useIsLoggedIn';
 import useAuth from '../hooks/useAuth';
 
 import '../sass/Dashboard.scss';
@@ -20,7 +19,6 @@ const AdminDashboard = (props) => {
     const [isLoading, setIsLoading] = useState(false);
     const [event, setEvent] = useState([]);
     const [isCheckInReady, setIsCheckInReady] = useState(false);
-    // const isLoggedIn = useIsLoggedIn(0);
 
     const auth = useAuth();
 
@@ -229,7 +227,7 @@ const AdminDashboard = (props) => {
 
                 {eventsIsSelected ? (
                     <div className="eventsandusers-container">
-                        <h3>Your Events:</h3>
+                        <h4>Your Events:</h4>
                         <DashboardEvents />
                     </div> 
                 ) : (
diff --git a/client/src/sass/Dashboard.scss b/client/src/sass/Dashboard.scss
index ab23db08..257fa957 100644
--- a/client/src/sass/Dashboard.scss
+++ b/client/src/sass/Dashboard.scss
@@ -1,7 +1,7 @@
 .dashboard {
     display: flex;
     flex-direction: column;
-    height: 96vh;
+    // height: 96vh;
     overflow: scroll;
 }
 
@@ -73,6 +73,7 @@
 .dashboard-warning {
     margin: 6px;
     padding: 12px 6px 0px 6px;
+    height: 100%;
 
     p {
         font-size: 18px;

From 3a96533d665671fb5f94743840dcd8eb49b43185 Mon Sep 17 00:00:00 2001
From: sarL3y <matt.tapper@gmail.com>
Date: Fri, 17 Jan 2020 18:30:49 -0800
Subject: [PATCH 3/7] Fix broken link

---
 client/src/pages/AdminDashboard.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/AdminDashboard.js b/client/src/pages/AdminDashboard.js
index b0c098c9..45121557 100644
--- a/client/src/pages/AdminDashboard.js
+++ b/client/src/pages/AdminDashboard.js
@@ -23,7 +23,7 @@ const AdminDashboard = (props) => {
     const auth = useAuth();
 
     async function setCheckInReady(e) {
-        // e.preventDefault();
+        e.preventDefault();
         
         // try {
         //     // const payload = { checkInReady: true };
@@ -121,14 +121,14 @@ const AdminDashboard = (props) => {
                         {event && isCheckInReady === false ? 
                             (
                                 <Link 
-                                    to={`/events/${event._id}`}
+                                    // to={`/events/${event._id}`}
                                     className="dashboard-nav-button fill-green"
                                     onClick={e => setCheckInReady(e)}>
                                         OPEN EVENT
                                 </Link>
                             ) : (
                                 <Link 
-                                    to={`/events/${event._id}`}
+                                    // to={`/events/${event._id}`}
                                     className="dashboard-nav-button fill-red"
                                     onClick={e => setCheckInReady(e)}>
                                         CLOSE EVENT

From 2244583f9d6e85a897574eef90f382963a32eb4b Mon Sep 17 00:00:00 2001
From: sarL3y <matt.tapper@gmail.com>
Date: Fri, 17 Jan 2020 18:53:35 -0800
Subject: [PATCH 4/7] Update test env

---
 client/src/pages/AdminDashboard.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/AdminDashboard.js b/client/src/pages/AdminDashboard.js
index 45121557..17e8898c 100644
--- a/client/src/pages/AdminDashboard.js
+++ b/client/src/pages/AdminDashboard.js
@@ -124,14 +124,14 @@ const AdminDashboard = (props) => {
                                     // to={`/events/${event._id}`}
                                     className="dashboard-nav-button fill-green"
                                     onClick={e => setCheckInReady(e)}>
-                                        OPEN EVENT
+                                        OPEN CHECK-IN
                                 </Link>
                             ) : (
                                 <Link 
                                     // to={`/events/${event._id}`}
                                     className="dashboard-nav-button fill-red"
                                     onClick={e => setCheckInReady(e)}>
-                                        CLOSE EVENT
+                                        CLOSE CHECK-IN
                                 </Link>
                             )
                         }
@@ -227,7 +227,6 @@ const AdminDashboard = (props) => {
 
                 {eventsIsSelected ? (
                     <div className="eventsandusers-container">
-                        <h4>Your Events:</h4>
                         <DashboardEvents />
                     </div> 
                 ) : (
@@ -236,7 +235,6 @@ const AdminDashboard = (props) => {
 
                 {usersIsSelected ? (
                     <div className="eventsandusers-container">
-                        <h3>Your Brigade:</h3>
                         <DashboardUsers />
                     </div> 
                 ) : (

From 962e6d1b6851d45474078299d7b8b97a7c0d106f Mon Sep 17 00:00:00 2001
From: sarL3y <matt.tapper@gmail.com>
Date: Sun, 19 Jan 2020 14:20:00 -0800
Subject: [PATCH 5/7] Update README.md

---
 README.md  | 138 +++++++++++++++++++++++++++++++++++++++--------------
 server.txt | 104 ----------------------------------------
 2 files changed, 103 insertions(+), 139 deletions(-)
 delete mode 100644 server.txt

diff --git a/README.md b/README.md
index cc37fa42..bcc6fa9b 100644
--- a/README.md
+++ b/README.md
@@ -1,73 +1,141 @@
-# Volunteer Relationship Management
+# Volunteer Relationship Management System
 
-Include a project description that explains **what** your project is and **why** it exists. Aim for no more than 3-5 concise sentences. For example, you might say:
+VRMS is a tool used for the engagement, support, and retention of a network of volunteers.
 
-VRMS = Volunteer Relationship Management System: This is an ambitious project to create a system that will help us measure our human capital development, reduce repetitive tasks and processes, and improve outcomes.
+This is an ambitious project to create a system that will help us measure our human capital development, reduce repetitive tasks and processes for leadership, and improve outcomes for both volunteers and the projects they contribute to.
 
 ### Project context
 
-See wiki - currently under development
+We are currently in the initial planning phase after delivering a prototype to the organization's leadership. Our priorities are laying out a feature roadmap for beta and beyond, and a recruiting a team of dedicated members to build the product. Time is of the essence, as each Hack Night is a new opportunity to garner valuable data which, in return, supports the organization and it's members. 
 
-### Technology used
+### Technologies
 
-- Each platform or framework should get its own bullet.
-- Each platform should include an [active link](#) to the official documentation.
+This is a Full Stack web app, built with:
+- [React](https://reactjs.org/docs/getting-started.html)
+- Node/[Express](https://expressjs.com/en/starter/installing.html)
+- [MongoDB](https://docs.mongodb.com/manual/tutorial/getting-started/)
+- [Heroku](https://devcenter.heroku.com/categories/reference)
 
+## How to contribute
 
+Head over to the [wiki](https://github.com/hackforla/VRMS/wiki);
 
-# How to contribute
+You'll find all the product documentation, and if this seems like a project you'd like to dedicate your time to, reach out to the leads on Slack or at one of our weekly Hack Nights.
 
-Explain the different ways people can contribute. For example:
+## Using Git
 
-- Join the team {on Slack/at our weekly hack night/etc}.
-- To help with user research, {do ABC}.
-- To provide design support, {do XYZ}.
-- To contribute to the code, follow the instructions below.
+This section discusses some tips and best practices for working with Git.
 
-Remember to provide direct links to each channel.
+### Making changes, committing and pushing
 
+1. Changes start on your local clone of this repository, in your own branch.
 
+1. Commit your changes with a comment related to the issue it addresses to your local repository.
 
-## Installation instructions
+1. Push that commit(s) to GitHub.
 
-1. Step-by-step instructions help new contributors get a development environment up and running quickly.
-2. You'll want to find the balance between being specific enough for novices to follow, without being so specific that you reinvent the wheel by providing overly-basic instructions that can be found elsewhere.
-3. Feel free to adapt this section and its sub-sections to your own processes.
-4. Alternatively, you can move everything from *Installation instructions* through *Testing* to a separate **Contributing.md** file to keep your **ReadMe.md** more succinct.
+1. From the `VRMS` repository, create a Pull Request which asks `VRMS` to pull changes from your fork into the main repository.
 
+1. After the owner of the `VRMS` repository approves and merges your Pull Request, your changes will be live on the website. 
 
-### Working with issues
+### Forking and cloning the repository with proper security
 
-- Explain how to submit a bug.
-- Explain how to submit a feature request.
-- Explain how to contribute to an existing issue.
+#### Step 1: Become a member of the repository Team
 
-To create a new issue, please use the blank issue template (available when you click New Issue).  If you want to create an issue for other projects to use, please create the issue in your own repository and send a slack message to one of your hack night hosts with the link.
+In the `vrms` slack channel, send your GitHub name to the project manager (or on the slack channel thread) and we'll add you as a member to the GitHub repository Team.
 
+Once you have accepted the GitHub invite (comes via email or in your GitHub notifications), please do the following:
 
-### Working with forks and branches
+1. Mark your own membership public https://help.github.com/en/articles/publicizing-or-hiding-organization-membership#changing-the-visibility-of-your-organization-membership
 
-- Explain your guidelines here.
+1. Setup two factor authentication on your account https://github.com/hackforla/governance/issues/20
 
+#### Step 2: Fork the repository
 
-### Working with pull requests and reviews
+In https://github.com/hackforla/website, look for the fork icon in the top right. Click it and create a fork of the repository.
 
-- Explain your process.
+For git beginners, a fork is a copy of the repository that will be placed on your GitHub account url.
 
+It should create a copy here: https://github.com/your_GitHub_user_name/website, where `your_GitHub_user_name` is replaced with exactly that.
 
-### Testing
+Note that this copy is on a remote server on the GitHub website and not on your computer yet.
 
-- Provide instructions.
+If you click the icon again, it will not create a new fork but instead give you the URL associated with your fork.
 
+#### Step 3: Clone your online repository to your local computer
 
+For git beginners, this process will create a third copy of the repository on your local desktop.
 
-# Contact info
+First create a new folder on your desktop that will contain `hackforla` projects.
 
-Include at least one way (or more, if possible) to reach your team with questions or comments.
+In your shell, navigate there then run the following commands:
 
+```bash
+git clone https://github.com/your_GitHub_user_name/website.git
+```
 
-### Licensing
+You should now have a new folder in your `hackforla` folder called `vrms`.
 
-Include details about the project's open source status.
+Verify which URL your `origin` remote is pointing to:
 
-*this readme file sourced from [Jessica Sand](http://jessicasand.com/other-stuff/just-enough-docs/)*
+```bash
+git remote show origin
+```
+
+If you accidentally cloned the `hackforla/vrms.git` then you can change your local copy to upload to your fork with the following:
+
+```bash
+git remote set-url origin https://github.com/your_user_name/vrms.git
+```
+
+Add another remote called `development` that points to the `hackforla` version of the repository. This will allow you to incorporate changes later:
+
+```bash
+git remote add development https://github.com/hackforla/vrms.git
+```
+
+#### Step 4: Change to a new branch
+
+For each issue, create a new branch to work in.
+
+This command will let you know available branches and which branch you're on.
+
+Star (`*`) indicates which branch you're on
+
+```bash
+git branch
+```
+
+By default you should start on the `master` branch.
+
+This command will (create and) change to a new branch:
+
+```bash
+git checkout -b 140-fix-logo-width
+```
+
+We prefer that you work on a branch name that relates to the issue you're working on.
+
+The format should look like the scheme above where `140` is the issue number in GitHub, and the words are a brief description of the issue.
+
+No law of physics will break if you don't adhere to this scheme but laws of git will break if you add spaces in the branch name. 
+
+### Incorporating changes from upstream
+
+Your fork of this repository on GitHub, and your local clone of that fork, will
+get out of sync with this (upstream) repository from time to time.
+
+Assuming you have a local clone with remotes `development` (this repo) and `origin`
+(your GitHub fork of this repo):
+
+```bash
+# WARNING: this will erase local pending changes!
+# commit them to a different branch or use git stash
+git checkout master
+git fetch development
+git reset --hard development/master
+```
+
+### Licensing *WIP*
+
+Details about the project's open source status below: 
diff --git a/server.txt b/server.txt
deleted file mode 100644
index 1c277681..00000000
--- a/server.txt
+++ /dev/null
@@ -1,104 +0,0 @@
-const express = require('express');
-const cors = require('cors');
-const path = require("path");
-const fs = require("fs");
-const http = require('http');
-const https = require('https');
-
-const passport = require('passport');
-const MeetupOAuth2Strategy = require('passport-oauth2-meetup').Strategy;
-const GoogleStrategy = require("passport-google-oauth20").Strategy;
-const GithubStrategy = require("passport-github").Strategy;
-
-const keys = require("../config");
-const chalk = require('chalk');
-
-let user = {}
-
-passport.serializeUser((user,cb) => {
-    cb(null,user)
-});
-
-passport.deserializeUser((user,cb) => {
-    cb(null,user)
-});
-
-//Meetup Strategy
-passport.use(new MeetupOAuth2Strategy({
-    clientID: keys.MEETUP.clientID,
-    clientSecret: keys.MEETUP.clientSecret,
-    callbackURL: "/auth/meetup/callback",
-    autoGenerateUsername: true
-  },
-  function(token, tokenSecret, profile, done) {
-   
-      return done(null, user);
-
-  }
-));
-
-//Google Strategy
-passport.use(new GoogleStrategy({
-    clientID: keys.GOOGLE.clientID,
-    clientSecret: keys.GOOGLE.clientSecret,
-    callbackURL: "/auth/google/callback"
-},
-(accessToken, refreshToken, profile, cb) => {
-    console.log(chalk.blue(JSON.stringify(profile)));
-    user = { ...profile };
-    return cb(null, profile);
-}));
-
-// Github Strategy
-passport.use(new GithubStrategy({
-    clientID: keys.GITHUB.clientID,
-    clientSecret: keys.GITHUB.clientSecret,
-    callbackURL: "/auth/github/callback"
-},
-(accessToken, refreshToken, profile, cb) => {
-    console.log(chalk.blue(JSON.stringify(profile)));
-    user = { ...profile };
-    return cb(null, profile);
-}));
-
-const app = express();
-app.use(cors());
-app.use(passport.initialize());
-
-app.get('/auth/meetup', passport.authenticate('meetup'))
-app.get('/auth/meetup/callback',
-  passport.authenticate('meetup'),
-  function(req, res) {
-    console.log("It worked!")
-    res.redirect('/events');
-  });
-
-app.get("/auth/google", passport.authenticate("google", {
-    scope: ["profile", "email"]
-}));
-app.get("/auth/google/callback",
-    passport.authenticate("google"),
-        (req, res) => {
-            res.redirect("/events");
-});
-app.get("/auth/github", passport.authenticate("github"));
-app.get("/auth/github/callback",
-    passport.authenticate("github"),
-    (req, res) => {
-        res.redirect("/events");
-    });
-app.get("/user", (req, res) => {
-    console.log("getting user data!");
-    res.send(user);
-});
-
-app.get("/auth/logout", (req, res) => {
-    console.log("logging out!");
-    user = {};
-    res.redirect("/");
-});
-
-const PORT = 5000;
-app.listen(PORT, function () {
-    console.log("express has started on port "+ PORT);
-    });

From 4c5409a7a4d4dd7c5d3ac22a878095abb5f2d6ab Mon Sep 17 00:00:00 2001
From: sarL3y <matt.tapper@gmail.com>
Date: Sun, 19 Jan 2020 14:25:31 -0800
Subject: [PATCH 6/7] Update README.md

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index bcc6fa9b..a5666fac 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ VRMS is a tool used for the engagement, support, and retention of a network of v
 
 This is an ambitious project to create a system that will help us measure our human capital development, reduce repetitive tasks and processes for leadership, and improve outcomes for both volunteers and the projects they contribute to.
 
-### Project context
+### Project Context
 
 We are currently in the initial planning phase after delivering a prototype to the organization's leadership. Our priorities are laying out a feature roadmap for beta and beyond, and a recruiting a team of dedicated members to build the product. Time is of the essence, as each Hack Night is a new opportunity to garner valuable data which, in return, supports the organization and it's members. 
 
@@ -18,7 +18,7 @@ This is a Full Stack web app, built with:
 
 ## How to contribute
 
-Head over to the [wiki](https://github.com/hackforla/VRMS/wiki);
+Head over to the [wiki](https://github.com/hackforla/VRMS/wiki).
 
 You'll find all the product documentation, and if this seems like a project you'd like to dedicate your time to, reach out to the leads on Slack or at one of our weekly Hack Nights.
 
@@ -28,7 +28,7 @@ This section discusses some tips and best practices for working with Git.
 
 ### Making changes, committing and pushing
 
-1. Changes start on your local clone of this repository, in your own branch.
+1. Changes start on your local fork of this repository, in your own branch.
 
 1. Commit your changes with a comment related to the issue it addresses to your local repository.
 

From 183592caee8d0716b0244b2c8b786bd4752658a9 Mon Sep 17 00:00:00 2001
From: sarL3y <matt.tapper@gmail.com>
Date: Sun, 19 Jan 2020 14:49:33 -0800
Subject: [PATCH 7/7] Update README.md

---
 README.md               | 69 +++++++++++++++++++++++++-----
 data/answers/answers.js | 26 -----------
 data/events/events.js   | 95 -----------------------------------------
 data/rsvps/rsvps.js     | 20 ---------
 data/users/users.js     | 30 -------------
 5 files changed, 59 insertions(+), 181 deletions(-)
 delete mode 100644 data/answers/answers.js
 delete mode 100644 data/events/events.js
 delete mode 100644 data/rsvps/rsvps.js
 delete mode 100644 data/users/users.js

diff --git a/README.md b/README.md
index a5666fac..5aba6c5e 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ Head over to the [wiki](https://github.com/hackforla/VRMS/wiki).
 
 You'll find all the product documentation, and if this seems like a project you'd like to dedicate your time to, reach out to the leads on Slack or at one of our weekly Hack Nights.
 
-## Using Git
+## Using Git (If you're familiar with forking and pulling/pushing/committing, head to the next section)
 
 This section discusses some tips and best practices for working with Git.
 
@@ -44,19 +44,21 @@ This section discusses some tips and best practices for working with Git.
 
 In the `vrms` slack channel, send your GitHub name to the project manager (or on the slack channel thread) and we'll add you as a member to the GitHub repository Team.
 
-Once you have accepted the GitHub invite (comes via email or in your GitHub notifications), please do the following:
+Once you have accepted the GitHub invite (via email or in your GitHub notifications), please do the following:
 
 1. Mark your own membership public https://help.github.com/en/articles/publicizing-or-hiding-organization-membership#changing-the-visibility-of-your-organization-membership
 
 1. Setup two factor authentication on your account https://github.com/hackforla/governance/issues/20
 
+These steps are manditory in order to contribute to all HackforLA projects. 
+
 #### Step 2: Fork the repository
 
-In https://github.com/hackforla/website, look for the fork icon in the top right. Click it and create a fork of the repository.
+In https://github.com/hackforla/VRMS, look for the fork icon in the top right. Click it and create a fork of the repository.
 
 For git beginners, a fork is a copy of the repository that will be placed on your GitHub account url.
 
-It should create a copy here: https://github.com/your_GitHub_user_name/website, where `your_GitHub_user_name` is replaced with exactly that.
+It should create a copy here: https://github.com/your_GitHub_user_name/vrms, where `your_GitHub_user_name` is replaced with exactly that.
 
 Note that this copy is on a remote server on the GitHub website and not on your computer yet.
 
@@ -71,7 +73,7 @@ First create a new folder on your desktop that will contain `hackforla` projects
 In your shell, navigate there then run the following commands:
 
 ```bash
-git clone https://github.com/your_GitHub_user_name/website.git
+git clone https://github.com/your_GitHub_user_name/vrms.git
 ```
 
 You should now have a new folder in your `hackforla` folder called `vrms`.
@@ -88,10 +90,10 @@ If you accidentally cloned the `hackforla/vrms.git` then you can change your loc
 git remote set-url origin https://github.com/your_user_name/vrms.git
 ```
 
-Add another remote called `development` that points to the `hackforla` version of the repository. This will allow you to incorporate changes later:
+Add another remote called `vrms` that points to the `hackforla` version of the repository. This will allow you to incorporate changes later:
 
 ```bash
-git remote add development https://github.com/hackforla/vrms.git
+git remote add vrms https://github.com/hackforla/vrms.git
 ```
 
 #### Step 4: Change to a new branch
@@ -125,17 +127,64 @@ No law of physics will break if you don't adhere to this scheme but laws of git
 Your fork of this repository on GitHub, and your local clone of that fork, will
 get out of sync with this (upstream) repository from time to time.
 
-Assuming you have a local clone with remotes `development` (this repo) and `origin`
+Assuming you have a local clone with remotes `vrms` (this repo) and `origin`
 (your GitHub fork of this repo):
 
 ```bash
 # WARNING: this will erase local pending changes!
 # commit them to a different branch or use git stash
 git checkout master
-git fetch development
-git reset --hard development/master
+git fetch vrms
+git reset --hard vrms/master
 ```
 
+## Get up and running
+
+Do you have (Node)[https://nodejs.org/en/download/] and NPM installed?
+
+Verify with `node -v` and `npm -v` respectively.
+
+If you completed the Git steps above, you should be ready with your local fork loaded in your code editor of choice. Check your remotes again with `git remote -v` to make sure you're good to go. 
+
+From the app root `vrms/`, we `npm install` to setup the `package.json` for the Node server, then `cd client/` and `npm install` again to setup the `package.json` for the React front end. This might take a minute or two. 
+
+`cd ..` back to the app root.
+
+Take a second to review the `server.js` file here. It is a blueprint for the back end, so please familiarize yourself with it. You'll see folders for the database collection models, routes for the API, and a config file which loads the necessary environment variables. 
+
+Now, back to the command line:
+
+`touch .env` to create a file for your environment variables.
+
+Copy/paste the following inside:
+
+```API_HOST=http://localhost:4000
+APP_SERVER_PORT=4000
+REACT_APP_PORT=3000
+TEST_DATABASE_URL=mongodb+srv://testuser2:Riy4gVoo3RYzLJEB@cluster0-haogu.mongodb.net/testdb?retryWrites=true&w=majority
+```
+
+`touch .gitignore` (if not included) 
+
+Copy/paste again so it looks like this:
+
+```/node_modules
+npm-debug.log
+.DS_Store
+/*.env
+```
+
+`pwd` and make sure you're in the app root. 
+
+`nodemon` (if installed, or `npm start`)
+
+`cd client/`
+
+`npm start` again
+
+You should now have a live app. Happy hacking.
+
+
 ### Licensing *WIP*
 
 Details about the project's open source status below: 
diff --git a/data/answers/answers.js b/data/answers/answers.js
deleted file mode 100644
index f22523a7..00000000
--- a/data/answers/answers.js
+++ /dev/null
@@ -1,26 +0,0 @@
-module.exports = [
-    {
-        "id": "98244321", // 9 digit
-        "questionId": "8675309",
-        "answerId": "1429589",
-        "memberId": "123456781",
-    }, 
-    {
-        "id": "985674321",
-        "questionId": "1029384",
-        "answerId": "1429589",
-        "memberId": "123456781",
-    }, 
-    {
-        "id": "987123321",
-        "questionId": "9812248",
-        "answerId": "1429589",
-        "memberId": "123456781",
-    }, 
-    {
-        "id": "912354321",
-        "questionId": "1209384",
-        "answerId": "1429589",
-        "memberId": "123456781",
-    }, 
-];
\ No newline at end of file
diff --git a/data/events/events.js b/data/events/events.js
deleted file mode 100644
index 673b8a09..00000000
--- a/data/events/events.js
+++ /dev/null
@@ -1,95 +0,0 @@
-module.exports = [
-    {
-        "id": "987654321",
-        "eventName": "HackforLA DTLA",
-        "eventLocation": "Downtown Los Angeles",
-        "date": "2020-01-08T18:00:00",
-        "rsvps": [
-            {
-                "name": {
-                    "firstName": "Matt",
-                    "lastName": "T"
-                },
-                "email": "testemail@email.com"
-            }, {
-                "name": {
-                    "firstName": "Bonnie",
-                    "lastName": "W"
-                },
-                "email": "testemail1@email.com"
-            }, {
-                "name": {
-                    "firstName": "Shawn",
-                    "lastName": "D"
-                },
-                "email": "testemail2@email.com"
-            }, {
-                "name": {
-                    "firstName": "Mohith",
-                    "lastName": "R"
-                },
-                "email": "testemail3@email.com"
-            }
-        ],
-        "checkInReady": true,
-        "checkIns": []
-    }, 
-    {
-        "id": "987654322",
-        "eventName": "HackforLA Santa Monica",
-        "eventLocation": "Santa Monica",
-        "date": "2020-01-09T18:00:00",
-        "rsvps": [
-            {
-                "name": {
-                    "firstName": "Matt",
-                    "lastName": "T"
-                },
-                "email": null
-            }, {
-                "name": {
-                    "firstName": "Shawn",
-                    "lastName": "D"
-                },
-                "email": null
-            }, {
-                "name": {
-                    "firstName": "Mohith",
-                    "lastName": "R"
-                },
-                "email": null
-            }
-        ],
-        "checkInReady": false,
-        "checkIns": []
-    }, 
-    {
-        "id": "987654323",
-        "eventName": "HackforLA South LA",
-        "eventLocation": "Inglewood",
-        "date": "2020-01-10T18:00:00",
-        "rsvps": [
-            {
-                "name": {
-                    "firstName": "Matt",
-                    "lastName": "T"
-                },
-                "email": null
-            }, {
-                "name": {
-                    "firstName": "Bonnie",
-                    "lastName": "W"
-                },
-                "email": null
-            }, {
-                "name": {
-                    "firstName": "Shawn",
-                    "lastName": "D"
-                },
-                "email": null
-            }
-        ],
-        "checkInReady": false,
-        "checkIns": []
-    }
-];
\ No newline at end of file
diff --git a/data/rsvps/rsvps.js b/data/rsvps/rsvps.js
deleted file mode 100644
index 34b32182..00000000
--- a/data/rsvps/rsvps.js
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = [
-    {
-        "id": "17236456",
-        "eventId": "987654321",
-        "userId": "123456781",
-        "checkedIn": true
-    },
-    {
-        "id": "12346456",
-        "eventId": "987654321",
-        "userId": "123456782",
-        "checkedIn": true
-    },
-    {
-        "id": "13246456",
-        "eventId": "987654321",
-        "userId": "123456783",
-        "checkedIn": true
-    },
-];
\ No newline at end of file
diff --git a/data/users/users.js b/data/users/users.js
deleted file mode 100644
index 7bd5b312..00000000
--- a/data/users/users.js
+++ /dev/null
@@ -1,30 +0,0 @@
-module.exports = [
-    {
-        "id": "123456789",
-        "username": "Admin",
-        "password": "SecretPassword",
-        "email": "admin@email.com",
-        "accessLevel": 'Admin'
-    },
-    {
-        "id": "123456781",
-        "username": "User1",
-        "password": "SecretPassword1",
-        "email": "user1@email.com",
-        "accessLevel": "User"
-    },
-    {
-        "id": "123456782",
-        "username": "User2",
-        "password": "SecretPassword2",
-        "email": "user2@email.com",
-        "accessLevel": "User"
-    },
-    {
-        "id": "123456783",
-        "username": "User3",
-        "password": "SecretPassword3",
-        "email": "user3@email.com",
-        "accessLevel": "User"
-    }
-];
\ No newline at end of file