CodeForBaltimore · stoopidJSON · Mar 17, 2020 · Mar 17, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "cfb-project",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "bootstrap": "^4.4.1",
+    "leaflet": "^1.6.0",
+    "react": "^16.13.0",
+    "react-bootstrap": "^1.0.0-beta.17",
+    "react-dom": "^16.13.0",
+    "react-leaflet": "^2.6.3",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+      crossorigin=""
+    />
+
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,8 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,29 @@
+.App {
+    height: 100vh;
+}
+
+/* Container for each page */
+.Content-Container {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    background-color: rgb(245, 243, 243);
+}
+
+/* Bootstrap NavBar additional CSS */
+.nav-link {
+    font-size: 22px;
+    font-weight: bold;
+}
+
+/* Necessary CSS for Leaflet Map Component */
+.leaflet-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .Map-Container {
+      width: 400px;
+      height: 400px;
+  }
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { BrowserRouter, Route } from 'react-router-dom';
+import './App.css';
+import NaviBar from './Components/NavBar';
+import Home from './Components/Home';
+import About from './Components/About';
+import Resources from './Components/Resources';
+import MapComponent from './Components/MapComponent';
+import SomePage from './Components/SomePage';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <div className="App">
+        <NaviBar />
+        <Route exact path="/" component={Home} />
+        <Route path="/about" component={About} />
+        <Route path="/resources" component={Resources} />
+        <Route path="/map" component={MapComponent} />
+        <Route path="/somepage" component={SomePage} />
+      </div>
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/src/App.test.js b/src/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();
+});
diff --git a/src/Assets/CfB.png b/src/Assets/CfB.png
diff --git a/src/Components/About.js b/src/Components/About.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class About extends Component {
+    render() {
+        return (
+            <div className='Content-Container'>
+                <h1>I'm also page.</h1>
+            </div>
+        );
+    }
+}
+
+export default About;
diff --git a/src/Components/Home.js b/src/Components/Home.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class Home extends Component {
+    render() {
+        return (
+            <div className='Content-Container'>
+                <h1>I'm a page.</h1>
+            </div>
+        );
+    }
+}
+
+export default Home;
diff --git a/src/Components/MapComponent.js b/src/Components/MapComponent.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import { Map, Marker, Popup, TileLayer } from "react-leaflet";
+
+class MapComponent extends Component {
+    render() {
+        return (
+            <div className='Content-Container'>
+                <div className='Map-Container'>
+                    <Map center={[39.299236, -76.609383]} zoom={12}>
+                        <TileLayer
+                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+                        />
+                    </Map>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default MapComponent;
diff --git a/src/Components/NavBar.js b/src/Components/NavBar.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { Navbar, Nav, Form, FormControl, Button, NavDropdown } from 'react-bootstrap';
+
+const NaviBar = () => {
+    return (
+
+        <Navbar bg="light" expand="lg">
+            <Navbar.Brand href="https://www.codeforbaltimore.org/" target="_blank">
+                <img 
+                    src='https://codeforbaltimore.org/images/cfb_logo_full.png'
+                    alt='Code for Baltimore Logo'
+                    style={{width: '110px', height: '60px'}}
+                />
+            </Navbar.Brand>
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+            <Navbar.Collapse id="basic-navbar-nav">
+                <Nav className="ml-auto" >
+                    <NavLink exact to="/" className='nav-link'>Home</NavLink>
+                    <NavLink to="/about" className='nav-link'>About</NavLink>
+                    <NavDropdown title="Resources" id="basic-nav-dropdown">
+                        <NavLink to="/resources" className='dropdown-item'>Resoruce Stuff</NavLink>
+                        <NavLink to="/map" className='dropdown-item'>Map Stuff</NavLink>
+                        <NavDropdown.Divider />
+                        <NavLink to="/somepage" className='dropdown-item'>Some Page</NavLink>
+                    </NavDropdown>
+                </Nav>
+                <Form inline>
+                    <FormControl 
+                        type="text" 
+                        placeholder="Search" 
+                        className="mr-sm-2" 
+                    />
+                    <Button variant="outline-success">Search</Button>
+                </Form>
+            </Navbar.Collapse>
+        </Navbar>
+    );
+}
+
+export default NaviBar;
diff --git a/src/Components/Resources.js b/src/Components/Resources.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class Resources extends Component {
+    render() {
+        return (
+            <div className='Content-Container'>
+                <h1>Resources</h1>
+            </div>
+        );
+    }
+}
+
+export default Resources;
diff --git a/src/Components/SomePage.js b/src/Components/SomePage.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class SomePage extends Component {
+    render() {
+        return (
+            <div className='Content-Container'>
+                <h1>Content.</h1>
+            </div>
+        );
+    }
+}
+
+export default SomePage;
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();