initial app set up

- guppy setup
- file structure organizing
- scss set up
- basic routing

src/components/app/App.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import logo from '../../images/logo.svg';
+import './App.scss';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;

src/components/app/App.scss

@@ -0,0 +1,40 @@
+@import '../../styles/colors';
+
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/app/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/app/index.js

@@ -0,0 +1 @@
+export { default } from './App';

src/components/dashboard/dashboard.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function dashboard() {
+  return <h2>this is the dashboard</h2>;
+}

src/components/dashboard/index.js

@@ -0,0 +1 @@
+export { default } from './dashboard';

src/components/home/home.js

@@ -0,0 +1,55 @@
+import React from 'react';
+
+// Styles
+import './home.scss';
+
+// Routing
+import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom';
+
+// Routed Components
+import Dashboard from '../dashboard';
+
+export default function Home() {
+  return (
+    <BrowserRouter>
+      <Switch>
+        {/* If the current URL is /about, this route is rendered
+            while the rest are ignored */}
+        <Route path="/dashboard">
+          <Dashboard />
+        </Route>
+        {/* Note how these two routes are ordered. The more specific
+            path="/contact/:id" comes before path="/contact" so that
+            route will render when viewing an individual contact
+      <Route path="/contact/:id">
+        <Contact />
+      </Route>
+      <Route path="/contact">
+        <AllContacts />
+      </Route>{' '}
+      */}
+
+        {/* If none of the previous routes render anything,
+            this route acts as a fallback.
+
+            Important: A route with path="/" will *always* match
+            the URL because all URLs begin with a /. So that's
+            why we put this one last of all */}
+        <Route path="/">
+          <ComponentSelection />
+        </Route>
+      </Switch>
+    </BrowserRouter>
+  );
+}
+
+class ComponentSelection extends React.Component {
+  render() {
+    return (
+      <div>
+        <h2>alright we are in the component selection home page</h2>
+        <NavLink to="/dashboard">dashboard</NavLink>
+      </div>
+    );
+  }
+}

src/components/home/index.js

@@ -0,0 +1 @@
+export { default } from './home';