├── .gitignore
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── assets
    │   ├── img-main.jpg
    │   └── red30-tech-logo.png
    ├── components
    │   ├── Confirmation.js
    │   ├── Session.js
    │   ├── Category.js
    │   ├── Categories.js
    │   ├── Register.js
    │   ├── Header.js
    │   ├── App.js
    │   ├── About.js
    │   └── Home.js
    ├── index.js
    ├── logo.svg
    ├── index.css
    └── api.js
├── .github
    ├── CODEOWNERS
    ├── PULL_REQUEST_TEMPLATE.md
    ├── workflows
    │   └── main.yml
    └── ISSUE_TEMPLATE.md
├── CONTRIBUTING.md
├── package.json
├── NOTICE
├── README.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | .tmp
4 | npm-debug.log
5 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/building-modern-uis-with-react-router-v6-2495079/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/building-modern-uis-with-react-router-v6-2495079/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/building-modern-uis-with-react-router-v6-2495079/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/assets/img-main.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/building-modern-uis-with-react-router-v6-2495079/HEAD/src/assets/img-main.jpg


--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # Codeowners for these exercise files:
2 | # * (asterisk) deotes "all files and folders"
3 | # Example: * @producer @instructor
4 | 


--------------------------------------------------------------------------------
/src/assets/red30-tech-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/building-modern-uis-with-react-router-v6-2495079/HEAD/src/assets/red30-tech-logo.png


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | <!-- This repository *does not* accept pull requests (PRs). All pull requests will be closed. See CONTRIBUTING.md for further details. -->
2 | 


