initial app set up

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

src/components/app/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import logo from '../../images/logo.svg';
+import './App.scss';
 
 function App() {
   return (

src/components/app/App.scss

@@ -1,3 +1,5 @@
+@import '../../styles/colors';
+
 .App {
   text-align: center;
 }

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';

src/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import Home from './components/home';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Home />
   </React.StrictMode>,
   document.getElementById('root')
 );

src/styles/_colors.scss

@@ -0,0 +1 @@
+$primary-color: #333;