--------------------------------------------------------------------------------
/src/components/Confirmation.js:
--------------------------------------------------------------------------------
1 | export default function Confirmation() {
2 |   return (
3 |     <div className="container">
4 |       <h1>Thank You!</h1>
5 |       <p>You're now registered for Red30 Tech.</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Copy To Branches
 2 | on:
 3 |   workflow_dispatch:
 4 | jobs:
 5 |   copy-to-branches:
 6 |     runs-on: ubuntu-latest
 7 |     steps:
 8 |       - uses: actions/checkout@v2
 9 |         with:
10 |           fetch-depth: 0
11 |       - name: Copy To Branches Action
12 |         uses: planetoftheweb/copy-to-branches@v1.2
13 |         env:
14 |           key: main
15 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import { BrowserRouter } from "react-router-dom";
 4 | 
 5 | import "./index.css";
 6 | import App from "./components/App";
 7 | 
 8 | const root = ReactDOM.createRoot(document.getElementById("root"));
 9 | 
10 | root.render(
11 |   <React.StrictMode>
12 |     <BrowserRouter>
13 |       <App />
14 |     </BrowserRouter>
15 |   </React.StrictMode>
16 | );
17 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Red30 Tech Conf",
 3 |   "name": "Red30 Tech Conference",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/Session.js:
--------------------------------------------------------------------------------
 1 | import { getSession } from "../api";
 2 | 
 3 | export default function Session() {
 4 |   // Replace the placeholder catId and sessionId variables with a React Router Hook
 5 |   const catId = "3d-printing-and-design";
 6 |   const sessionId = "3d-printing-metal";
 7 | 
 8 |   const { name, desc, speaker } = getSession({ catId, sessionId });
 9 | 
10 |   return (
11 |     <>
12 |       <h3>{name}</h3>
13 |       <p>{desc}</p>
14 | 
15 |       <h4>{speaker.name}</h4>
16 |       <span>
17 |         {speaker.title} at {speaker.org}
18 |       </span>
19 |       <p>{speaker.bio}</p>
20 |     </>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | 
2 | Contribution Agreement
3 | ======================
4 | 
5 | This repository does not accept pull requests (PRs). All pull requests will be closed.
6 | 
7 | However, if any contributions (through pull requests, issues, feedback or otherwise) are provided, as a contributor, you represent that the code you submit is your original work or that of your employer (in which case you represent you have the right to bind your employer). By submitting code (or otherwise providing feedback), you (and, if applicable, your employer) are licensing the submitted code (and/or feedback) to LinkedIn and the open source community subject to the BSD 2-Clause license.
8 | 


--------------------------------------------------------------------------------
/src/components/Category.js:
--------------------------------------------------------------------------------
 1 | import { useParams } from "react-router-dom";
 2 | import { getCategory } from "../api";
 3 | 
 4 | export default function Category() {
 5 |   const { catId } = useParams();
 6 |   const category = getCategory(catId);
 7 | 
 8 |   return (
 9 |     <>
10 |       <h2>{category.name} Sessions</h2>
11 | 
12 |       <ul className="session-list">
13 |         {category?.sessions.map(session => (
14 |           <li className="session" key={session.id}>
15 |             <p className="session-name">{session.name}</p>
16 |             <p>
17 |               {session.speaker.name} | {session.speaker.org}
18 |             </p>
19 |           </li>
20 |         ))}
21 |       </ul>
22 |     </>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/Categories.js:
--------------------------------------------------------------------------------
 1 | import { Outlet, NavLink } from "react-router-dom";
 2 | import { getCategories } from "../api";
 3 | 
 4 | export default function Categories() {
 5 |   const categories = getCategories();
 6 |   return (
 7 |     <div className="container">
 8 |       <h1>Session Categories</h1>
 9 | 
10 |       <ul className="categories">
11 |         {categories.map(cat => (
12 |           <li key={cat.id}>
13 |             <NavLink
14 |               className={({ isActive }) =>
15 |                 isActive ? "category-active" : null
16 |               }
17 |               to={cat.id}
18 |             >
19 |               {cat.name}
20 |             </NavLink>
21 |           </li>
22 |         ))}
23 |       </ul>
24 |       <Outlet />
25 |     </div>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/Register.js:
--------------------------------------------------------------------------------
 1 | import { useRef } from "react";
 2 | 
 3 | export default function Register() {
 4 |   const emailRef = useRef(null);
 5 | 
 6 |   function handleSubmit(event) {
 7 |     event.preventDefault();
 8 |   }
 9 | 
10 |   return (
11 |     <div className="container">
12 |       <h1>Register for Red30 Tech</h1>
13 |       <p>
14 |         Make sure to grab your spot for this year's conference! We love
15 |         technology and consistently work towards being the premier provider of
16 |         technology solutions and events that connect the world.
17 |       </p>
18 |       <form onSubmit={handleSubmit}>
19 |         <label>
20 |           Email:
21 |           <input type="text" name="email" ref={emailRef} />
22 |         </label>
23 |         <input type="submit" value="Submit" />
24 |       </form>
25 |     </div>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | import { Link, NavLink } from "react-router-dom";
 2 | import logo from "../assets/red30-tech-logo.png";
 3 | 
 4 | export default function Header() {
 5 |   const getClass = ({ isActive }) => (isActive ? "nav-active" : null);
 6 | 
 7 |   return (
 8 |     <header className="container">
 9 |       <Link to="/">
10 |         <img
11 |           className="logo"
12 |           src={logo}
13 |           alt="Red30 Tech logo"
14 |           title="Red30 Tech | Home"
15 |         />
16 |       </Link>
17 | 
18 |       <nav>
19 |         <NavLink to="/" className={getClass}>
20 |           Home
21 |         </NavLink>
22 |         <NavLink to="/about" className={getClass}>
23 |           About
24 |         </NavLink>
25 |         <NavLink to="/categories" className={getClass}>
26 |           Categories
27 |         </NavLink>
28 |       </nav>
29 |     </header>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
 1 | import { Routes, Route } from "react-router-dom";
 2 | 
 3 | import Home from "./Home";
 4 | import About from "./About";
 5 | import Categories from "./Categories";
 6 | import Category from "./Category";
 7 | import Header from "./Header";
 8 | 
 9 | function App() {
10 |   return (
11 |     <div className="app">
12 |       <Header />
13 | 
14 |       <Routes>
15 |         <Route path="/" element={<Home title="Welcome to Red30 Tech" />} />
16 |         <Route path="about" element={<About />} />
17 |         <Route path="categories" element={<Categories />}>
18 |           <Route path=":catId" element={<Category />} />
19 |         </Route>
20 |         <Route
21 |           path="*"
22 |           element={<h1 className="not-found">Page Not Found</h1>}
23 |         />
24 |       </Routes>
25 | 
26 |       <footer className="container">
27 |         &copy;2022 | <a href="https://red30tech.com/">Red30 Tech</a>
28 |       </footer>
29 |     </div>
30 |   );
31 | }
32 | 
33 | export default App;
34 | 


--------------------------------------------------------------------------------
/src/components/About.js:
--------------------------------------------------------------------------------
 1 | export default function About() {
 2 |   return (
 3 |     <div className="container">
 4 |       <h1>Technology and Business Solutions</h1>
 5 |       <p>
 6 |         Red30 Tech is the leading source of secure, fully customizable
 7 |         technology and business solutions. We cater to those who need scalable
 8 |         results that are sustainable for their company and the planet. With the
 9 |         ever-evolving technology landscape, we want to be your go-to source for
10 |         business technology.
11 |       </p>
12 |       <p>
13 |         Our mission is to provide technology and business-driven solutions that
14 |         work seamlessly with your company, allowing your employees, partners,
15 |         and customers to engage in quality interactions that lead to scalable
16 |         growth. We consistently work towards being the premier provider of
17 |         environmentally sustainable technology solutions that connect the world.
18 |       </p>
19 |     </div>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "conference-site",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.4",
 7 |     "@testing-library/react": "^13.3.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "react": "^18.2.0",
10 |     "react-dom": "^18.2.0",
11 |     "react-router-dom": "^6.3.0",
12 |     "react-scripts": "5.0.1",
13 |     "web-vitals": "^2.1.4"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/Home.js:
--------------------------------------------------------------------------------
 1 | import featImg from "../assets/img-main.jpg";
 2 | 
 3 | export default function Home({ title }) {
 4 |   return (
 5 |     <div className="container">
 6 |       <img
 7 |         className="img-feat"
 8 |         src={featImg}
 9 |         alt="Red30 Tech conference attendees on a laptop"
10 |       />
11 | 
12 |       <h1>{title}</h1>
13 |       <p>
14 |         This is a fictitious company and conference created by{" "}
15 |         <a
16 |           href="https://www.linkedin.com/feed/"
17 |           target="_blank"
18 |           rel="noreferrer noopener"
19 |         >
20 |           LinkedIn Corporation, or its affiliates
21 |         </a>
22 |         , solely for the creation and development of educational training
23 |         materials. Any resemblance to real products or services is purely
24 |         coincidental. Information provided about the products or services is
25 |         also fictitious and should not be construed as representative of actual
26 |         products or services on the market in a similar product or service
27 |         category.
28 |       </p>
29 |     </div>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | BEFORE POSTING YOUR ISSUE:
 3 | - These comments won't show up when you submit the issue.
 4 | - Please use the sections below to provide information about the issue.
 5 | - Be specific: Add as much detail as possible.
 6 | -->
 7 | 
 8 | ## Issue Overview
 9 | <!-- A brief overview of the issue --->
10 | 
11 | ## Describe your environment
12 | <!-- Provide details about your environment: what editor, browser, and other software you are using and any other specifics to your setup -->
13 | 
14 | ## Steps to Reproduce
15 | <!-- Provide an unambiguous set of steps to reproduce this bug. Include code to reproduce, if relevant. Include a live link if available. -->
16 | 1.
17 | 2.
18 | 3.
19 | 4.
20 | 
21 | ## Expected Behavior
22 | <!-- What behavior did you expect? -->
23 | 
24 | ## Current Behavior
25 | <!-- What happened instead of the expected behavior? Describe the difference. -->
26 | 
27 | ## Possible Solution
28 | <!-- Optional: Do you have a fix or a suggestion on how to fix the issue? -->
29 | 
30 | ## Screenshots / Video
31 | <!-- Optional: Add any screenshots or video of the issue if available. -->
32 | 
33 | ## Related Issues
34 | <!-- List related issues -->
35 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Red30 Tech Conference</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/NOTICE:
--------------------------------------------------------------------------------
 1 | Copyright 2022 LinkedIn Corporation
 2 | All Rights Reserved.
 3 | 
 4 | Licensed under the LinkedIn Learning Exercise File License (the "License").
 5 | See LICENSE in the project root for license information.
 6 | 
 7 | ATTRIBUTIONS:
 8 | 
 9 | React
10 | https://github.com/facebook/react
11 | Copyright (c) Facebook, Inc. and its affiliates.
12 | License: MIT
13 | https://opensource.org/licenses/MIT
14 | 
15 | Please note, this project may automatically load third party code from external 
16 | repositories (for example, NPM modules, Composer packages, or other dependencies). 
17 | If so, such third party code may be subject to other license terms than as set 
18 | forth above. In addition, such third party code may also depend on and load 
19 | multiple tiers of dependencies. Please review the applicable licenses of the 
20 | additional dependencies.
21 | 
22 | =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
23 | 
24 | MIT License
25 | 
26 | Copyright (c) Facebook, Inc. and its affiliates.
27 | 
28 | Permission is hereby granted, free of charge, to any person obtaining a copy
29 | of this software and associated documentation files (the ""Software""), to deal
30 | in the Software without restriction, including without limitation the rights
31 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
32 | copies of the Software, and to permit persons to whom the Software is
33 | furnished to do so, subject to the following conditions:
34 | 
35 | The above copyright notice and this permission notice shall be included in all
36 | copies or substantial portions of the Software.
37 | 
38 | THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
39 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
40 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
41 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
42 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
43 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
44 | SOFTWARE.
45 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Building Modern UIs with React Router v6
 2 | This is the repository for the LinkedIn Learning course Building Modern UIs with React Router v6. The full course is available from [LinkedIn Learning][lil-course-url].
 3 | 
 4 | ![Building Modern UIs with React Router v6][lil-thumbnail-url] 
 5 | 
 6 | Are you already familiar with React and ready to level up your skills and build modern user interfaces? In this course, learn how to extend your React applications by adding routing capabilities with React Router, the standard routing library for React. Instructor Guil Hernandez starts by going over routing basics and single page apps. He then illustrates some of the useful React Router components, hooks, and other features that navigate users to all the different views and help create dynamic user interfaces that automatically update whenever the URL changes. He explains how to create 404 or “not found” routes, as well as how the location state, history object, and the history stack work. Guil also provides several challenges along the way so you can practice as you go and make what you’re learning stick.
 7 | 
 8 | ## Instructions
 9 | This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add `/tree/BRANCH_NAME` to the URL to go to the branch you want to access.
10 | 
11 | ## Branches
12 | The branches are structured to correspond to the videos in the course. The naming convention is `CHAPTER#_MOVIE#`. As an example, the branch named `02_03` corresponds to the second chapter and the third video in that chapter. 
13 | Some branches will have a beginning and an end state. These are marked with the letters `b` for "beginning" and `e` for "end". The `b` branch contains the code as it is at the beginning of the movie. The `e` branch contains the code as it is at the end of the movie. The `main` branch holds the final state of the code when in the course.
14 | 
15 | When switching from one exercise files branch to the next after making changes to the files, you may get a message like this:
16 | 
17 |     error: Your local changes to the following files would be overwritten by checkout:        [files]
18 |     Please commit your changes or stash them before you switch branches.
19 |     Aborting
20 | 
21 | To resolve this issue:
22 | 	
23 |     Add changes to git using this command: git add .
24 | 	Commit changes using this command: git commit -m "some message"
25 | 
26 | ## Installing
27 | 1. To use these exercise files, you must have the following installed:
28 | 	- [Node.js](https://nodejs.org/en/)
29 | 2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree.
30 | 3. Run `npm install` to install all project dependencies, then `npm start` to run and launch the app
31 | 
32 | 
33 | ### Instructor
34 | 
35 | Guil Hernandez 
36 |                             
37 | Software Development Instructor and Developer
38 | 
39 |                             
40 | 
41 | Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/guil-hernandez).
42 | 
43 | [lil-course-url]: https://www.linkedin.com/learning/building-modern-uis-with-react-router-v6
44 | [lil-thumbnail-url]: https://cdn.lynda.com/course/2495079/2495079-1660328056345-16x9.jpg
45 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | /* base styles */
  2 | *, *:before, *:after {
  3 |   box-sizing: border-box;
  4 | }
  5 | 
  6 | body {
  7 |   margin: 0;
  8 |   color: #222;
  9 |   font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
 10 |   -webkit-font-smoothing: antialiased;
 11 |   -moz-osx-font-smoothing: grayscale;
 12 | }
 13 | 
 14 | h1 {
 15 |   font-size: 2.2rem;
 16 |   margin: 0 0 1em 0;
 17 | }
 18 | 
 19 | h2 {
 20 |   font-size: 1.85rem;
 21 |   color: #858585;
 22 | }
 23 | 
 24 | h3 {
 25 |   font-size: 1.5rem;
 26 |   margin-bottom: 0;
 27 | }
 28 | 
 29 | h4 {
 30 |   font-size: 1.25rem;
 31 |   color: #525252;
 32 |   margin: 0 0 0.25em;
 33 | }
 34 | 
 35 | h4 + span {
 36 |   display: block;
 37 |   margin-bottom: 1.65em;
 38 | }
 39 | 
 40 | p {
 41 |   font-size: 1.125rem;
 42 |   line-height: 1.5;
 43 |   margin-bottom: 1.5em;
 44 | }
 45 | 
 46 | ul {
 47 |   list-style: none;
 48 |   font-size: 1.125rem;
 49 |   margin: 0;
 50 |   padding: 0;
 51 | }
 52 | 
 53 | ul li {
 54 |   margin-bottom: 1em;
 55 | }
 56 | 
 57 | /* nav & links */
 58 | 
 59 | a {
 60 |   color: #e7212b;
 61 | }
 62 | 
 63 | a:hover {
 64 |   text-decoration: none;
 65 | }
 66 | 
 67 | nav a {
 68 |   display: block;
 69 |   font-size: 1.25rem;
 70 |   color: #DD1F26;
 71 |   padding-bottom: 0.15em;
 72 |   border-bottom: 2px solid transparent;
 73 |   font-weight: 500;
 74 |   text-decoration: none;
 75 | }
 76 | 
 77 | nav a:hover, 
 78 | .nav-active {
 79 |   color: #5dabaa;
 80 | }
 81 | 
 82 | .categories a {
 83 |   font-weight: 500;
 84 |   color: #605e5e;
 85 |   text-decoration: none;
 86 |   padding: 0.25em 0.4em;
 87 | }
 88 | .categories a:hover, 
 89 | a.category-active {
 90 |   color: #fff;
 91 |   background-color: #605e5e;
 92 |   border-radius: 3px;
 93 | }
 94 | 
 95 | .session a {
 96 |   display: block;
 97 |   color: rgb(56, 56, 56);
 98 |   text-decoration: none;
 99 |   border: 1px solid currentColor;
100 |   padding: 0.85em 1.125em;
101 |   border-radius: 3px;
102 | }
103 | 
104 | .session a:hover, 
105 | a.session-active {
106 |   color: #489b9a;
107 | }
108 | 
109 | /* components & assets */
110 | .logo {
111 |   width: 220px;
112 | }
113 | 
114 | .img-feat {
115 |   width: 100%;
116 |   border-radius: 0.35em;
117 |   margin-bottom: 2em;
118 | }
119 | 
120 | .categories {
121 |   margin-top: 2.5em;
122 |   margin-bottom: 1.5em;
123 | }
124 | 
125 | ul.session-list {
126 |   display: flex;
127 | }
128 | 
129 | .session + .session {
130 |   margin-left: 1.5em;
131 | }
132 | 
133 | .session-name {
134 |   font-size: 1.125rem;
135 |   font-weight: bold;
136 | }
137 | 
138 | .session p {
139 |   margin: 0;
140 | }
141 | 
142 | form {
143 |   font-size: 1.25rem;
144 |   margin: 2em auto;
145 | }
146 | 
147 | label {
148 |   display: block;
149 |   font-weight: 500;
150 |   margin-bottom: 1.5em;
151 | }
152 | 
153 | input {
154 |   font-size: 1em;
155 |   margin-top: 0.35em;
156 |   display: block;
157 |   width: 100%;
158 |   padding: 0.5em;
159 |   border: 1px solid #dbdbdb;
160 |   border-radius: 3px;
161 | }
162 | 
163 | input:focus {
164 |   outline-color: #5dabaa;
165 | }
166 | 
167 | input[type="submit"] {
168 |   cursor: pointer;
169 |   color: #fff;
170 |   font-weight: bold;
171 |   padding: 0.65em 0;
172 |   background-color: #75bebd;
173 |   border: none;
174 | }
175 | input[type="submit"]:hover {
176 |   background-color: #5dabaa;
177 | }
178 | 
179 | /* layout */
180 | .app {
181 |   min-height: 100vh;
182 |   display: flex;
183 |   flex-direction: column;
184 | }
185 | 
186 | header {
187 |   padding: 1.75em 0;
188 | }
189 | 
190 | .not-found {
191 |   text-align: center;
192 | }
193 | 
194 | .not-found::before {
195 |   content: "😕";
196 |   margin-right: 0.35em;
197 | }
198 | 
199 | footer.container {
200 |   padding: 2.25em 0;
201 |   margin-top: auto;
202 |   border-top: 1px solid rgb(219, 219, 219);
203 | }
204 | 
205 | .container {
206 |   width: 90%;
207 |   max-width: 800px;
208 |   margin: 0 auto;
209 | }
210 | 
211 | /* media queries */
212 | @media (max-width: 767px) {
213 |   nav a {
214 |     padding: 0.35em 0;
215 |   }
216 | }
217 | 
218 | @media (min-width: 768px) {
219 |   header, 
220 |   nav {
221 |     display: flex;
222 |     align-items: center;
223 |   } 
224 |   header.container {
225 |     margin-bottom: 1em;
226 |   }
227 |   nav {
228 |     margin-left: auto;
229 |   }
230 |   nav a {
231 |     margin-left: 1.25em;
232 |   }
233 |   .nav-active {
234 |     border-bottom: 2px solid currentColor;
235 |   }
236 |   .categories {
237 |     display: grid;
238 |     grid-template-columns: 1fr 1fr 1fr;
239 |   }
240 |   form {
241 |     width: 60%;
242 |   }
243 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | LinkedIn Learning Exercise Files License Agreement
  2 | ==================================================
  3 | 
  4 | This License Agreement (the "Agreement") is a binding legal agreement
  5 | between you (as an individual or entity, as applicable) and LinkedIn
  6 | Corporation (“LinkedIn”). By downloading or using the LinkedIn Learning
  7 | exercise files in this repository (“Licensed Materials”), you agree to
  8 | be bound by the terms of this Agreement. If you do not agree to these
  9 | terms, do not download or use the Licensed Materials. 
 10 | 
 11 | 1. License.
 12 | - a. Subject to the terms of this Agreement, LinkedIn hereby grants LinkedIn
 13 | members during their LinkedIn Learning subscription a non-exclusive,
 14 | non-transferable copyright license, for internal use only, to 1) make a
 15 | reasonable number of copies of the Licensed Materials, and 2) make
 16 | derivative works of the Licensed Materials for the sole purpose of
 17 | practicing skills taught in LinkedIn Learning courses.
 18 | - b. Distribution. Unless otherwise noted in the Licensed Materials, subject
 19 | to the terms of this Agreement, LinkedIn hereby grants LinkedIn members
 20 | with a LinkedIn Learning subscription a non-exclusive, non-transferable
 21 | copyright license to distribute the Licensed Materials, except the
 22 | Licensed Materials may not be included in any product or service (or
 23 | otherwise used) to instruct or educate others.
 24 | 
 25 | 2. Restrictions and Intellectual Property. 
 26 | - a. You may not to use, modify, copy, make derivative works of, publish,
 27 | distribute, rent, lease, sell, sublicense, assign or otherwise transfer the
 28 | Licensed Materials, except as expressly set forth above in Section 1. 
 29 | - b. Linkedin (and its licensors) retains its intellectual property rights
 30 | in the Licensed Materials. Except as expressly set forth in Section 1,
 31 | LinkedIn grants no licenses.
 32 | - c. You indemnify LinkedIn and its licensors and affiliates for i) any
 33 | alleged infringement or misappropriation of any intellectual property rights
 34 | of any third party based on modifications you make to the Licensed Materials,
 35 | ii) any claims arising from your use or distribution of all or part of the
 36 | Licensed Materials and iii) a breach of this Agreement. You will defend, hold
 37 | harmless, and indemnify LinkedIn and its affiliates (and our and their
 38 | respective employees, shareholders, and directors) from any claim or action
 39 | brought by a third party, including all damages, liabilities, costs and
 40 | expenses, including reasonable attorneys’ fees, to the extent resulting from,
 41 | alleged to have resulted from, or in connection with: (a) your breach of your
 42 | obligations herein; or (b) your use or distribution of any Licensed Materials.
 43 | 
 44 | 3. Open source. This code may include open source software, which may be
 45 | subject to other license terms as provided in the files. 
 46 |  
 47 | 4. Warranty Disclaimer. LINKEDIN PROVIDES THE LICENSED MATERIALS ON AN “AS IS”
 48 | AND “AS AVAILABLE” BASIS. LINKEDIN MAKES NO REPRESENTATION OR WARRANTY,
 49 | WHETHER EXPRESS OR IMPLIED, ABOUT THE LICENSED MATERIALS, INCLUDING ANY
 50 | REPRESENTATION THAT THE LICENSED MATERIALS WILL BE FREE OF ERRORS, BUGS OR
 51 | INTERRUPTIONS, OR THAT THE LICENSED MATERIALS ARE ACCURATE, COMPLETE OR
 52 | OTHERWISE VALID. TO THE FULLEST EXTENT PERMITTED BY LAW, LINKEDIN AND ITS
 53 | AFFILIATES DISCLAIM ANY IMPLIED OR STATUTORY WARRANTY OR CONDITION, INCLUDING
 54 | ANY IMPLIED WARRANTY OR CONDITION OF MERCHANTABILITY OR FITNESS FOR A
 55 | PARTICULAR PURPOSE, AVAILABILITY, SECURITY, TITLE AND/OR NON-INFRINGEMENT.
 56 | YOUR USE OF THE LICENSED MATERIALS IS AT YOUR OWN DISCRETION AND RISK, AND
 57 | YOU WILL BE SOLELY RESPONSIBLE FOR ANY DAMAGE THAT RESULTS FROM USE OF THE
 58 | LICENSED MATERIALS TO YOUR COMPUTER SYSTEM OR LOSS OF DATA.  NO ADVICE OR
 59 | INFORMATION, WHETHER ORAL OR WRITTEN, OBTAINED BY YOU FROM US OR THROUGH OR
 60 | FROM THE LICENSED MATERIALS WILL CREATE ANY WARRANTY OR CONDITION NOT
 61 | EXPRESSLY STATED IN THESE TERMS.
 62 | 
 63 | 5. Limitation of Liability. LINKEDIN SHALL NOT BE LIABLE FOR ANY INDIRECT,
 64 | INCIDENTAL, SPECIAL, PUNITIVE, CONSEQUENTIAL OR EXEMPLARY DAMAGES, INCLUDING
 65 | BUT NOT LIMITED TO, DAMAGES FOR LOSS OF PROFITS, GOODWILL, USE, DATA OR OTHER
 66 | INTANGIBLE LOSSES . IN NO EVENT WILL LINKEDIN'S AGGREGATE LIABILITY TO YOU
 67 | EXCEED $100. THIS LIMITATION OF LIABILITY SHALL:
 68 | - i. APPLY REGARDLESS OF WHETHER (A) YOU BASE YOUR CLAIM ON CONTRACT, TORT,
 69 | STATUTE, OR ANY OTHER LEGAL THEORY, (B) WE KNEW OR SHOULD HAVE KNOWN ABOUT
 70 | THE POSSIBILITY OF SUCH DAMAGES, OR (C) THE LIMITED REMEDIES PROVIDED IN THIS
 71 | SECTION FAIL OF THEIR ESSENTIAL PURPOSE; AND
 72 | - ii. NOT APPLY TO ANY DAMAGE THAT LINKEDIN MAY CAUSE YOU INTENTIONALLY OR
 73 | KNOWINGLY IN VIOLATION OF THESE TERMS OR APPLICABLE LAW, OR AS OTHERWISE
 74 | MANDATED BY APPLICABLE LAW THAT CANNOT BE DISCLAIMED IN THESE TERMS.
 75 | 
 76 | 6. Termination. This Agreement automatically terminates upon your breach of
 77 | this Agreement or termination of your LinkedIn Learning subscription. On
 78 | termination, all licenses granted under this Agreement will terminate
 79 | immediately and you will delete the Licensed Materials. Sections 2-7 of this
 80 | Agreement survive any termination of this Agreement. LinkedIn may discontinue
 81 | the availability of some or all of the Licensed Materials at any time for any
 82 | reason.
 83 | 
 84 | 7. Miscellaneous. This Agreement will be governed by and construed in
 85 | accordance with the laws of the State of California without regard to conflict
 86 | of laws principles. The exclusive forum for any disputes arising out of or
 87 | relating to this Agreement shall be an appropriate federal or state court
 88 | sitting in the County of Santa Clara, State of California. If LinkedIn does
 89 | not act to enforce a breach of this Agreement, that does not mean that
 90 | LinkedIn has waived its right to enforce this Agreement. The Agreement does
 91 | not create a partnership, agency relationship, or joint venture between the
 92 | parties.  Neither party has the power or authority to bind the other or to
 93 | create any obligation or responsibility on behalf of the other. You may not,
 94 | without LinkedIn’s prior written consent, assign or delegate any rights or
 95 | obligations under these terms, including in connection with a change of
 96 | control. Any purported assignment and delegation shall be ineffective. The
 97 | Agreement shall bind and inure to the benefit of the parties, their respective
 98 | successors and permitted assigns. If any provision of the Agreement is
 99 | unenforceable, that provision will be modified to render it enforceable to the
100 | extent possible to give effect to the parties’ intentions and the remaining
101 | provisions will not be affected. This Agreement is the only agreement between
102 | you and LinkedIn regarding the Licensed Materials, and supersedes all prior
103 | agreements relating to the Licensed Materials.  
104 | 
105 | Last Updated: March 2019
106 | 


--------------------------------------------------------------------------------
/src/api.js:
--------------------------------------------------------------------------------
  1 | const categories = [
  2 |   {
  3 |     name: "3D Printing and Design",
  4 |     id: "3d-printing-and-design",
  5 |     sessions: [
  6 |       {
  7 |         name: "3D Printing with Metal",
  8 |         id: "3d-printing-metal",
  9 |         desc: "See the latest in metal 3D printing technologies, from desktop machines (you need a really big desk!) to those designed for machine shops creating high-end and high-volume pieces.",
 10 |         speaker: {
 11 |           name: "Geoff Leffler",
 12 |           title: "Fabrication Specialist",
 13 |           org: "KinetEco Inc.",
 14 |           bio: "Geoff Leffler has metal in his veins. Starting out in traditional steel and aluminum fabrication, he's become obsessed with new technologies that can create finished metal parts quickly and affordably.",
 15 |         },
 16 |       },
 17 |       {
 18 |         name: "Homebuilding and 3D Printing",
 19 |         id: "homebuilding-and-3d-printing",
 20 |         desc: "A new house in 24 hours—can this be our practical solution for making affordable housing for all? See what has been done in this very vertical industry, and discuss how it will grow and be truly affordable—both for those living in the homes, and for the builders that create them.",
 21 |         speaker: {
 22 |           name: "Griffin Snow",
 23 |           title: "Urban Planner",
 24 |           org: "KinetEco Inc.",
 25 |           bio: "Griffin Snow has been driven to find ways to make efficient, affordable housing for all ever since he was a kid living on the streets with his single dad.",
 26 |         },
 27 |       },
 28 |     ],
 29 |   },
 30 |   {
 31 |     name: "AI and Robotics",
 32 |     id: "ai-and-robotics",
 33 |     sessions: [
 34 |       {
 35 |         name: "Automating User Testing",
 36 |         id: "automating-user-testing",
 37 |         desc: "Eliminating human error and saving time and money are key reasons user testing—at least parts of it—is an ideal job for automation. We'll discuss the advantages and disadvantages of using machines to test a product that will be used by humans.",
 38 |         speaker: {
 39 |           name: "Ally Bode",
 40 |           title: "UX Designer",
 41 |           org: "Globe Bank International",
 42 |           bio: "Ally Bode believes in humans, and spends her time utilizing ai and robotics to make products more human-manageable.",
 43 |         },
 44 |       },
 45 |       {
 46 |         name: "Security in the Age of AI",
 47 |         id: "security-in-age-of-ai",
 48 |         desc: "With security crises gaining in prevalence, it's more important than ever for us to make sure that our AI can't be hacked. How can we avoid all the data noise out there?",
 49 |         speaker: {
 50 |           name: "Daniel Rohan",
 51 |           title: "Cyber Security Specialist",
 52 |           org: "Hansel & Petal",
 53 |           bio: "Daniel Rohan has been with Hansel & Petal for six years. His leadership in AI security is well-documented in his many articles for top security publications.",
 54 |         },
 55 |       },
 56 |     ],
 57 |   },
 58 |   {
 59 |     name: "Arts, Crafts, Fashion, and Fare",
 60 |     id: "arts-crafts-fashion-fare",
 61 |     sessions: [
 62 |       {
 63 |         name: "Ideas into Business",
 64 |         id: "ideas-into-business",
 65 |         desc: "From 3D printed jewelry to hand embroidery, epoxy river tables to boat making, many makers find that there is a market for what they create, and embark on a business. Meet successful makers who have turned their maker energy into successful enterprises.",
 66 |         speaker: {
 67 |           name: "Dixie Russel",
 68 |           title: "Art Director",
 69 |           org: "Red30 Design",
 70 |           bio: "Dixie Russel has run a successful side business selling her paintings for the last seven years, and founded the local arts-makerspace in her neighborhood. We have no idea how she finds time to work for us, we're just glad she does.",
 71 |         },
 72 |       },
 73 |       {
 74 |         name: "Making Things from Other Things",
 75 |         id: "making-things-from-other-things",
 76 |         desc: "When you think 'maker', you don't usually think about olive oil. But olive oil's use has gone far beyond its role on the dinner table. This session shows and tells about artisanal creations that include olive oil and other usually-used-for-something-else ingredients, from soap to wood polish.",
 77 |         speaker: {
 78 |           name: "Anna Rossi",
 79 |           title: "Product Development Specialist",
 80 |           org: "Two Trees Olive Oil",
 81 |           bio: "Anna Rossi's favorite part of her job is getting to invent things with people and companies from all over the world. She also heads up the annual customer maker contest, featuring people who make amazing things with Two Trees Olive Oil.",
 82 |         },
 83 |       },
 84 |     ],
 85 |   },
 86 |   {
 87 |     name: "Community Service",
 88 |     id: "community-service",
 89 |     sessions: [
 90 |       {
 91 |         name: "Community Service Event: Red30Cares ",
 92 |         id: "red30-cares",
 93 |         desc: "Join your fellow makers at our Annual Red30Cares community service event. Red30Cares work in concerted effort to improve the lives of others and to inspire community, activism, and philanthropy on a large scale",
 94 |         speaker: {
 95 |           name: "Jenny Torres",
 96 |           title: "Account Executive",
 97 |           org: "Red30 Tech",
 98 |           bio: "Jenny Torres likes to tell others that there is literally a maker or two inside of her since she has spent most of her life morbidly obese due to a rare medical condition. She credits the maker community with giving her the confidence and courage to create.",
 99 |         },
100 |       },
101 |     ],
102 |   },
103 |   {
104 |     name: "Education and Training",
105 |     id: "education-and-training",
106 |     sessions: [
107 |       {
108 |         name: "The End Product is Human",
109 |         id: "end-product-is-human",
110 |         desc: "The aspects of the learning experience continually changes, and has been forced to take some giant leaps in this past year. Learn how to develop new technology and experiences while keeping in mind that the end “product” is a human that is counting on you to learn.",
111 |         speaker: {
112 |           name: "Aran Nguyen",
113 |           title: "LEX Designer",
114 |           org: "Binaryville",
115 |           bio: "Aran Nguyen is widely known as a champion of accessible education, receiving awards for ingenuity in online learning for students with special needs.",
116 |         },
117 |       },
118 |       {
119 |         name: "Hands-On Hacks",
120 |         id: "hands-on-hacks",
121 |         desc: "Join your fellow makers in learning their favorite hacks in popular maker categories.",
122 |         speaker: {
123 |           name: "Gwen Fabler",
124 |           title: "President",
125 |           org: "Fabler Innovations",
126 |           bio: "Gwen Fabler is a maker hack geek, or so she says, and loves collecting and distributing crowdsourced maker information.",
127 |         },
128 |       },
129 |     ],
130 |   },
131 |   {
132 |     name: "Entertainment",
133 |     id: "entertainment",
134 |     sessions: [
135 |       {
136 |         name: "Experience Makers Festival",
137 |         id: "experience-makers-festival",
138 |         desc: "While composed music has long been considered an art, sound is still considered more of a technical skill than an art. As a broadcast engineer, Beverley has been an advocate for sound to be treated as an art, with the BE conducting the blend of voice, music, background noise, and sound effects to create content that greatly enhances the visual aspects of a broadcast.",
139 |         speaker: {
140 |           name: "Beverley Armstrong",
141 |           title: "Broadcast Engineer",
142 |           org: "Red30 Design",
143 |           bio: "While Beverley Armstrong is known as a tech head, she also has a secret musical side playing Viennese oboe and other woodwinds.",
144 |         },
145 |       },
146 |     ],
147 |   },
148 |   {
149 |     name: "Ethics and Environment",
150 |     id: "ethics-and-environment",
151 |     sessions: [
152 |       {
153 |         name: "The Solar Bowler",
154 |         id: "solar-bowler",
155 |         desc: "Meet the makers of The Solar Bowler, a fictional character that uses unique and sustainable ways to power his favorite pastime.",
156 |         speaker: {
157 |           name: "Aksh Khatri",
158 |           title: "Controls System Lead",
159 |           org: "KinetEco Inc.",
160 |           bio: "Aksh Kahatri balances his serious job with another serious job: Keeping The Solar Bowler busy creating new ways to power his bowling alley.",
161 |         },
162 |       },
163 |       {
164 |         name: "Managing Virtual Teams",
165 |         id: "managing-virtual-teams",
166 |         desc: "How do you keep your team invested in projects if they are all or partly remote? What are your biggest challenges and the best tools to meet those challenges? Join these managers in a roundtable discussion as they share the tools and methodologies that work for them.",
167 |         speaker: {
168 |           name: "Ashley Hackett",
169 |           title: "Chief Innovation Officer",
170 |           org: "The Landon Hotel",
171 |           bio: 'Ashley Hackett calls herself a "permanently remote" employee as part of the executive team that manages a worldwide accommodation business.',
172 |         },
173 |       },
174 |     ],
175 |   },
176 |   {
177 |     name: "Keynote",
178 |     id: "keynote",
179 |     sessions: [
180 |       {
181 |         name: "We are All Makers",
182 |         id: "we-are-all-makers",
183 |         desc: "There is a maker inside of each of us—and some get out more often than others. From innovating a way to make a job easier, to renovating a tired chest of drawers into a piece of statement home decor, bits of maker make it into our days on a regular basis. Here's how to embrace and encourage that maker in everyone around us.",
184 |         speaker: {
185 |           name: "Jenny Torres",
186 |           title: "Account Executive",
187 |           org: "Red30 Tech",
188 |           bio: "Jenny Torres likes to tell others that there is literally a maker or two inside of her since she has spent most of her life morbidly obese due to a rare medical condition. She credits the maker community with giving her the confidence and courage to create.",
189 |         },
190 |       },
191 |       {
192 |         name: "Making a Maker Community",
193 |         id: "making-a-maker-community",
194 |         desc: "One of the things we hear most often is that the favorite part of a makerspace is being able to socialize with other people interested in the same things you are, and learning about areas of making that you want to learn about. How do we build and nurture this community?",
195 |         speaker: {
196 |           name: "Milia Wu",
197 |           title: "Director of Special Projects",
198 |           org: "City of Orange Valley",
199 |           bio: "Milia Wu thinks all of her projects are special, especially the one in which she actively interacts with people in local makerspaces, and talks to the community about taking advantage of these spaces. Her ultimate goal is to help more women and seniors get involved.",
200 |         },
201 |       },
202 |     ],
203 |   },
204 |   {
205 |     name: "Virtual and Augmented Reality",
206 |     id: "virtual-and-augmented-reality",
207 |     sessions: [
208 |       {
209 |         name: "Augmented Real(ity) Estate",
210 |         id: "ar-estate",
211 |         desc: "Imagine if your company is moving you to a state too far away to spend time looking for a new place to live. Wouldn't it be nice to be able to meet an agent, walk through a house, open doors, go up steps, and check out the neighborhood from the comfort of your couch? Check out the latest innovations in augmented reality in the real estate market, and discuss its economic benefits.",
212 |         speaker: {
213 |           name: "Grant Jacobson",
214 |           title: "Owner",
215 |           org: "Grant Creative Solutions",
216 |           bio: "Grant Jacobson has been creating virtual walkthroughs for real estate clients for years, so it only makes sense for him to become an augmented reality go-to creative. About 40 percent of his clients use Grant's proprietary augmented reality services.",
217 |         },
218 |       },
219 |       {
220 |         name: "VR in Town and City Planning",
221 |         id: "vr-town-and-city-planning",
222 |         desc: "The City of Orange Valley is one of the first in the state to embrace the use of VR in its town planning. Panelists share examples of zoning request mockups, a proposed development, and other infrastructure proposals and plans that help both citizens and developers envision and edit prior to implementation.",
223 |         speaker: {
224 |           name: "Victor Gonzalez",
225 |           title: "Wastewater Management Specialist",
226 |           org: "Leaf & Mortar",
227 |           bio: "Victor Gonzalez has worked tirelessly in helping organizations design and model systems that bring normally 'hidden' infrastructures—such as the wastewater management systems he designs and implements—to life using virtual reality.",
228 |         },
229 |       },
230 |     ],
231 |   },
232 | ];
233 | 
234 | export function getSession({ sessionId, catId }) {
235 |   return categories
236 |     .find(({ id }) => id === catId)
237 |     .sessions.find(({ id }) => id === sessionId);
238 | }
239 | 
240 | export function getCategory(catId) {
241 |   return categories.find(({ id }) => id === catId);
242 | }
243 | 
244 | export function getCategories() {
245 |   return categories.map(({ name, id }) => ({ name, id }));
246 | }
247 | 


--------------------------------------------------------------------------------