diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..edddc1a
Binary files /dev/null and b/.DS_Store differ
diff --git a/class-01/.DS_Store b/class-01/.DS_Store
new file mode 100644
index 0000000..c35d41c
Binary files /dev/null and b/class-01/.DS_Store differ
diff --git a/class-01/DISCUSSION.md b/class-01/DISCUSSION.md
new file mode 100644
index 0000000..a2fc251
--- /dev/null
+++ b/class-01/DISCUSSION.md
@@ -0,0 +1,35 @@
+# Readings: Introduction to React and Components
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[Component-Based Architecture](https://www.tutorialspoint.com/software_architecture_design/component_based_architecture.htm)
+
+  1. What is a "component"?
+  2. What are the characteristics of a component?
+  3. What are the advantages of using component-based architecture?
+
+[What is Props and How to Use it in React](https://itnext.io/what-is-props-and-how-to-use-it-in-react-da307f500da0#:~:text=%E2%80%9CProps%E2%80%9D%20is%20a%20special%20keyword,way%20from%20parent%20to%20child)
+
+  1. What is "props" short for?
+  1. How are props used in React?
+  1. What is the flow of props?
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+## Bookmark and Review
+
+- [React Tutorial through 'Passing Data Through Props'](https://reactjs.org/tutorial/tutorial.html){:target="_blank"}
+- [React Docs - Hello world](https://reactjs.org/docs/hello-world.html){:target="_blank"}
+- [React Docs - Introducing JSX](https://reactjs.org/docs/introducing-jsx.html){:target="_blank"}
+- [React Docs - Rendering elements](https://reactjs.org/docs/rendering-elements.html){:target="_blank"}
+- [React Docs - Components and props](https://reactjs.org/docs/components-and-props.html){:target="_blank"}
diff --git a/class-01/README.md b/class-01/README.md
new file mode 100644
index 0000000..7193396
--- /dev/null
+++ b/class-01/README.md
@@ -0,0 +1,108 @@
+# React and Component-Based Architecture
+
+## Overview
+
+Today we will be covering some new topics and reviewing concepts you should already be familiar with.
+
+We will spend some time reviewing the concepts from the prework. We will also discuss several new topics: `create-react-app` and component-based architecture.
+
+## Class Outline
+
+- Overview of 301
+- Review of prework
+- Discussion of `create-react-app`
+- Discussion of component-based architecture
+- Introduction to code challenges
+- Introduction of code challenge topic
+- Lab prep
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- Component-based architecture
+- React
+- `create-react-app`
+- JavaScript classes
+- Arrow functions
+- Gain an understanding of scope with arrow functions
+- Gain an understanding of context, scope, "this", and the "new" keyword
+- Gain an understanding of the core concepts of React and how to create a basic React application
+- Understand component-based architecture and be able to build a simple component-based React application
+
+#### Execute
+
+- Be able to create a basic React application using `create-react-app`
+
+## Notes
+
+1. What is React?
+1. What are components?
+1. What is the difference between an arrow function and a function declaration?
+1. Turning a function declaration into an arrow function:
+
+   ```javascript
+   function doSomething(name) {
+     // Do something
+   }
+
+   doSomething = (name) => {
+     // Do something
+   }
+
+   // Or make it a one liner!
+   doSomething = (name) => // Do something small
+   ```
+
+1. Difference between a constructor function and a class:
+
+   ```javascript
+   // constructor
+   function Cat(name) {
+     this.name = name;
+     this.fluffy = true;
+   }
+
+   Cat.prototype.speak = function(){
+     console.log(`${this.name} says meow`);
+   }
+
+   // to make a new instance
+   const bob = new Cat('Bob');
+   bob.speak();
+
+   // class
+   class Cat {
+     constructor(name) {
+       this.name = name;
+       this.fluffy = true;
+     }
+
+     speak = () => console.log(`${this.name} says meow`);
+   }
+
+   // to make a new instance
+   const bob = new Cat('bob');
+   bob.speak();
+   ```
+
+1. Basic React Component Structure:
+
+   ```javascript
+   import React from 'react';
+
+   class Something extends React.Component {
+     render() {
+       return(
+          <section>
+            <h1>Header for Something</h1>
+            <p>Text that is all about Something.<p>
+          </section>
+       )
+     }
+   }
+
+   export default Something
+   ```
diff --git a/class-01/lab/README.md b/class-01/lab/README.md
new file mode 100644
index 0000000..e571877
--- /dev/null
+++ b/class-01/lab/README.md
@@ -0,0 +1,79 @@
+# Overview
+
+By the end of this week, you will create an application that displays images and information of horned animals. This application will allow you to filter the images by number of horns and chose your favorite image.
+
+Today we will just be focusing on the component structure of the application. You will create a new React application using `create-react-app` and fill it with components. Refer to 'Feature Tasks' to see exactly which components to build and where to display them.
+
+## Resources
+
+- [React Official Documentation](https://reactjs.org/docs/getting-started.html){:target="_blank"}
+
+## Configuration
+
+_Your repository must include the following config files:_
+
+- `README.md` - provided by create-react-app, but edited by you to include an overview of the project for a new visitor to your repo.  Name all collaborartors
+- `.gitignore` - provided by create-react-app
+
+## Feature Tasks
+
+- Complete the following steps to setup your repository:
+  1. Create a React application using `create-react-app` as demonstrated in class.
+      - Use the command `npx create-react-app <repo-name>`.
+  1. Create a new repository on GitHub WITHOUT a README.md. We will import an "existing" repository with its own README
+  1. Follow the instructions given by GitHub to "push an existing repository from the command line"
+      - be sure to select HTTPS or SSH, whichever is relevant for you
+  1. Create a Branch and begin your work.  As always, ACP often
+
+- Your `App` component should render a `Header`, `Footer` and `Main` component, each of which is defined in their own files.
+
+- Your `Header` component needs to have an `<h1>` with a title.
+
+- Your `Footer` component needs to contain your name as the author.
+
+- The `Main` component needs to render at least two copies of a component called `HornedBeast`.
+
+- The `Main` component needs to pass `title`, `imageUrl`, and `description` into each `HornedBeast` component. For the purpose of today's lab, you can pass whatever title, url and description that you want into each `HornedBeast` commponent.
+
+- The `HornedBeast` component needs to contain an `<h2>` that displays the title of the animal, an `<img>` element with `src`, `alt` and `title` attributes, and a `<p>` that displays the description.
+
+### NOTE: Rendering an image in React is a little tricky. Try to figure out how to do this on your own and we will go over it in the next code review
+
+## Stretch Goal
+
+- Given the following array, loop over the data to display three `HornedBeast` components:
+
+```js
+[{
+    "_id": 1,
+    "image_url": "http://3.bp.blogspot.com/_DBYF1AdFaHw/TE-f0cDQ24I/AAAAAAAACZg/l-FdTZ6M7z8/s1600/Unicorn_and_Narwhal_by_dinglehopper.jpg",
+    "title": "UniWhal",
+    "description": "A unicorn and a narwhal nuzzling their horns",
+    "keyword": "narwhal",
+    "horns": 1
+  },
+
+  {
+    "_id": 2,
+    "image_url": "https://images.unsplash.com/photo-1512636618879-bbe79107e9e3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd9460ee6d1ddbb6b1ca7be86dfc4590&auto=format&fit=crop&w=1825&q=80",
+    "title": "Rhino Family",
+    "description": "Parent rhino with two babies",
+    "keyword": "rhino",
+    "horns": 2
+  },
+
+  {
+    "_id": 3,
+    "image_url": "https://www.dhresource.com/0x0s/f2-albu-g5-M00-1A-11-rBVaI1hsIIiALxKzAAIHjSU3VkE490.jpg/wholesale-halloween-costume-prop-unicorn.jpg",
+    "title": "Unicorn Head",
+    "description": "Someone wearing a very silly unicorn head mask",
+    "keyword": "unicorn",
+    "horns": 1
+}]
+```
+
+## Submission Instructions
+
+- Complete your Feature Tasks for the day.
+- Create a Pull Request (PR) back to the `main` branch of your repository.
+- Submit your assignment as a link to your PR, and a comment describing how much time you spent on the lab.
diff --git a/class-02/.DS_Store b/class-02/.DS_Store
new file mode 100644
index 0000000..60dce63
Binary files /dev/null and b/class-02/.DS_Store differ
diff --git a/class-02/DISCUSSION.md b/class-02/DISCUSSION.md
new file mode 100644
index 0000000..5fecdeb
--- /dev/null
+++ b/class-02/DISCUSSION.md
@@ -0,0 +1,33 @@
+# Readings: State and Props
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[React lifecycle](https://medium.com/@joshuablankenshipnola/react-component-lifecycle-events-cb77e670a093){:target="_blank"}
+
+1. Based off the diagram, what happens first, the 'render' or the 'componentDidMount'?
+1. What is the very first thing to happen in the lifecycle of React?
+1. Put the following things in the order that they happen: `componentDidMount`, `render`, `constructor`, `componentWillUnmount`, `React Updates`
+1. What does `componentDidMount` do?
+
+## Videos
+
+[React State Vs Props](https://www.youtube.com/watch?v=IYvD9oBCuJI)
+
+1. What types of things can you pass in the props?
+1. What is the big difference between props and state?
+1. When do we re-render our application?
+1. What are some examples of things that we could store in state?
+
+## Bookmark and Review
+
+- [React Docs - State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html){:target="_blank"}
+- [React Docs - handling events](https://reactjs.org/docs/handling-events.html){:target="_blank"}
+- [React Tutorial through 'Developer Tools'](https://reactjs.org/tutorial/tutorial.html){:target="_blank"}
+- [React Bootstrap Documentation](https://react-bootstrap.github.io/){:target="_blank"}
+- [Boootstrap Cheatsheet](https://getbootstrap.com/docs/5.0/examples/cheatsheet/){:target="_blank"}
+- [Bootstrap Shuffle - a class "sandbox"](https://bootstrapshuffle.com/classes){:target="_blank"}
+- [Netlify](https://www.netlify.com/){:target="_blank"}
diff --git a/class-02/README.md b/class-02/README.md
new file mode 100644
index 0000000..0afb46c
--- /dev/null
+++ b/class-02/README.md
@@ -0,0 +1,94 @@
+# State and Props
+
+## Overview
+
+Today's class will focus on passing information as `props` from a parent component into a child component. We will also cover the concept of `state` and how individual components can hold state.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- Code Demo
+- Bootstrap
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- State
+- Props
+- React-Bootstrap
+- Netlify
+- setState
+
+#### Execute
+
+- Understand and define the concepts of `props` and `state` as they relate to React Components
+- Pass both static and dynamic information from a parent component into a child component using `props`
+- Hold information as `state` in different components
+- Create responsive web pages suitable for desktop or mobile web browsers
+- Integrate a 3rd party component library into a React application
+- Deploy to Netlify
+
+## Notes
+
+1. What is state?
+
+1. What are props?
+
+1. To Update State: `this.setState({ thingInState: thingToUpdate })`
+
+1. To send something in props to a child component: `<ChildComponent bananas='randomString' />`
+
+1. To access that variable in the props from the child component: `this.props.bananas`
+
+1. Information flows in one direction. That direction is ______________.
+
+1. What is Bootstrap?
+
+1. What are different things that I can customize using Bootstrap?
+
+1. How does Bootstrap use classes for customization?
+
+1. Holding state in a parent component and sending it into a child component:
+
+  ```javaScript
+  import React from 'react';
+  import Child from './path-to-Child-component';
+
+  class Parent extends React.Component {
+    constructor(props);
+    this.state={
+      name: 'sue',
+      childName: 'bob'
+    }
+
+    render() {
+      return (
+        <>
+          <p>My name is {this.state.name}</p>
+          <Child kidsName={this.state.childName}>
+        </>
+      )
+    }
+  }
+
+  export default Parent
+  
+  import React from 'react';
+
+  class Child extends React.Component {
+    render() {
+      return(
+        <p>My name is {this.props.kidsName}</p>
+      )
+    }
+  }
+
+  export default Child
+  ```
diff --git a/class-02/lab/README.md b/class-02/lab/README.md
new file mode 100644
index 0000000..de633b8
--- /dev/null
+++ b/class-02/lab/README.md
@@ -0,0 +1,102 @@
+# React State and Props
+
+## Overview
+
+By the end of this week, you will create an application that displays images and information of horned animals. This application will allow you to filter the images by number of horns and chose your favorite image.
+
+Today, your goal is to use the JSON file provided to display the title, image and description of each horned beast in your application.
+
+## Resources
+
+- [data.json](./assets/data.json){:target="_blank"}
+
+### Time Estimate
+
+For each of the features listed below, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```md
+Number and name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+### Feature #1: Display images
+
+#### Why are we implementing this feature?
+
+- As a user, I want to view the images on the page so that I can browse the photo collection.
+
+#### What are we going to implement?
+
+Given that a user opens the application in the browser
+When the user navigates to the home page
+Then the photo gallery should display all of the images in the gallery
+
+#### How are we implementing it?
+
+- The `Main` component should pass props for the title, image and description to each `HornedBeast` component. You will find this information in the provided JSON file.
+
+### Feature #2: Allow users to vote for their favorite beast
+
+#### Why are we implementing this feature?
+
+- As a user, I want to be able to interact with the site and pick my favorite beast.
+
+#### What are we going to implement?
+
+Given that a user clicks on an image, the number of "favorites" displayed on that image will increase by one.
+
+#### How are we implementing it?
+
+- Create state inside of the `HornedBeast` component that keeps track of the number of times an image was clicked.
+
+- Put a heart in each horned beast with the number of times it was "favorited" next to it.
+
+### Feature 3: Bootstrap
+
+#### Why are we implementing this feature?
+
+- As a user, I want to see a visually pleasing application that is also reponsive when I view this application on different screen sizes.
+
+#### What are we going to implement?
+
+Given that a user opens the application in the browser
+When the images are displayed on the screen
+Then each image should be rendered in a visually pleasing way
+The images should be displayed in columns, as screen width allows
+
+#### How are we implementing it?
+
+- Bring in the `react-bootstrap` library and use it to style your application making sure that it is responsive.
+
+### Stretch Goal: Add Interaction
+
+#### Why are we implementing this feature?
+
+- As a user, I want to be able to interact with each item on the page.
+
+#### What are we going to implement?
+
+Given that a user clicks on an item other than the horned beasts, such as the title of the page or the footer, the information and styles should change.
+
+#### How are we implementing it?
+
+- When the user clicks on elements such as the header, footer or title of page, make something change using state.
+- You can update the words, change the styles or add something new. Be creative.
+
+## Submission Instructions
+
+- Complete your Feature Tasks for the day
+- Create a Pull Request (PR) back to the `main` branch of your repository
+- On Canvas, submit a link to your PR and a link to your deployed application on Netlify. Add a comment in your Canvas assignment which includes the following:
+  - A question within the context of today's lab assignment
+  - An observation about the lab assignment, or related 'Ah-hah!' moment
+  - How long you spent working on this assignment
diff --git a/class-02/lab/assets/data.json b/class-02/lab/assets/data.json
new file mode 100644
index 0000000..bd55a46
--- /dev/null
+++ b/class-02/lab/assets/data.json
@@ -0,0 +1,162 @@
+[
+  {
+    "_id": 1,
+    "image_url": "http://3.bp.blogspot.com/_DBYF1AdFaHw/TE-f0cDQ24I/AAAAAAAACZg/l-FdTZ6M7z8/s1600/Unicorn_and_Narwhal_by_dinglehopper.jpg",
+    "title": "UniWhal",
+    "description": "A unicorn and a narwhal nuzzling their horns",
+    "keyword": "narwhal",
+    "horns": 1
+  },
+  {
+    "_id": 2,
+    "image_url": "https://images.unsplash.com/photo-1512636618879-bbe79107e9e3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd9460ee6d1ddbb6b1ca7be86dfc4590&auto=format&fit=crop&w=1825&q=80",
+    "title": "Rhino Family",
+    "description": "Mother (or father) rhino with two babies",
+    "keyword": "rhino",
+    "horns": 2
+  },
+  {
+    "_id": 3,
+    "image_url": "https://www.dhresource.com/0x0s/f2-albu-g5-M00-1A-11-rBVaI1hsIIiALxKzAAIHjSU3VkE490.jpg/wholesale-halloween-costume-prop-unicorn.jpg",
+    "title": "Unicorn Head",
+    "description": "Someone wearing a creepy unicorn head mask",
+    "keyword": "unicorn",
+    "horns": 1
+  },
+  {
+    "_id": 4,
+    "image_url": "https://images.unsplash.com/photo-1518946222227-364f22132616?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4836a6fca62e7dce9324346bacfde085&auto=format&fit=crop&w=2534&q=80",
+    "title": "UniLego",
+    "description": "Lego figurine dressed in a unicorn outfit",
+    "keyword": "unilego",
+    "horns": 1
+  },
+  {
+    "_id": 5,
+    "image_url": "https://i.pinimg.com/736x/b4/61/06/b46106830b841017ea59870b27ec18dc--narwhals-a-unicorn.jpg",
+    "title": "Basically a unicorn",
+    "description": "A narwhal is basically a unicorn after all, right?",
+    "keyword": "narwhal",
+    "horns": 1
+  },
+  {
+    "_id": 6,
+    "image_url": "https://i.pinimg.com/originals/16/cf/2a/16cf2a0b3fd51b9bee08bb6296193b75.jpg",
+    "title": "#truth",
+    "description": "The truth behind narwhals",
+    "keyword": "narwhal",
+    "horns": 1
+  },
+  {
+    "_id": 7,
+    "image_url": "https://secure.img1-ag.wfcdn.com/im/17007094/resize-h800%5Ecompr-r85/3589/35892451/Baby+Rhino+Figurine.jpg",
+    "title": "Baby Rhino",
+    "description": "This is actually a figurine but it looks kinda real",
+    "keyword": "rhino",
+    "horns": 2
+  },
+  {
+    "_id": 8,
+    "image_url": "https://vignette.wikia.nocookie.net/landbeforetime/images/c/c3/Cera_infobox.png/revision/latest?cb=20180422005003",
+    "title": "Cera",
+    "description": "Three horns but still, horns. And who doesn't like The Land Before Time?",
+    "keyword": "triceratops",
+    "horns": 3
+  },
+  {
+    "_id": 9,
+    "image_url": "https://ae01.alicdn.com/kf/HTB18GwSQVXXXXaZaXXXq6xXFXXXh/Animal-Cosplay-Costume-Narwhal-Onesie-Mens-Womens-Cartoon-Whale-Pajamas.jpg",
+    "title": "Narwhal costume",
+    "description": "A woman wearing a blue narwhal costume",
+    "keyword": "narwhal",
+    "horns": 1
+  },
+  {
+    "_id": 10,
+    "image_url": "https://www.shopmascot.com/image/cache/mascotnew/new196-800x800.jpg",
+    "title": "Rhino costume",
+    "description": "Mascots have to get their costumes somewhere",
+    "keyword": "rhino",
+    "horns": 2
+  },
+  {
+    "_id": 11,
+    "image_url": "https://www.tinselbox.com/wp-content/uploads/2018/03/I-BELIEVE-IN-UNICORNS-FREE-PRINTABLE-WATERCOLOR-7-of-1.jpg",
+    "title": "Believe",
+    "description": "I believe in unicorns, do you?",
+    "keyword": "unicorn",
+    "horns": 1
+  },
+  {
+    "_id": 12,
+    "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Markhor_Schraubenziege_Capra_falconeri_Zoo_Augsburg-02.jpg/220px-Markhor_Schraubenziege_Capra_falconeri_Zoo_Augsburg-02.jpg",
+    "title": "Markhor",
+    "description": "These wild goats eat snakes, then secrete a foam that locals fight over for the antivemon properties -- how cool is that?",
+    "keyword": "markhor",
+    "horns": 2
+  },
+  {
+    "_id": 13,
+    "image_url": "http://www.zooborns.com/.a/6a010535647bf3970b0223c84d5959200c-800wi",
+    "title": "Baby markhor",
+    "description": "Even the babies are adorable",
+    "keyword": "markhor",
+    "horns": 2
+  },
+  {
+    "_id": 14,
+    "image_url": "https://images.unsplash.com/photo-1558560063-931ca9822a0c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
+    "title": "Mouflon",
+    "description": "Those horns though",
+    "keyword": "mouflon",
+    "horns": 2
+  },
+  {
+    "_id": 15,
+    "image_url": "https://images.unsplash.com/photo-1556890077-020ec300d5db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
+    "title": "Addax",
+    "description": "This guy is basically extinct but survives well in captivity, so they're frequently found in zoos",
+    "keyword": "addax",
+    "horns": 2
+  },
+  {
+    "_id": 16,
+    "image_url": "https://cbsnews3.cbsistatic.com/hub/i/r/2013/03/05/5b414225-a645-11e2-a3f0-029118418759/thumbnail/620x350/2d4cf24685b45c22912e64d2004fec8d/Baby_Mouflon_Wild_Sheep.jpg",
+    "title": "Baby mouflon",
+    "description": "The cuteness that is a baby mouflon asleep",
+    "keyword": "mouflon",
+    "horns": 2
+  },
+  {
+    "_id": 17,
+    "image_url": "https://images.unsplash.com/photo-1514036783265-fba9577fc473?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
+    "title": "Happy Jackson's Chameleon",
+    "description": "These are really common in Hawaii",
+    "keyword": "chameleon",
+    "horns": 2
+  },
+  {
+    "_id": 18,
+    "image_url": "https://imgc.allpostersimages.com/img/print/posters/dlillc-jackson-s-chameleon_a-G-13448768-14258384.jpg",
+    "title": "Serious Jackson's Chameleon",
+    "description": "This one is very serious.",
+    "keyword": "chameleon",
+    "horns": 3
+  },
+  {
+    "_id": 19,
+    "image_url": "https://www.nps.gov/band/learn/nature/images/short-horned-lizard-open-mouth-18.jpg?maxwidth=650&autorotate=false",
+    "title": "Horned Lizard",
+    "description": "Fave food: ants",
+    "keyword": "lizard",
+    "horns": 100
+  },
+  {
+    "_id": 20,
+    "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Smaug_par_David_Demaret.jpg/290px-Smaug_par_David_Demaret.jpg",
+    "title": "Smaug",
+    "description": "Fan illustration of Smaug from 'The Hobbit'",
+    "keyword": "dragon",
+    "horns": 100
+  }
+]
diff --git a/class-03/.DS_Store b/class-03/.DS_Store
new file mode 100644
index 0000000..be061cd
Binary files /dev/null and b/class-03/.DS_Store differ
diff --git a/class-03/DISCUSSION.md b/class-03/DISCUSSION.md
new file mode 100644
index 0000000..9c4db69
--- /dev/null
+++ b/class-03/DISCUSSION.md
@@ -0,0 +1,40 @@
+# Readings: Passing Functions as Props
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[React Docs - lists and keys](https://reactjs.org/docs/lists-and-keys.html){:target="_blank"}
+
+1. What does .map() return?
+1. If I want to loop through an array and display each value in JSX, how do I do that in React?
+1. Each list item needs a unique __________.
+1. What is the purpose of a key?
+
+[The Spread Operator](https://medium.com/coding-at-dawn/how-to-use-the-spread-operator-in-javascript-b9e4a8b06fab){:target="_blank"}
+
+1. What is the spread operator?
+1. List 4 things that the spread operator can do.
+1. Give an example of using the spread operator to combine two arrays.
+1. Give an example of using the spread operator to add a new item to an array.
+1. Give an example of using the spread operator to combine two objects into one.
+
+<!-- ## Additional Resources
+
+PLACEHOLDER -->
+
+## Videos
+
+[How to Pass Functions Between Components](https://www.youtube.com/watch?v=c05OL7XbwXU)
+
+  1. In the video, what is the first step that the developer does to pass functions between components?
+  1. In your own words, what does the `increment` function do?
+  1. How can you pass a method from a parent component into a child component?
+  1. How does the child component invoke a method that was passed to it from a parent component?
+
+## Bookmark and Review
+
+- [React Tutorial through 'Declaring a Winner'](https://reactjs.org/tutorial/tutorial.html){:target="_blank"}
+- [React Docs - Lifting State Up](https://reactjs.org/docs/lifting-state-up.html){:target="_blank"}{:target="_blank"}
diff --git a/class-03/README.md b/class-03/README.md
new file mode 100644
index 0000000..e92a244
--- /dev/null
+++ b/class-03/README.md
@@ -0,0 +1,89 @@
+# Passing Functions as Props
+
+## Overview
+
+Yesterday, you learned how to pass information from a parent component into a child component through `props`. Today, we are going to pass functions through the `props` as well. We are also going to display a nested component using `.map` rather than hard-coding each one individually.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- Parent Component
+- Child Component
+- Spread Operator
+
+#### Execute
+
+- Be able to pass functions from a parent component to a child component
+- Understand the spread operator
+- Understand `.map` and how to use it to render data in a React application
+
+## Notes
+
+1. How can a child component update the state of a parent component?
+
+1. How does a parent component send a function into a child component?
+
+1. Using React-Bootstrap, how do you determine if a modal is open or closed?
+
+1. Allowing the child component to update the state in the parent component:
+
+  - Step 1. send a function into the child component that updates the state in the parent component
+  
+  ```javaScript
+  class Parent extends React.Component {
+    constructor(props){
+      super(props);
+      this.state = {
+        name: 'bob'
+      }
+    }
+
+    updateName = (newName) => this.setState({ name: newName });
+
+    render(){
+      return(
+        <Child updateName={this.updateName}>
+      )
+    }
+  }
+  ```
+
+  - Step 2. invoke that function from the props in the child component
+  ```javaScript
+  class Child extends React.Component {
+    constructor(props){
+      super(props);
+      this.state={
+        newName:''
+      }
+    }
+
+    // this function calls the function that the parent component send us with the new name as an argument
+    updateChildName = () => this.props.updateName(this.state.newName);
+
+    render(){
+      return(
+        <>
+          <form onSubmit={this.updateChildName}>
+            <label>What is your new name?</label>
+            <input onChange={() => this.setState({ newName: e.target.value })} />
+          </form>
+        </>
+      )
+    }
+  }
+  ```
+
+  - Step 3. The invoked function from the child component will update the name in the parent component and tada! Your child component has essientially changed the state of your parent component.
\ No newline at end of file
diff --git a/class-03/lab/README.md b/class-03/lab/README.md
new file mode 100644
index 0000000..5f648b1
--- /dev/null
+++ b/class-03/lab/README.md
@@ -0,0 +1,72 @@
+# Passing Functions in Props
+
+## Resources
+
+### Overview
+
+Today you will be adding a feature to your `Gallery Of Horns` that allows the user to click on an image and display it as a modal.
+
+### Time Estimate
+
+For each of the features listed below, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```md
+Number and name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+### Feature #1: Display a Modal
+
+#### Why are we implementing this feature?
+
+- As a user, I want the image to be displayed in a larger size and with the description shown so that I can view the details of a single image.
+
+#### What are we going to implement?
+
+Given that a user wants to view the details of the image  
+When the user clicks on an individual image  
+Then the image should render larger on the screen with the description displayed
+
+#### How are we implementing it?
+
+- Import the `data.json` file into your `App` component and send that data into the `Main` component
+- Map over the JSON data in your `Main` component to render each beast
+- Send a function into your `Main` component that allows the user to update state in the `App`
+- Create a `SelectedBeast` component and include it in your `App`
+- Use the state in the `App` to render an individual beast in a Modal in the `SelectedBeast` component using React Bootstrap
+
+## Stretch Goal: Fuzzy search
+
+#### Why are we implementing this feature?
+
+- As a user, I want the ability to search my images so that I can view only the images containing specific titles or keywords.
+
+#### What are we going to implement?
+
+Given that a user wants to view specific images  
+When the user enters a character into the search field  
+Then only the images matching the current set of characters should be displayed on the screen
+
+#### How are we implementing it?
+
+- Create an input element to allow users to search for an image. It is up to you to decide if the user should be able to search by title, keyword, or both.
+- Write a regular expression pattern to create a fuzzy search so that the results are narrowed down and displayed every time the user enters or removes a character from the input.
+
+## Submission Instructions
+
+- Complete your Feature Tasks for the day
+- Create a Pull Request (PR) back to the `main` branch of your repository
+- On Canvas, submit a link to your PR and a link to your deployed application on Netlify. 
+- Add a comment in your Canvas assignment which includes the following:
+  - A question within the context of today's lab assignment
+  - An observation about the lab assignment, or related 'Ah-hah!' moment
+  - How long you spent working on this assignment
diff --git a/class-03/lab/starter-code/data.json b/class-03/lab/starter-code/data.json
new file mode 100644
index 0000000..ea3d74f
--- /dev/null
+++ b/class-03/lab/starter-code/data.json
@@ -0,0 +1,142 @@
+[
+  {
+    "image_url": "http://3.bp.blogspot.com/_DBYF1AdFaHw/TE-f0cDQ24I/AAAAAAAACZg/l-FdTZ6M7z8/s1600/Unicorn_and_Narwhal_by_dinglehopper.jpg",
+    "title": "UniWhal",
+    "description": "A unicorn and a narwhal nuzzling their horns",
+    "keyword": "narwhal",
+    "horns": 1
+  },
+  {
+    "image_url": "https://images.unsplash.com/photo-1512636618879-bbe79107e9e3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd9460ee6d1ddbb6b1ca7be86dfc4590&auto=format&fit=crop&w=1825&q=80",
+    "title": "Rhino Family",
+    "description": "Mother (or father) rhino with two babies",
+    "keyword": "rhino",
+    "horns": 2
+  },
+  {
+    "image_url": "https://www.dhresource.com/0x0s/f2-albu-g5-M00-1A-11-rBVaI1hsIIiALxKzAAIHjSU3VkE490.jpg/wholesale-halloween-costume-prop-unicorn.jpg",
+    "title": "Unicorn Head",
+    "description": "Someone wearing a creepy unicorn head mask",
+    "keyword": "unicorn", 
+    "horns": 1
+  },
+  {
+    "image_url": "https://images.unsplash.com/photo-1518946222227-364f22132616?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4836a6fca62e7dce9324346bacfde085&auto=format&fit=crop&w=2534&q=80",
+    "title": "UniLego",
+    "description": "Lego figurine dressed in a unicorn outfit",
+    "keyword": "unilego",
+    "horns": 1
+  },
+  {
+    "image_url": "https://i.pinimg.com/736x/b4/61/06/b46106830b841017ea59870b27ec18dc--narwhals-a-unicorn.jpg",
+    "title": "Basically a unicorn",
+    "description": "A narwhal is basically a unicorn after all, right?",
+    "keyword": "narwhal",
+    "horns": 1
+  },
+  {
+    "image_url": "https://i.pinimg.com/originals/16/cf/2a/16cf2a0b3fd51b9bee08bb6296193b75.jpg",
+    "title": "#truth",
+    "description": "The truth behind narwhals",
+    "keyword": "narwhal",
+    "horns": 1
+  },
+  {
+    "image_url": "https://secure.img1-ag.wfcdn.com/im/17007094/resize-h800%5Ecompr-r85/3589/35892451/Baby+Rhino+Figurine.jpg",
+    "title": "Baby Rhino",
+    "description": "This is actually a figurine but it looks kinda real",
+    "keyword": "rhino",
+    "horns": 2
+  },
+  {
+    "image_url": "https://vignette.wikia.nocookie.net/landbeforetime/images/c/c3/Cera_infobox.png/revision/latest?cb=20180422005003",
+    "title": "Cera",
+    "description": "Three horns but still, horns. And who doesn't like The Land Before Time?",
+    "keyword": "triceratops",
+    "horns": 3
+  },
+  {
+    "image_url": "https://ae01.alicdn.com/kf/HTB18GwSQVXXXXaZaXXXq6xXFXXXh/Animal-Cosplay-Costume-Narwhal-Onesie-Mens-Womens-Cartoon-Whale-Pajamas.jpg",
+    "title": "Narwhal costume",
+    "description": "A woman wearing a blue narwhal costume",
+    "keyword": "narwhal",
+    "horns": 1
+  },
+  {
+    "image_url": "https://www.shopmascot.com/image/cache/mascotnew/new196-800x800.jpg",
+    "title": "Rhino costume",
+    "description": "Mascots have to get their costumes somewhere",
+    "keyword": "rhino",
+    "horns": 2
+  },
+  {
+    "image_url": "https://www.tinselbox.com/wp-content/uploads/2018/03/I-BELIEVE-IN-UNICORNS-FREE-PRINTABLE-WATERCOLOR-7-of-1.jpg",
+    "title": "Believe",
+    "description": "I believe in unicorns, do you?",
+    "keyword": "unicorn",
+    "horns": 1
+  },
+  {
+    "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Markhor_Schraubenziege_Capra_falconeri_Zoo_Augsburg-02.jpg/220px-Markhor_Schraubenziege_Capra_falconeri_Zoo_Augsburg-02.jpg",
+    "title": "Markhor",
+    "description": "These wild goats eat snakes, then secrete a foam that locals fight over for the antivemon properties -- how cool is that?",
+    "keyword": "markhor",
+    "horns": 2
+  },
+  {
+    "image_url": "http://www.zooborns.com/.a/6a010535647bf3970b0223c84d5959200c-800wi",
+    "title": "Baby markhor",
+    "description": "Even the babies are adorable",
+    "keyword": "markhor",
+    "horns": 2
+  },
+  {
+    "image_url": "https://images.unsplash.com/photo-1558560063-931ca9822a0c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
+    "title": "Mouflon",
+    "description": "Those horns though",
+    "keyword": "mouflon",
+    "horns": 2
+  },
+  {
+    "image_url": "https://images.unsplash.com/photo-1556890077-020ec300d5db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
+    "title": "Addax",
+    "description": "This guy is basically extinct but survives well in captivity, so they're frequently found in zoos",
+    "keyword": "addax",
+    "horns": 2
+  },
+  {
+    "image_url": "https://cbsnews3.cbsistatic.com/hub/i/r/2013/03/05/5b414225-a645-11e2-a3f0-029118418759/thumbnail/620x350/2d4cf24685b45c22912e64d2004fec8d/Baby_Mouflon_Wild_Sheep.jpg",
+    "title": "Baby mouflon",
+    "description": "The cuteness that is a baby mouflon asleep",
+    "keyword": "mouflon",
+    "horns": 2
+  },
+  {
+    "image_url": "https://images.unsplash.com/photo-1514036783265-fba9577fc473?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
+    "title": "Happy Jackson's Chameleon",
+    "description": "These are really common in Hawaii",
+    "keyword": "chameleon",
+    "horns": 2
+  },
+  {
+    "image_url": "https://imgc.allpostersimages.com/img/print/posters/dlillc-jackson-s-chameleon_a-G-13448768-14258384.jpg",
+    "title": "Serious Jackson's Chameleon",
+    "description": "This one is very serious.",
+    "keyword": "chameleon",
+    "horns": 3
+  },
+  {
+    "image_url": "https://www.nps.gov/band/learn/nature/images/short-horned-lizard-open-mouth-18.jpg?maxwidth=650&autorotate=false",
+    "title": "Horned Lizard",
+    "description": "Fave food: ants",
+    "keyword": "lizard",
+    "horns": 100
+  },
+  {
+    "image_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Smaug_par_David_Demaret.jpg/290px-Smaug_par_David_Demaret.jpg",
+    "title": "Smaug",
+    "description": "Fan illustration of Smaug from 'The Hobbit'",
+    "keyword": "dragon",
+    "horns": 100
+  }
+]
diff --git a/class-04/.DS_Store b/class-04/.DS_Store
new file mode 100644
index 0000000..823e2e0
Binary files /dev/null and b/class-04/.DS_Store differ
diff --git a/class-04/DISCUSSION.md b/class-04/DISCUSSION.md
new file mode 100644
index 0000000..30f10fb
--- /dev/null
+++ b/class-04/DISCUSSION.md
@@ -0,0 +1,31 @@
+# Readings: React and Forms
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[React Docs - Forms](https://reactjs.org/docs/forms.html){:target="_blank"}
+
+  1. What is a 'Controlled Component'?
+  1. Should we wait to store the users responses from the form into state when they submit the form OR should we update the state with their responses as soon as they enter them? Why.
+  1. How do we target what the user is entering if we have an event handler on an input field?
+
+[The Conditional (Ternary) Operator Explained](https://codeburst.io/javascript-the-conditional-ternary-operator-explained-cac7218beeff)
+
+  1. Why would we use a ternary operator?
+  1. Rewrite the following statement using a ternary statement:
+
+     ```javascript
+     if(x===y){
+       console.log(true);
+     } else {
+       console.log(false);
+     }
+     ```
+
+## Bookmark and Review
+
+- [React Bootstrap - Forms](https://react-bootstrap.github.io/forms/overview/){:target="_blank"}
+- [React Docs - conditional rendering](https://reactjs.org/docs/conditional-rendering.html){:target="_blank"}
diff --git a/class-04/README.md b/class-04/README.md
new file mode 100644
index 0000000..bc6433e
--- /dev/null
+++ b/class-04/README.md
@@ -0,0 +1,38 @@
+# React and Forms
+
+## Overview
+
+Today we will cover how React handles `forms` and the asynchronous nature of setting state.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic, `.sort()`
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- Event
+- Forms
+- Event Listeners
+- Event Handlers
+- event.target
+
+#### Execute
+
+- Understand how to use a `form` in a React application
+- Be able to send information collected from a form into a child component
+
+## Notes
+
+1. What is the difference between an event listener and an event handler?
+
+1. If I am listening for an onChange on the input field, how to I access the value that the user is typing in?
+
+1. If the form is my child component, how do I send the information collected from that form up to the parent component?
diff --git a/class-04/lab/README.md b/class-04/lab/README.md
new file mode 100644
index 0000000..2003db8
--- /dev/null
+++ b/class-04/lab/README.md
@@ -0,0 +1,33 @@
+# Forms and Filter
+
+## Overview
+
+Today is the last day of our Gallery Of Horns. You have horned creatures displaying on the page. When you click on a beast, you increase its favorites and display it as a modal. Today we will be adding one more piece of functionality: filtering by numbers of horns.
+
+### Feature 1. Filter by Numbers of Horns
+
+#### Why are we implementing this feature?
+
+- As a user, I want to be able to view the beasts by the number of horns
+
+#### What are we going to implement?
+
+Given that a user is presented with filtering options  
+When the user clicks on one option  
+Then the images should be filtered accordingly
+
+#### How are we implementing it?
+
+- Using the `Form` component of `react-bootstrap`, build a drop down menu so that the user can choose to filter by number of horns.
+- When the user chooses one of the options, the correct images should be displayed.
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab
+1. Create a PR back to the `main` branch of your repository, and merge it cleanly.
+1. Ensure your application's latest changes have successfully deployed to Netlify.
+1. On Canvas, submit a link to your PR. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest code.
+    - A question within the context of today's lab assignment
+    - An observation about the lab assignment, or related 'Ah-hah!' moment
+    - How long you spent working on this assignment
diff --git a/class-05/.DS_Store b/class-05/.DS_Store
new file mode 100644
index 0000000..95a5b45
Binary files /dev/null and b/class-05/.DS_Store differ
diff --git a/class-05/DISCUSSION.md b/class-05/DISCUSSION.md
new file mode 100644
index 0000000..13c09ab
--- /dev/null
+++ b/class-05/DISCUSSION.md
@@ -0,0 +1,33 @@
+# Readings: Putting it all together
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[React Docs - Thinking in React](https://reactjs.org/docs/thinking-in-react.html){:target="_blank"}
+
+   1. What is the `single responsibility principle` and how does it apply to components?
+   1. What does it mean to build a 'static' version of your application?
+   1. Once you have a static application, what do you need to add?
+   1. What are the three questions you can ask to determine if something is state?
+   1. How can you identify where state needs to live?
+
+[Higher-Order Functions](https://eloquentjavascript.net/05_higher_order.html#h_xxCc98lOBK){:target="_blank"}
+
+   1. What is a "higher-order function"?
+   1. Explore the `greaterThan` function as defined in the reading. In your own words, what is line 2 of this function doing?
+   1. Explain how either `map` or `reduce` operates, with regards to higher-order functions.
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+<!-- ### Bookmark and Review
+
+PLACEHOLDER -->
diff --git a/class-05/README.md b/class-05/README.md
new file mode 100644
index 0000000..7b7ff4f
--- /dev/null
+++ b/class-05/README.md
@@ -0,0 +1,93 @@
+# Class 5: Putting it all together
+
+## Overview
+
+Today we will use the skills we learned over the week to build a new application: city explorer! Your lab will be to take React starter code and turn it into a beautiful portfolio.
+
+## Class Outline
+
+- Warm-up exercise
+- Introduction of today's code challenge topic
+- Build City Explorer (React)
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- Conditional Rendering
+- Ternary Statements
+- Browser Router
+
+#### Execute
+
+- Be able to build a React app that passes props from parent component to child component
+- Hold state in the application
+- Use forms in React
+- Conditionally render data
+
+## Notes
+
+1. What is conditional rendering?
+
+1. What is Browser Router?
+
+1. A ternary statement:
+
+  ```javaScript
+  // regular if/else conditional
+  if(conditionIsTrue){
+    return 'it is true'
+  } else {
+    return 'it is false'
+  }
+
+  // ternary statement
+  return conditionIsTrue ? 'it is true' : 'it is false';
+  ```
+
+1. Conditionally render a component:
+
+  ```javaScript
+  class Parent extends React.Component {
+    constructor(props){
+      super(props);
+      this.state={
+        displayChild: false
+      }
+    }
+
+    render() {
+      return(
+        // use a ternary to conditionally render the Child component
+        {this.state.displayChild ?
+          <Child>
+        : ''
+        }
+      )
+    }
+  }
+  ```
+
+- A better way to write it would be:
+
+  ```javaScript
+  class Parent extends React.Component {
+    constructor(props){
+      super(props);
+      this.state={
+        displayChild: false
+      }
+    }
+
+    render() {
+      return(
+        {this.state.displayChild &&
+          <Child>
+        }
+      )
+    }
+  }
+  ```
diff --git a/class-05/lab/README.md b/class-05/lab/README.md
new file mode 100644
index 0000000..2fa0c1a
--- /dev/null
+++ b/class-05/lab/README.md
@@ -0,0 +1,44 @@
+# Deploy and Extend Your Portfolio
+
+## Overview
+
+Get ready to take a look at a full-featured code base! You have just started a new job and the employer wants you to demonstrate your skills by building a portfolio using React.  This should highlight your knowledge of the React library and your ability to explore a new codebase.  [The starter template](https://www.npmjs.com/package/cra-template-react-portfolio){:target="_blank"} for today contains a complete React + Bootstrap site with example pages, icons, styles, and a themed layouts. Your job is to customize this code by following the specifications in the Trello board.
+
+You will be deploying your React portfolio to [Netlify](https://www.netlify.com/){:target="_blank"}.
+
+## Workflow
+
+- We will be using the [Trello](https://trello.com/home){:target="_blank"} project management tool for this lab.
+- To maximize your experience with Trello, you should create a free Trello account by clicking on the `Sign Up` button.
+- After creating an account, open the [React Portfolio Board](https://trello.com/b/BEvm5LDn/react-portfolio){:target="_blank"}, open the "... Show Menu" link, click the "... More" link, and then click "Copy Board". Before you create it, be sure to "Change" from Private to "Public" (and click "Yes, Make Board Public") so your instructional team can see your work. Now, click "Create" to add a copy to your personal account.
+- This Trello board contains all of the features required to complete this lab assignment.
+- Review the user stories and analyze the feature requests and requirements in the lab.
+- Within each story, note the the checklist of feature tasks. Be careful to execute tasks in order as they are often dependencies of one another.
+- Throughout the lab time, check off tasks as you complete them, and move the story cards through the workflow.
+
+## Time Estimate
+
+For each of the main features listed below, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```md
+Number and name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab on a branch.
+1. Create a PR back to the `main` branch of your repository, and merge it cleanly.
+1. Ensure your most recent code deployment was successful, so your latest code is published live via Netlify.
+1. On Canvas, submit a link to your PR. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest code.
+    - A question within the context of today's lab assignment
+    - An observation about the lab assignment, or related 'Ah-hah!' moment
+    - How long you spent working on this assignment
diff --git a/class-06/.DS_Store b/class-06/.DS_Store
new file mode 100644
index 0000000..346c0fe
Binary files /dev/null and b/class-06/.DS_Store differ
diff --git a/class-06/DISCUSSION.md b/class-06/DISCUSSION.md
new file mode 100644
index 0000000..408c2a8
--- /dev/null
+++ b/class-06/DISCUSSION.md
@@ -0,0 +1,38 @@
+# Readings: NODE.JS
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[An Introduction to Node.js on sitepoint.com](https://www.sitepoint.com/an-introduction-to-node-js){:target="_blank"}
+
+1. What is node.js?
+1. In your own words, what is Chrome's V8 JavaScript Engine?
+1. What does it mean that node is a JavaScript runtime?
+1. What is npm?
+1. What version of node are you running on your machine?
+1. What version of npm are you running on your machine?
+1. What command would you type to install a library/package called 'jshint'?
+1. What is node used for?
+
+[6 Reasons for Pair Programming](https://www.codefellows.org/blog/6-reasons-for-pair-programming/){:target="_blank"}
+
+1. What are the 6 reasons for pair programming?
+1. In your experience, which of these reasons have you found most beneficial?
+1. How does pair programming work?
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+## Bookmark and Review
+
+- [Geocoding API Docs](https://locationiq.com/){:target="_blank"}
+- [Axios docs](https://www.npmjs.com/package/axios){:target="_blank"}
+- [MDN async and await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await){:target="_blank"}
diff --git a/class-06/README.md b/class-06/README.md
new file mode 100644
index 0000000..9521d70
--- /dev/null
+++ b/class-06/README.md
@@ -0,0 +1,95 @@
+# Asynchronous Code and Third Party APIs
+
+## Overview
+
+Today we will explore third party APIs and how to request data from them.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of previous lab assignment
+- Third Party APIs, `async` and `await`
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- APIs
+- HTTP API Client
+- .env
+- Axios
+- async and await
+- Asynchronous Code
+- API keys
+- Queries
+- WRRC
+- Request
+- Response
+- Understand third-party APIs
+- Understand async and await
+
+#### Execute
+
+- Be able to gather information from APIs
+- Use HTTP API Client to test routes
+
+## Notes
+
+1. What is an API?
+1. What is asynchronous code and how does it relate to async and await?
+1. Why do you need an API key?
+1. What is an HTTP API Client?
+1. What is axios?
+1. Making a variable in an .env file: `PORT=3000`
+
+   - Common ways to get that wrong:
+     - Spaces around the `=`
+     - Adding a semicolon at the end of the line
+     - Using something other than UPPERCASE
+
+1. Making an API call:
+
+   ```javascript
+   import React from 'react';
+   import axios from 'axios';
+
+   class App extends React.Component {
+     // Because it takes an unknown amount of time to get the information, we need to do an async and await in this function:
+     getPokemon = async () => {
+       // This will go to the Pokemon API and GET us a bunch of pokemon objects.
+       // The 'await' says: "Don't run the next line until I get back with the information that you asked for and then put it in a const called 'pokemon'."
+       const pokemonResponse = await axios.get('https://pokeapi.co/api/v2/pokemon');
+
+       // axios returns a big object. The part of that object that has the pokemon in it is the .data attribute of the object.
+       const pokemonArray = pokemonResponse.data;
+     }
+
+     render() {
+       return(
+         <button onClick={this.getPokemon}>Get Pokemon</button>
+       )
+     }
+   }
+   ```
+
+1. Using a try/catch for error handling:
+
+   ```javascript
+   getPokemon = async () => {
+     try{
+       const pokemon = await axios.get('https://pokeapi.co/api/v2/pokemon');
+       const pokemonArray = pokemon.data;
+     } catch(err) {
+       console.error(err);
+     }
+   }
+   ```
+
+   - you can wrap a try/catch around any code you want
+   - it says, "try to run this code - if it doesn't work, then run the code in the catch block"
diff --git a/class-06/lab/README.md b/class-06/lab/README.md
new file mode 100644
index 0000000..c7d51a0
--- /dev/null
+++ b/class-06/lab/README.md
@@ -0,0 +1,87 @@
+# Asynchronous code, and APIs
+
+Today you will be building a React application that uses the Axios library to make user-initiated requests for data from a third-party API.
+
+## Resources
+
+[Axios on NPM](https://www.npmjs.com/package/axios){:target="_blank"}
+
+[Location IQ Geocoding API](https://locationiq.com/docs#search-forward-geocoding){:target="_blank"} - Specifically, the "Search / Forward GeoCoding" and "Static Maps" sections.
+
+## Process
+
+For every lab in this module, you will have a new partner. For this lab, you and your new partner(s) will spend the first 15 minutes planning out an approach to this lab's work on a whiteboard.
+
+1. Draw the web request-response cycle for the current lab tasks (about 15 minutes).
+   1. Document the data flow: identify inputs and outputs for each part of the cycle.
+   1. Outline the functions that support this data flow.
+   1. Be sure to include these drawings in your README.md.
+
+You will then work independently for the rest of the day, implementing your plan, coding in your own repository, submitting your own pull request.
+
+### Workflow
+
+- We will be using the [Trello](https://trello.com/home){:target="_blank"} project management tool for the duration of this project.
+- To maximize your experience with Trello, you should create a free Trello account by clicking on the `Sign Up` button.
+- After creating an account, go to the [City Explorer Trello Board](https://trello.com/b/Ajj9Cbac/module-2-city-explorer){:target="_blank"}, open the "... Show Menu" link, click the "... More" link, and then click "Copy Board". Before you create it, be sure to "Change" from Private to "Public" (and click "Yes, Make Board Public") so your instructional team can see your work. Now, click "Create" to add a copy to your personal account.
+- This Trello board contains all of the features required to complete this lab assignment.
+- Review the user stories and analyze the feature requests and requirements in the lab.
+- Within each story, note the acceptance criteria ("Given ... When ... Then...") and the checklist of feature tasks. Be careful to execute tasks in order as they are often dependencies of one another.
+- Throughout the lab time, check off tasks as you complete them, and move the story cards through the workflow.
+
+## Documentation
+
+_Your `README.md` must include:_
+
+```md
+# Project Name
+
+**Author**: Your Name Goes Here
+**Version**: 1.0.0 (increment the patch/fix version number if you make more commits past your first submission)
+
+## Overview
+<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for this class. (i.e. What's your problem domain?) -->
+
+## Getting Started
+<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->
+
+## Architecture
+<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->
+
+## Change Log
+<!-- Use this area to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an example:
+
+01-01-2001 4:59pm - Application now has a fully-functional express server, with a GET route for the location resource. -->
+
+## Credit and Collaborations
+<!-- Give credit (and a link) to other people or resources that helped you build this application. -->
+```
+
+### Time Estimates
+
+For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```markdown
+Name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab, according to the Trello cards.
+1. Create a PR back to the `main` branch of your repository, showing ALL your work, and merge it cleanly.
+1. On Canvas, submit a link to your PR. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest code.
+    - A link to your public Trello board.
+    - A question within the context of today's lab assignment.
+    - An observation about the lab assignment, or related 'Ah-hah!' moment.
+    - How long you spent working on this assignment.
diff --git a/class-07/.DS_Store b/class-07/.DS_Store
new file mode 100644
index 0000000..b01a45a
Binary files /dev/null and b/class-07/.DS_Store differ
diff --git a/class-07/DISCUSSION.md b/class-07/DISCUSSION.md
new file mode 100644
index 0000000..a1451fa
--- /dev/null
+++ b/class-07/DISCUSSION.md
@@ -0,0 +1,51 @@
+# Readings: REST
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[What Google Learned From Its Quest to Build the Perfect Team](https://www.google.com/amp/mobile.nytimes.com/2016/02/28/magazine/what-google-learned-from-its-quest-to-build-the-perfect-team.amp.html){:target="_blank"}
+
+> If you took Code 201, skim this article again for a refresher. If you did not take Code 201, read this article and think about how it can influence the way you work with your partners during pair programming.
+
+[How I explained REST to my brother](https://gist.github.com/brookr/5977550){:target="_blank"}
+
+1. Who is Roy Fielding?
+1. Why don't the techniques that we use today work well when we need to be able to talk to all of the machines in the world?
+1. What is the HTTP protocol that Fielding and his friends created?
+1. What does a `GET` do?
+1. What does a `POST` do?
+1. What does `PUT` do?
+1. What does `PATCH` do?
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+### Bookmark and Review
+
+PLACEHOLDER -->
+
+## API Keys
+
+Request a personal API key from the following APIs. You should receive these in your email within a few hours, often within minutes. Please request these keys prior to lecture to allow adequate time because you will need them in order to complete your lab assignment. Note: do not post your API keys in the Canvas discussion or on GitHub. Save them in a secure place.
+
+[Geocoding API](https://locationiq.com/){:target="_blank"}
+
+1. Did you get your API key?
+
+[Weather Bit API](https://www.weatherbit.io/){:target="_blank"}
+
+1. Did you get your API key?
+
+[Yelp API Docs](https://www.yelp.com/developers/documentation/v3/business_search){:target="_blank"}
+
+1. Did you get your API key?
+
+[The Movie DB API Docs](https://developers.themoviedb.org/3/getting-started/introduction){:target="_blank"}
+
+1. Did you get your API key?
diff --git a/class-07/README.md b/class-07/README.md
new file mode 100644
index 0000000..9f71f94
--- /dev/null
+++ b/class-07/README.md
@@ -0,0 +1,108 @@
+# Express Servers
+
+## Overview
+
+Today we will build our own custom Express server in Node.js. We will server our front end static files and dive more deeply into the WRRC.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- Functional programming concepts
+- Express Servers
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- Async
+- Server
+- REST
+- Express
+  - Application Middleware
+  - Route Middleware
+- cors
+- env variables
+- WRRC
+
+#### Execute
+
+- Hook up a front end React application with a back end server
+- Create an Express server from scratch
+
+## Notes
+
+1. What is a server?
+
+1. What is express?
+
+1. What is cors?
+
+1. Why do we need a server?
+
+1. Basic express server:
+
+   ```javaScript
+   'use strict';
+
+   // this library lets us access our .env file
+   require('dotenv').config();
+
+   // express is a server library
+   const express = require('express');
+
+   // initalizes the express library
+   const app = express();
+
+   // library that determines who is allowed to speak to our server
+   const cors = require('cors');
+
+
+   // this settting says that everyone is allowed to speak to our server
+   app.use(cors());
+
+   // we are getting the port variable from the .env file.
+   const PORT = process.env.PORT;
+
+   // this is a route. if you turn the server on and go to http://localhost:3001/ (or whatever port you specified in your .env), you will see 'hello from the home route'
+   app.get('/', (request, response) => {
+     response.send('hello from the home route');
+   });
+
+   // this turns the server on to the port that you specifed in your .env file
+   app.listen(PORT, () => console.log(`listening on ${PORT}`));
+   ```
+
+1. You can set up a route that your front-end can hit. Your server will return information on that route:
+
+   ```javaScript
+   // FRONT-END
+   await axios.get('http://localhost:3001/cats');
+
+   // BACK-END
+   app.get('/cats', (request, response) => {
+     response.send('cats are the best');
+   });
+   ```
+
+1. You can also send information from the front-end to the back-end as a query.
+
+   - Queries live in the URL after the question mark: `http://localhost:3000/?city=seattle`
+   - To send that query to the back-end via axios, you could write code like:
+
+     ```javaScript
+     //FRONT-END
+     await axios.get('http://localhost:3001/city', {params: { city: 'seattle' }});
+
+     // BACK-END
+     app.get('city', (request, response) => {
+       const city = reqeust.query.city;
+       response.send(`you sent the city of ${city}`)
+     });
+     ```
diff --git a/class-07/lab/README.md b/class-07/lab/README.md
new file mode 100644
index 0000000..a3efbd3
--- /dev/null
+++ b/class-07/lab/README.md
@@ -0,0 +1,105 @@
+# Custom Servers with Node and Express
+
+## Overview
+
+In this lab assignment, you will begin building your own custom API server, which will provide data for the City Explorer front-end application. This means users will get to see not only the map, but also interesting information about the area, provided by a variety of third-party APIs that your server will manage.
+
+## Resources
+
+[Node JS Docs](https://nodejs.org/en/){:target="_blank"}
+
+[NPM JS Docs](https://docs.npmjs.com/){:target="_blank"}
+
+[Express JS Docs](http://expressjs.com/en/4x/api.html){:target="_blank"}
+
+[dotenv Docs](https://www.npmjs.com/package/dotenv){:target="_blank"}
+
+## Process
+
+For every lab in this module, you will have a new partner. You and your new partner(s) will spend the first 30 minutes reviewing each other's code from the previous lab and planning out an approach to this lab's work on a whiteboard.
+
+1. Do a formal code review of each person's code (10 minutes each).
+   1. Open your partner's GitHub pull request on your laptop.
+   1. Identify an area in the code that:
+      1. you don't understand
+      1. or seems overly complex
+      1. or you see a way to improve
+      1. or you want more information on
+      1. or you really like or think is interesting
+   1. Add kind comments or questions inline using the GitHub review feature.
+1. Draw the web request-response cycle for the current lab tasks (about 10 minutes).
+   1. Document the data flow: identify inputs and outputs for each part of the cycle.
+   1. Outline the functions that support this data flow.
+   1. Be sure to include these drawings in your README.md.
+
+You will then work independently for the rest of the day, implementing your plan, coding in your own repository, submitting your own pull request.
+
+### Workflow
+
+- We will be using the [Trello](https://trello.com/home){:target="_blank"} project management tool for the duration of this project.
+- To maximize your experience with Trello, you should create a free Trello account by clicking on the `Sign Up` button.
+- After creating an account, go to the [City Explorer Trello Board](https://trello.com/b/Ajj9Cbac){:target="_blank"}, open the "... Show Menu" link, click the "... More" link, and then click "Copy Board". Before you create it, be sure to "Change" from Private to "Public" (and click "Yes, Make Board Public") so your instructional team can see your work. Now, click "Create" to add a copy to your personal account.
+- This Trello board contains all of the features required to complete this lab assignment.
+- Review the user stories and analyze the feature requests and requirements in the lab.
+- Within each story, note the acceptance criteria ("Given ... When ... Then...") and the checklist of feature tasks. Be careful to execute tasks in order as they are often dependencies of one another.
+- Throughout the lab time, check off tasks as you complete them, and move the story cards through the workflow.
+
+### Documentation
+
+You must have a complete `README.md` for both your server and your website repositories.
+
+_Your `README.md` must include:_
+
+```md
+# Project Name
+
+**Author**: Your Name Goes Here
+**Version**: 1.0.0 (increment the patch/fix version number if you make more commits past your first submission)
+
+## Overview
+<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for this class. (i.e. What's your problem domain?) -->
+
+## Getting Started
+<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->
+
+## Architecture
+<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->
+
+## Change Log
+<!-- Use this area to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an example:
+
+01-01-2001 4:59pm - Application now has a fully-functional express server, with a GET route for the location resource. -->
+
+## Credit and Collaborations
+<!-- Give credit (and a link) to other people or resources that helped you build this application. -->
+```
+
+### Time Estimates
+
+For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```markdown
+Name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab, according to the Trello cards.
+1. Your lab will require 2 repositories: 1 for the Server (back-end) and 1 for the client (front-end)
+1. Create a PR back to the `main` branch of each of your repositories, showing ALL your work, and merge them cleanly.
+1. On Canvas, submit a link to both PRs. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest code.
+    - A link to your public Trello board.
+    - A question within the context of today's lab assignment.
+    - An observation about the lab assignment, or related 'Ah-hah!' moment.
+    - How long you spent working on this assignment.
diff --git a/class-07/lab/starter-code/data/weather.json b/class-07/lab/starter-code/data/weather.json
new file mode 100644
index 0000000..f96c325
--- /dev/null
+++ b/class-07/lab/starter-code/data/weather.json
@@ -0,0 +1,428 @@
+[
+  {
+      "data": [
+          {
+          "moonrise_ts": 1616530626,
+          "wind_cdir": "SSW",
+          "rh": 85,
+          "pres": 1024.8334,
+          "high_temp": 9.8,
+          "sunset_ts": 1616552878,
+          "ozone": 366.3854,
+          "moon_phase": 0.779292,
+          "wind_gust_spd": 3.5996094,
+          "snow_depth": 0,
+          "clouds": 60,
+          "ts": 1616482860,
+          "sunrise_ts": 1616508345,
+          "app_min_temp": 1.3,
+          "wind_spd": 0.98886496,
+          "pop": 15,
+          "wind_cdir_full": "south-southwest",
+          "slp": 1029.5,
+          "moon_phase_lunation": 0.36,
+          "valid_date": "2021-03-23",
+          "app_max_temp": 9.8,
+              "vis": 23.121166,
+              "dewpt": 5.1,
+              "snow": 0,
+              "uv": 3.4955893,
+              "weather": {
+                  "icon": "c03d",
+                  "code": 803,
+                  "description": "Broken clouds"
+              },
+              "wind_dir": 211,
+              "max_dhi": null,
+              "clouds_hi": 16,
+              "precip": 0.1875,
+              "low_temp": 5,
+              "max_temp": 9.9,
+              "moonset_ts": 1616502771,
+              "datetime": "2021-03-23",
+              "temp": 7.5,
+              "min_temp": 5,
+              "clouds_mid": 8,
+              "clouds_low": 58
+          },
+          {
+              "moonrise_ts": 1616621240,
+              "wind_cdir": "S",
+              "rh": 89,
+              "pres": 1009.5417,
+              "high_temp": 8.6,
+              "sunset_ts": 1616639363,
+              "ozone": 403.04166,
+              "moon_phase": 0.863661,
+              "wind_gust_spd": 15.296875,
+              "snow_depth": 0,
+              "clouds": 95,
+              "ts": 1616569260,
+              "sunrise_ts": 1616594624,
+              "app_min_temp": 0.9,
+              "wind_spd": 4.383793,
+              "pop": 90,
+              "wind_cdir_full": "south",
+              "slp": 1014.4375,
+              "moon_phase_lunation": 0.39,
+              "valid_date": "2021-03-24",
+              "app_max_temp": 8.6,
+              "vis": 22.425667,
+              "dewpt": 4.5,
+              "snow": 0,
+              "uv": 2.3655047,
+              "weather": {
+                  "icon": "r01d",
+                  "code": 500,
+                  "description": "Light rain"
+              },
+              "wind_dir": 178,
+              "max_dhi": null,
+              "clouds_hi": 35,
+              "precip": 7,
+              "low_temp": 4.7,
+              "max_temp": 8.8,
+              "moonset_ts": 1616591168,
+              "datetime": "2021-03-24",
+              "temp": 6.2,
+              "min_temp": 4.7,
+              "clouds_mid": 68,
+              "clouds_low": 83
+          },
+          {
+              "moonrise_ts": 1616712188,
+              "wind_cdir": "SSE",
+              "rh": 82,
+              "pres": 1000.8333,
+              "high_temp": 9.7,
+              "sunset_ts": 1616725848,
+              "ozone": 378.7396,
+              "moon_phase": 0.931782,
+              "wind_gust_spd": 3.5078125,
+              "snow_depth": 0,
+              "clouds": 89,
+              "ts": 1616655660,
+              "sunrise_ts": 1616680902,
+              "app_min_temp": 1.5,
+              "wind_spd": 1.1227753,
+              "pop": 85,
+              "wind_cdir_full": "south-southeast",
+              "slp": 1011.8958,
+              "moon_phase_lunation": 0.42,
+              "valid_date": "2021-03-25",
+              "app_max_temp": 9.7,
+              "vis": 20.522167,
+              "dewpt": 3.8,
+              "snow": 0,
+              "uv": 2.521648,
+              "weather": {
+                  "icon": "r01d",
+                  "code": 500,
+                  "description": "Light rain"
+              },
+              "wind_dir": 167,
+              "max_dhi": null,
+              "clouds_hi": 1,
+              "precip": 6.125,
+              "low_temp": 5.2,
+              "max_temp": 9.8,
+              "moonset_ts": 1616679248,
+              "datetime": "2021-03-25",
+              "temp": 6.8,
+              "min_temp": 5,
+              "clouds_mid": 15,
+              "clouds_low": 89
+          }
+      ],
+      "city_name": "Seattle",
+      "lon": "-122.33207",
+      "timezone": "America/Los_Angeles",
+      "lat": "47.60621",
+      "country_code": "US",
+      "state_code": "WA"
+  },
+  {
+      "data": [
+          {
+              "moonrise_ts": 1618820363,
+              "wind_cdir": "SSE",
+              "rh": 45,
+              "pres": 1011.86,
+              "high_temp": 12.4,
+              "sunset_ts": 1618858114,
+              "ozone": 387.7,
+              "moon_phase": 0.378309,
+              "wind_gust_spd": 4.83376,
+              "snow_depth": 0,
+              "clouds": 40,
+              "ts": 1618783260,
+              "sunrise_ts": 1618807952,
+              "app_min_temp": 11.5,
+              "wind_spd": 1.52375,
+              "pop": 0,
+              "wind_cdir_full": "south-southeast",
+              "slp": 1018.41,
+              "moon_phase_lunation": 0.23,
+              "valid_date": "2021-04-19",
+              "app_max_temp": 16.2,
+              "vis": 0,
+              "dewpt": 2.8,
+              "snow": 0,
+              "uv": 0.580346,
+              "weather": {
+                  "icon": "c02d",
+                  "code": 802,
+                  "description": "Scattered clouds"
+              },
+              "wind_dir": 161,
+              "max_dhi": null,
+              "clouds_hi": 0,
+              "precip": 0,
+              "low_temp": 6.4,
+              "max_temp": 16.2,
+              "moonset_ts": 1618795181,
+              "datetime": "2021-04-19",
+              "temp": 14.8,
+              "min_temp": 11.5,
+              "clouds_mid": 23,
+              "clouds_low": 30
+          },
+          {
+              "moonrise_ts": 1618909990,
+              "wind_cdir": "NE",
+              "rh": 63,
+              "pres": 1010,
+              "high_temp": 17,
+              "sunset_ts": 1618944604,
+              "ozone": 372.781,
+              "moon_phase": 0.479758,
+              "wind_gust_spd": 6.77979,
+              "snow_depth": 0,
+              "clouds": 40,
+              "ts": 1618869660,
+              "sunrise_ts": 1618894236,
+              "app_min_temp": 2,
+              "wind_spd": 1.21594,
+              "pop": 10,
+              "wind_cdir_full": "northeast",
+              "slp": 1016.61,
+              "moon_phase_lunation": 0.27,
+              "valid_date": "2021-04-20",
+              "app_max_temp": 17,
+              "vis": 0,
+              "dewpt": 4.3,
+              "snow": 0,
+              "uv": 5.39188,
+              "weather": {
+                  "icon": "c03d",
+                  "code": 803,
+                  "description": "Broken clouds"
+              },
+              "wind_dir": 47,
+              "max_dhi": null,
+              "clouds_hi": 0,
+              "precip": 0.0957031,
+              "low_temp": 5.6,
+              "max_temp": 17,
+              "moonset_ts": 1618884240,
+              "datetime": "2021-04-20",
+              "temp": 11.9,
+              "min_temp": 5.6,
+              "clouds_mid": 36,
+              "clouds_low": 11
+          },
+          {
+              "moonrise_ts": 1619000197,
+              "wind_cdir": "SE",
+              "rh": 67,
+              "pres": 1010.27,
+              "high_temp": 17,
+              "sunset_ts": 1619031094,
+              "ozone": 362.823,
+              "moon_phase": 0.584771,
+              "wind_gust_spd": 8.97155,
+              "snow_depth": 0,
+              "clouds": 28,
+              "ts": 1618956060,
+              "sunrise_ts": 1618980521,
+              "app_min_temp": 2.9,
+              "wind_spd": 1.7877,
+              "pop": 10,
+              "wind_cdir_full": "southeast",
+              "slp": 1016.86,
+              "moon_phase_lunation": 0.3,
+              "valid_date": "2021-04-21",
+              "app_max_temp": 17,
+              "vis": 0,
+              "dewpt": 5.8,
+              "snow": 0,
+              "uv": 4.1868,
+              "weather": {
+                  "icon": "c02d",
+                  "code": 802,
+                  "description": "Scattered clouds"
+              },
+              "wind_dir": 141,
+              "max_dhi": null,
+              "clouds_hi": 4,
+              "precip": 0.109375,
+              "low_temp": 5.3,
+              "max_temp": 17,
+              "moonset_ts": 1618972810,
+              "datetime": "2021-04-21",
+              "temp": 12.2,
+              "min_temp": 6.2,
+              "clouds_mid": 14,
+              "clouds_low": 20
+          }
+      ],
+      "city_name": "Paris",
+      "lon": 2.35,
+      "timezone": "Europe/Paris",
+      "lat": 48.86,
+      "country_code": "FR",
+      "state_code": "11"
+  },
+  {
+      "data": [
+          {
+              "moonrise_ts": 1618905792,
+              "wind_cdir": "WSW",
+              "rh": 23,
+              "pres": 913.456,
+              "high_temp": 33.7,
+              "sunset_ts": 1618935181,
+              "ozone": 289.615,
+              "moon_phase": 0.571386,
+              "wind_gust_spd": 12.3056,
+              "snow_depth": 0,
+              "clouds": 64,
+              "ts": 1618866060,
+              "sunrise_ts": 1618887984,
+              "app_min_temp": 20.8,
+              "wind_spd": 2.33611,
+              "pop": 0,
+              "wind_cdir_full": "west-southwest",
+              "slp": 1011.66,
+              "moon_phase_lunation": 0.27,
+              "valid_date": "2021-04-20",
+              "app_max_temp": 31.2,
+              "vis": 0,
+              "dewpt": 3.5,
+              "snow": 0,
+              "uv": 7.40508,
+              "weather": {
+                  "icon": "c03d",
+                  "code": 803,
+                  "description": "Broken clouds"
+              },
+              "wind_dir": 255,
+              "max_dhi": null,
+              "clouds_hi": 49,
+              "precip": 0,
+              "low_temp": 15.8,
+              "max_temp": 33.7,
+              "moonset_ts": 1618875199,
+              "datetime": "2021-04-20",
+              "temp": 27,
+              "min_temp": 21.8,
+              "clouds_mid": 32,
+              "clouds_low": 0
+          },
+          {
+              "moonrise_ts": 1618995644,
+              "wind_cdir": "W",
+              "rh": 33,
+              "pres": 915.771,
+              "high_temp": 27.7,
+              "sunset_ts": 1619021623,
+              "ozone": 289.438,
+              "moon_phase": 0.676877,
+              "wind_gust_spd": 13.0126,
+              "snow_depth": 0,
+              "clouds": 27,
+              "ts": 1618952460,
+              "sunrise_ts": 1618974317,
+              "app_min_temp": 15.8,
+              "wind_spd": 2.48181,
+              "pop": 0,
+              "wind_cdir_full": "west",
+              "slp": 1015.29,
+              "moon_phase_lunation": 0.3,
+              "valid_date": "2021-04-21",
+              "app_max_temp": 26.5,
+              "vis": 0,
+              "dewpt": 3.6,
+              "snow": 0,
+              "uv": 8.63135,
+              "weather": {
+                  "icon": "c02d",
+                  "code": 802,
+                  "description": "Scattered clouds"
+              },
+              "wind_dir": 267,
+              "max_dhi": null,
+              "clouds_hi": 20,
+              "precip": 0,
+              "low_temp": 14.6,
+              "max_temp": 27.7,
+              "moonset_ts": 1618964045,
+              "datetime": "2021-04-21",
+              "temp": 21.2,
+              "min_temp": 15.8,
+              "clouds_mid": 7,
+              "clouds_low": 0
+          },
+          {
+              "moonrise_ts": 1619085721,
+              "wind_cdir": "W",
+              "rh": 17,
+              "pres": 917.534,
+              "high_temp": 27.3,
+              "sunset_ts": 1619108065,
+              "ozone": 302.281,
+              "moon_phase": 0.676877,
+              "wind_gust_spd": 10.8675,
+              "snow_depth": 0,
+              "clouds": 54,
+              "ts": 1619038860,
+              "sunrise_ts": 1619060650,
+              "app_min_temp": 14.6,
+              "wind_spd": 2.17971,
+              "pop": 0,
+              "wind_cdir_full": "west",
+              "slp": 1017.37,
+              "moon_phase_lunation": 0.33,
+              "valid_date": "2021-04-22",
+              "app_max_temp": 26.1,
+              "vis": 0,
+              "dewpt": -6.3,
+              "snow": 0,
+              "uv": 8.5652,
+              "weather": {
+                  "icon": "c03d",
+                  "code": 803,
+                  "description": "Broken clouds"
+              },
+              "wind_dir": 280,
+              "max_dhi": null,
+              "clouds_hi": 54,
+              "precip": 0,
+              "low_temp": 15.2,
+              "max_temp": 27.3,
+              "moonset_ts": 1619050445,
+              "datetime": "2021-04-22",
+              "temp": 20.6,
+              "min_temp": 14.6,
+              "clouds_mid": 0,
+              "clouds_low": 0
+          }
+      ],
+      "city_name": "Amman",
+      "lon": 35.91,
+      "timezone": "Asia/Amman",
+      "lat": 31.95,
+      "country_code": "JO",
+      "state_code": "16"
+  }
+]
diff --git a/class-08/.DS_Store b/class-08/.DS_Store
new file mode 100644
index 0000000..7c59807
Binary files /dev/null and b/class-08/.DS_Store differ
diff --git a/class-08/DISCUSSION.md b/class-08/DISCUSSION.md
new file mode 100644
index 0000000..e817ca6
--- /dev/null
+++ b/class-08/DISCUSSION.md
@@ -0,0 +1,35 @@
+# Readings: APIs
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[API Design Best Practices](https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design)
+
+1. What does REST stand for?
+1. REST APIs are designed around a ____________.
+1. What is an identifier of a resource? Give an example.
+1. What are the most common HTTP verbs?
+1. What should the URIs be based on?
+1. Give an example of a good URI.
+1. What does it mean to have a 'chatty' web API? Is this a good or a bad thing?
+1. What status code does a successful `GET` request return?
+1. What status code does an unsuccessful `GET` request return?
+1. What status code does a successful `POST` request return?
+1. What status code does a successful `DELETE` request return?
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+## Bookmark and Review
+
+- [RegExr](https://regexr.com/){:target="_blank"} - Pay particular attention to the cheatsheet
+- [Regex Tutorial](https://medium.com/factory-mind/regex-tutorial-a-simple-cheatsheet-by-examples-649dc1c3f285){:target="_blank"}
+- [Regex 101](https://regex101.com/){:target="_blank"}
diff --git a/class-08/README.md b/class-08/README.md
new file mode 100644
index 0000000..7daf13b
--- /dev/null
+++ b/class-08/README.md
@@ -0,0 +1,55 @@
+# APIs
+
+## Overview
+
+Today we will use our express server to request information from third party APIs to send to the front-end.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- Requesting data from 3rd party APIs via the server
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- APIs
+
+#### Execute
+
+- Node Express Server
+- Use **axios** to fetch remote data asynchronously
+- Use **axios** to reach out to the back-end from the front-end
+- Ingest 3rd Party data from an API
+- Integrate data with a separate web application
+
+## Notes
+
+1. What is an API?
+
+1. Why do we need a server?
+
+1. What do we keep in our .env file?
+
+1. Nodemon will automatically detect changes that we make to all the files in our server, however, if we make a change to THIS file, we must restart nodemon for it to take affect.
+
+1. True or False: all API's require a key
+
+1. To make an API call in the server using axios:
+
+  ```javaScript
+  const url = `http://urlToAPI/?key=${process.env.MY_API_KEY}&city=seattle`;
+
+  // notice the 'await'. This is asynchronous code. The function will need to be 'async'
+  const axiosResults = await axios.get(url);
+  console.log(axiosResults.data);
+  ```
+
+- NOTE: `axios` returns a giant object. The data we care about will be found in the `data` property of that object.
diff --git a/class-08/lab/README.md b/class-08/lab/README.md
new file mode 100644
index 0000000..b6d45e6
--- /dev/null
+++ b/class-08/lab/README.md
@@ -0,0 +1,101 @@
+# APIs
+
+## Overview
+
+In this lab assignment, you will show live weather and movie data in response to City Explorer searches. This data comes from third-party APIs, that allow you to make queries with an access token (or key). To keep your key secure, you can't expose it in your front-end code, but you can use it from within your own custom back-end API server code you started in the last lab. Your web client will make a request to your custom API server, which will in turn use the key to make a request to the data API. When your server gets the data back, you can wrangle the data as you like, and send it on back to the web client.
+
+## Resources
+
+[WeatherBit API](https://www.weatherbit.io/api){:target="_blank"}
+
+[The Movie DB API Docs](https://developers.themoviedb.org/3/getting-started/introduction){:target="_blank"}
+
+## Process
+
+For every lab in this module, you will have a new partner. You and your new partner(s) will spend the first 30 minutes reviewing each other's code from the previous lab and planning out an approach to this lab's work on a whiteboard.
+
+1. Do a formal code review of each person's code (10 minutes each).
+   1. Open your partner's GitHub pull request on your laptop.
+   1. Identify an area in the code that:
+      1. you don't understand
+      1. or seems overly complex
+      1. or you see a way to improve
+      1. or you want more information on
+      1. or you really like or think is interesting
+   1. Add kind comments or questions inline using the GitHub review feature.
+1. Draw the web request-response cycle for the current lab tasks (about 10 minutes).
+   1. Document the data flow: identify inputs and outputs for each part of the cycle.
+   1. Outline the functions that support this data flow.
+   1. Be sure to include these drawings in your README.md.
+
+You will then work independently for the rest of the day, implementing your plan, coding in your own repository, submitting your own pull request.
+
+### Workflow
+
+- We will be using the [Trello](https://trello.com/home){:target="_blank"} project management tool for the duration of this project.
+- To maximize your experience with Trello, you should create a free Trello account by clicking on the `Sign Up` button.
+- After creating an account, go to the [City Explorer Trello Board](https://trello.com/b/Ajj9Cbac){:target="_blank"}, open the "... Show Menu" link, click the "... More" link, and then click "Copy Board". Before you create it, be sure to "Change" from Private to "Public" (and click "Yes, Make Board Public") so your instructional team can see your work. Now, click "Create" to add a copy to your personal account.
+- This Trello board contains all of the features required to complete this lab assignment.
+- Review the user stories and analyze the feature requests and requirements in the lab.
+- Within each story, note the acceptance criteria ("Given ... When ... Then...") and the checklist of feature tasks. Be careful to execute tasks in order as they are often dependencies of one another.
+- Throughout the lab time, check off tasks as you complete them, and move the story cards through the workflow.
+
+### Documentation
+
+You must have a complete `README.md` for both your server and your website repositories.
+
+_Your `README.md` must include:_
+
+```md
+# Project Name
+
+**Author**: Your Name Goes Here
+**Version**: 1.0.0 (increment the patch/fix version number if you make more commits past your first submission)
+
+## Overview
+<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for this class. (i.e. What's your problem domain?) -->
+
+## Getting Started
+<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->
+
+## Architecture
+<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->
+
+## Change Log
+<!-- Use this area to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an example:
+
+01-01-2001 4:59pm - Application now has a fully-functional express server, with a GET route for the location resource. -->
+
+## Credit and Collaborations
+<!-- Give credit (and a link) to other people or resources that helped you build this application. -->
+```
+
+### Time Estimates
+
+For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```markdown
+Name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab, according to the Trello cards.
+1. Your lab will require 2 repositories: 1 for the Server (back-end) and 1 for the client (front-end)
+1. Create a PR back to the `main` branch of each of your repositories, showing ALL your work, and merge them cleanly.
+1. On Canvas, submit a link to both PRs. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest code.
+    - A link to your public Trello board.
+    - A question within the context of today's lab assignment.
+    - An observation about the lab assignment, or related 'Ah-hah!' moment.
+    - How long you spent working on this assignment.
diff --git a/class-09/.DS_Store b/class-09/.DS_Store
new file mode 100644
index 0000000..0da8b4c
Binary files /dev/null and b/class-09/.DS_Store differ
diff --git a/class-09/DISCUSSION.md b/class-09/DISCUSSION.md
new file mode 100644
index 0000000..612b36c
--- /dev/null
+++ b/class-09/DISCUSSION.md
@@ -0,0 +1,32 @@
+# Readings: Functional Programming
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[Functional Programming Concepts](https://medium.com/the-renaissance-developer/concepts-of-functional-programming-in-javascript-6bc84220d2aa){:target="_blank"}
+
+  1. What is functional programming?
+  1. What is a pure function and how do we know if something is a pure function?
+  1. What are the benefits of a pure function?
+  1. What is immutability?
+  1. What is Referential transparency?
+
+<!-- ## Additional Resources
+
+PLACEHOLDER -->
+
+## Videos
+
+[Node JS Tutorial for Beginners #6 - Modules and require()](https://www.youtube.com/watch?v=xHLd36QoS4k)
+
+  1. What is a module?
+  1. What does the word 'require' do?
+  1. How do we bring another module into the file the we are working in?
+  1. What do we have to do to make a module available?
+
+<!-- ### Bookmark and Review
+
+PLACEHOLDER -->
diff --git a/class-09/README.md b/class-09/README.md
new file mode 100644
index 0000000..44eafa4
--- /dev/null
+++ b/class-09/README.md
@@ -0,0 +1,120 @@
+# Advanced Topics
+
+## Overview
+
+Today we will dive a little bit deeper into Express and higher level programming in general, covering the following topics:
+
+- Strategies for Refactoring
+- Functional Programming
+- Modularization
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- Substandard programming patterns
+- Refactoring opportunities
+- Efficiency Loss/Gain
+- Modularization
+- Single Responsibility Principle (SRP)
+
+#### Execute
+
+- Refactor monolithic functions into smaller, single responsibility functions
+- Create a "controller" function
+- Create DRY code by finding repetition, patterns
+- Modularize similar code
+
+## Notes
+
+1. What is DRY code?
+
+1. Why do we modularize our code?
+
+1. What is a Promise?
+
+1. What is the difference between a Promise and using `.then()/.catch()`?
+
+1. `async and await` - vs - `.then() and .catch()`
+
+  ```javaScript
+  async function doSomething() {
+    try{
+      const results = await axios.get(url)
+    }
+    catch(err){
+      console.error(err);
+    }
+  }
+
+  // error handeling is built in with the .catch() so we don't need a try/catch
+  function doSomething() {
+    axios
+      .get(url)
+      .then(results => {
+        // the results only exist within this code block
+      })
+      .catch(err => console.error(err))
+  }
+  ```
+
+1. Modularizing a file on the server
+
+  ```javaScript
+  function doSomething(){
+    // does something really cool
+  }
+
+  module.exports = doSomething
+  ```
+  
+  - OR, it can be written like this
+
+  ```javaScript
+  module.exports = () => {
+    // does something really cool
+  }
+  ```
+
+  - in the server file
+
+  ```javaScript
+  const doSomething = require('./path-to-doSomething');
+  // the rest of the file
+  ```
+
+1. We can also export more than one function by putting it in an object
+
+  ```javaScript
+  module.exports = {
+    doSomething: function(){
+      // does something cool
+    },
+
+    doSomethingElse: function(){
+      // does something else
+    }
+  }
+  ```
+
+  - to access a function from the object above in the server, we would...
+
+  ```javaScript
+  const doesStuffObject = require('./path-to-doesStuffObject');
+
+  doesStuffObject.doSomething();
+  doesStuffObject.doSomethingElse();
+  ```
+  
+  1. List of resources to help with lab or if I want to know more:
diff --git a/class-09/lab/README.md b/class-09/lab/README.md
new file mode 100644
index 0000000..a8dbb09
--- /dev/null
+++ b/class-09/lab/README.md
@@ -0,0 +1,97 @@
+# Refactoring into Modules
+
+## Overview
+
+It's time to clean up your code base.
+
+## Resources
+
+## Process
+
+For every lab in this module, you will have a new partner. You and your new partner(s) will spend the first 30 minutes reviewing each other's code from the previous lab and planning out an approach to this lab's work on a whiteboard.
+
+1. Do a formal code review of each person's code (10 minutes each).
+   1. Open your partner's GitHub pull request on your laptop.
+   1. Identify an area in the code that:
+      1. you don't understand
+      1. or seems overly complex
+      1. or you see a way to improve
+      1. or you want more information on
+      1. or you really like or think is interesting
+   1. Add kind comments or questions inline using the GitHub review feature.
+1. Draw the web request-response cycle for the current lab tasks (about 10 minutes).
+   1. Document the data flow: identify inputs and outputs for each part of the cycle.
+   1. Outline the functions that support this data flow.
+   1. Be sure to include these drawings in your README.md.
+
+You will then work independently for the rest of the day, implementing your plan, coding in your own repository, submitting your own pull request.
+
+### Workflow
+
+- We will be using the [Trello](https://trello.com/home){:target="_blank"} project management tool for the duration of this project.
+- To maximize your experience with Trello, you should create a free Trello account by clicking on the `Sign Up` button.
+- After creating an account, go to the [City Explorer Trello Board](https://trello.com/b/Ajj9Cbac){:target="_blank"}, open the "... Show Menu" link, click the "... More" link, and then click "Copy Board". Before you create it, be sure to "Change" from Private to "Public" (and click "Yes, Make Board Public") so your instructional team can see your work. Now, click "Create" to add a copy to your personal account.
+- This Trello board contains all of the features required to complete this lab assignment.
+- Review the user stories and analyze the feature requests and requirements in the lab.
+- Within each story, note the acceptance criteria ("Given ... When ... Then...") and the checklist of feature tasks. Be careful to execute tasks in order as they are often dependencies of one another.
+- Throughout the lab time, check off tasks as you complete them, and move the story cards through the workflow.
+
+### Documentation
+
+You must have a complete `README.md` for both your server and your website repositories.
+
+_Your `README.md` must include:_
+
+```md
+# Project Name
+
+**Author**: Your Name Goes Here
+**Version**: 1.0.0 (increment the patch/fix version number if you make more commits past your first submission)
+
+## Overview
+<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for this class. (i.e. What's your problem domain?) -->
+
+## Getting Started
+<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->
+
+## Architecture
+<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->
+
+## Change Log
+<!-- Use this area to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an example:
+
+01-01-2001 4:59pm - Application now has a fully-functional express server, with a GET route for the location resource. -->
+
+## Credit and Collaborations
+<!-- Give credit (and a link) to other people or resources that helped you build this application. -->
+```
+
+### Time Estimates
+
+For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```markdown
+Name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab, according to the Trello cards.
+1. Your lab will require 2 repositories: 1 for the Server (back-end) and 1 for the client (front-end)
+1. Create a PR back to the `main` branch of each of your repositories, showing ALL your work, and merge them cleanly.
+1. On Canvas, submit a link to both PRs. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest code.
+    - A link to your public Trello board.
+    - A question within the context of today's lab assignment.
+    - An observation about the lab assignment, or related 'Ah-hah!' moment.
+    - How long you spent working on this assignment.
diff --git a/class-10/.DS_Store b/class-10/.DS_Store
new file mode 100644
index 0000000..742b817
Binary files /dev/null and b/class-10/.DS_Store differ
diff --git a/class-10/DISCUSSION.md b/class-10/DISCUSSION.md
new file mode 100644
index 0000000..adac048
--- /dev/null
+++ b/class-10/DISCUSSION.md
@@ -0,0 +1,36 @@
+# Readings: In memory storage
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[Understanding the JavaScript Call Stack](https://medium.freecodecamp.org/understanding-the-javascript-call-stack-861e41ae61d4){:target="_blank"}
+
+1. What is a 'call'?
+1. How many 'calls' can happen at once?
+1. What does LIFO mean?
+1. Draw an example of a call stack and the functions that would need to be invoked to generate that call stack.
+1. What causes a Stack Overflow?
+
+[JavaScript error messages](https://codeburst.io/javascript-error-messages-debugging-d23f84f0ae7c){:target="_blank"}
+
+1. What is a 'reference error'?
+1. What is a 'syntax error'?
+1. What is a 'range error'?
+1. What is a 'tyep error'?
+1. What is a breakpoint?
+1. What does the word 'debugger' do in your code?
+
+## Bookmark and Review
+
+- [JavaScript errors reference on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors){:target="_blank"}
+
+<!-- ### Videos
+
+PLACEHOLDER
+
+### Bookmark and Review
+
+PLACEHOLDER -->
diff --git a/class-10/README.md b/class-10/README.md
new file mode 100644
index 0000000..540eb78
--- /dev/null
+++ b/class-10/README.md
@@ -0,0 +1,74 @@
+# Persistence
+
+## Overview
+
+Today we will talk about in-memory storage as well as dive deeper into modularization and refactorization.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Code review of lab assignment
+- In-memory persistence
+- Lab Overview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- In Memory Database
+- Cache
+- Cache Hit
+- Cache Miss
+
+#### Execute
+
+- Persist data in memory
+- Understand the advantages and drawbacks to persisting data in memory vs using something like a database
+
+## Notes
+
+1. What is a cache?
+
+1. What does a cache hit mean? What does a cache miss mean?
+
+1. What does the word `debugger` do in your code?
+
+1. What is a breakpoint?
+
+1. List 5 different debugging tools:
+
+1. Adding to the cache:
+
+  ```javaScript
+    if(inMemoryDB[ingredient] !== undefined){
+      // if the info is in the inMemoryDB, just use that data
+      return inMemoryDB[ingredient];
+    } else {
+      // go the API and get the information
+      // Add it to the inMemoryDB
+      inMemoryDB[ingredient] = recipeArr;
+    }
+  ```
+
+1. How to keep track of how old the data is: add a key with the time stamp in the constructor
+
+  ```javaScript
+  function Recipe(obj){
+    // other keys
+    this.dateAdded = Date.now();
+  }
+  ```
+
+  - compare that date/time with however long you want to keep the data. If the data is too old, just empty the object
+  
+  ```javaScript
+  if (cache[key] && (Date.now() - cache[key].dateAdded < 50000)) {
+    console.log('Cache hit');
+  } else { 
+    // dump the data and get fresh data from the API
+  }
+  ```
+  
\ No newline at end of file
diff --git a/class-10/lab/README.md b/class-10/lab/README.md
new file mode 100644
index 0000000..892d543
--- /dev/null
+++ b/class-10/lab/README.md
@@ -0,0 +1,98 @@
+# Advanced Topics
+
+## Overview
+
+It can be costly to hit an API over and over. For today's lab, you will create an object in your server code to hold the API response data for your proxied queries. That way your back end can first check to see if you already have information about a given city and, if you do, send you the data directly from storage object, without concerns of being rate-limited by the API providers.
+
+## Resources
+
+[Yelp API Docs](https://www.yelp.com/developers/documentation/v3/business_search){:target="_blank"}
+
+## Process
+
+For every lab in this module, you will have a new partner. You and your new partner(s) will spend the first 30 minutes reviewing each other's code from the previous lab and planning out an approach to this lab's work on a whiteboard.
+
+1. Do a formal code review of each person's code (10 minutes each).
+   1. Open your partner's GitHub pull request on your laptop.
+   1. Identify an area in the code that:
+      1. you don't understand
+      1. or seems overly complex
+      1. or you see a way to improve
+      1. or you want more information on
+      1. or you really like or think is interesting
+   1. Add kind comments or questions inline using the GitHub review feature.
+1. Draw the web request-response cycle for the current lab tasks (about 10 minutes).
+   1. Document the data flow: identify inputs and outputs for each part of the cycle.
+   1. Outline the functions that support this data flow.
+   1. Be sure to include these drawings in your README.md.
+
+You will then work independently for the rest of the day, implementing your plan, coding in your own repository, submitting your own pull request.
+
+### Workflow
+
+- We will be using the [Trello](https://trello.com/home){:target="_blank"} project management tool for the duration of this project.
+- To maximize your experience with Trello, you should create a free Trello account by clicking on the `Sign Up` button.
+- After creating an account, go to the [City Explorer Trello Board](https://trello.com/b/Ajj9Cbac){:target="_blank"}, open the "... Show Menu" link, click the "... More" link, and then click "Copy Board". Before you create it, be sure to "Change" from Private to "Public" (and click "Yes, Make Board Public") so your instructional team can see your work. Now, click "Create" to add a copy to your personal account.
+- This Trello board contains all of the features required to complete this lab assignment.
+- Review the user stories and analyze the feature requests and requirements in the lab.
+- Within each story, note the acceptance criteria ("Given ... When ... Then...") and the checklist of feature tasks. Be careful to execute tasks in order as they are often dependencies of one another.
+- Throughout the lab time, check off tasks as you complete them, and move the story cards through the workflow.
+
+### Documentation
+
+You must have a complete `README.md` for both your server and your website repositories.
+
+_Your `README.md` must include:_
+
+```md
+# Project Name
+
+**Author**: Your Name Goes Here
+**Version**: 1.0.0 (increment the patch/fix version number if you make more commits past your first submission)
+
+## Overview
+<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for this class. (i.e. What's your problem domain?) -->
+
+## Getting Started
+<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->
+
+## Architecture
+<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->
+
+## Change Log
+<!-- Use this area to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an example:
+
+01-01-2001 4:59pm - Application now has a fully-functional express server, with a GET route for the location resource. -->
+
+## Credit and Collaborations
+<!-- Give credit (and a link) to other people or resources that helped you build this application. -->
+```
+
+### Time Estimates
+
+For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```markdown
+Name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab, according to the Trello cards.
+1. Create a PR back to the `main` branch of your repository, showing ALL your work, and merge it cleanly.
+1. On Canvas, submit a link to your PR. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest code.
+    - A link to your public Trello board.
+    - A question within the context of today's lab assignment.
+    - An observation about the lab assignment, or related 'Ah-hah!' moment.
+    - How long you spent working on this assignment.
diff --git a/class-10/lab/starter-code/modules/cache.js b/class-10/lab/starter-code/modules/cache.js
new file mode 100644
index 0000000..70dd7a2
--- /dev/null
+++ b/class-10/lab/starter-code/modules/cache.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = { };
diff --git a/class-10/lab/starter-code/modules/weather.js b/class-10/lab/starter-code/modules/weather.js
new file mode 100644
index 0000000..468b8b5
--- /dev/null
+++ b/class-10/lab/starter-code/modules/weather.js
@@ -0,0 +1,40 @@
+'use strict';
+
+let cache = require('./cache.js');
+
+module.exports = getWeather;
+
+function getWeather(latitude, longitude) {
+  const key = 'weather-' + latitude + longitude;
+  const url = `http://api.weatherbit.io/v2.0/forecast/daily/?key=${WEATHER_API_KEY}&lang=en&lat=${lat}&lon=${lon}&days=5`;
+
+  if (cache[key] && (Date.now() - cache[key].timestamp < 50000)) {
+    console.log('Cache hit');
+  } else {
+    console.log('Cache miss');
+    cache[key] = {};
+    cache[key].timestamp = Date.now();
+    cache[key].data = axios.get(url)
+    .then(response => parseWeather(response.data));
+  }
+  
+  return cache[key].data;
+}
+
+function parseWeather(weatherData) {
+  try {
+    const weatherSummaries = weatherData.data.map(day => {
+      return new Weather(day);
+    });
+    return Promise.resolve(weatherSummaries);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+}
+
+class Weather {
+  constructor(day) {
+    this.forecast = day.weather.description;
+    this.time = day.datetime;
+  }
+}
diff --git a/class-10/lab/starter-code/server.js b/class-10/lab/starter-code/server.js
new file mode 100644
index 0000000..52bd828
--- /dev/null
+++ b/class-10/lab/starter-code/server.js
@@ -0,0 +1,22 @@
+'use strict';
+
+require('dotenv');
+const express = require('express');
+const cors = require('cors');
+
+const weather = require('./modules/weather.js');
+const app = express();
+
+app.get('/weather', weatherHandler);
+
+function weatherHandler(request, response) {
+  const { lat, lon } = request.query;
+  weather(lat, lon)
+  .then(summaries => response.send(summaries))
+  .catch((error) => {
+    console.error(error);
+    response.status(200).send('Sorry. Something went wrong!')
+  });
+}  
+
+app.listen(process.env.PORT, () => console.log(`Server up on ${process.env.PORT}`));
diff --git a/class-11/.DS_Store b/class-11/.DS_Store
new file mode 100644
index 0000000..1286a06
Binary files /dev/null and b/class-11/.DS_Store differ
diff --git a/class-11/DISCUSSION.md b/class-11/DISCUSSION.md
new file mode 100644
index 0000000..8583d3d
--- /dev/null
+++ b/class-11/DISCUSSION.md
@@ -0,0 +1,48 @@
+# Readings: Mongo and Mongoose
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[nosql vs sql](https://www.thegeekstuff.com/2014/01/sql-vs-nosql-db/?utm_source=tuicool){:target="_blank"}
+
+1. Fill in the chart below with five differences between SQL and NoSQL databases:
+
+   | SQL    | NoSQL |
+   | ----------- | ----------- |
+   |             |             |
+   |             |             |
+   |             |             |
+   |             |             |
+
+   1. What kind of data is a good fit for an SQL database?
+   1. Give a real world example.
+   1. What kind of data is a good fit a NoSQL database?
+   1. Give a real world example.
+   1. Which type of database is best for hierarchical data storage?
+   1. Which type of database is best for scalability?
+
+## Videos
+
+[sql vs nosql](https://www.youtube.com/watch?v=ZS_kXvOeQ5Y){:target="_blank"} (Video)
+
+  1. What does SQL stand for?
+  1. What is a relational database?
+  1. What type of structure does a relational database work with?
+  1. What is a 'schema'?
+  1. What is a NoSQL database?
+  1. How does it work?
+  1. What is inside of a Mongo database?
+  1. Which is more flexible - SQL or MongoDB? and why.
+  1. What is the disadvantage of a NoSQL database?
+
+## Bookmark and Review
+
+- [mongoose api](https://mongoosejs.com/docs/api.html#Model){:target="_blank"}
+- [React Router](https://reactrouter.com/web/api/BrowserRouter){:target="_blank"}
+
+<!-- ## Additional Resources
+
+PLACEHOLDER -->
diff --git a/class-11/README.md b/class-11/README.md
new file mode 100644
index 0000000..1245699
--- /dev/null
+++ b/class-11/README.md
@@ -0,0 +1,106 @@
+# Mongo, Mongoose and Data Modeling
+
+## Overview
+
+Today is the first day of our new project, a mobile-only book collection. You will be gradually working towards a full-scale application, complete with an express server, persistence in a Mongo database, authentication, and the ability to view, add, update and delete books from your React front end.
+
+To start, we will introduce Mongodb and Mongoose. We will create data models and hard code some data to store in our database so that our front end can retrieve that data. We will introduce `CRUD` and focus on the `R`:`READ`.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- Mongo, Mongoose, Data Modeling
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- CRUD
+- MONGO
+- Mongoose
+- ORM
+- GET
+
+#### Execute
+
+- Be able to create a data model or schema
+- Be able to set up a Mongo database using Mongoose
+- Be able to retrieve all of the entries from a Mongo database using Mongoose
+
+## Notes
+
+1. What does the R stand for in CRUD?
+
+1. What is an ORM?
+
+1. How are Mongo and Mongoose related?
+
+1. Why do we need to use Mongoose at all?
+
+1. Where does Mongo live?
+
+1. Mongoose:
+
+- step 1: Bring in Mongoose
+
+  ```javaScript
+  const mongoose = require('mongoose');
+  // making a database called cats-database
+  mongoose.connect('mongodb://localhost:27017/cats-database', {useNewUrlParser: true, useUnifiedTopology: true});
+
+  const db = mongoose.connection;
+  db.on('error', console.error.bind(console, 'connection error:'));
+  db.once('open', function() {
+    console.log('Mongoose is connected')
+  });
+  ```
+
+- step 2: Make a schema
+
+```javaScript
+const catSchema = new mongoose.Schema({
+  name: {type: String}
+});
+
+```
+
+- step 3: Make a model from the schema
+
+```javaScript
+const CatModel = mongoose.model('cat-collection', catSchema);
+```
+
+- step 4: Create and save a record
+
+```javaScript
+const fluffy = new CatModel({name:'fluffy'});
+fluffy.save();
+```
+
+- step 5: Gets all the records from the database
+
+```javaScript
+  CatModel.find((err, cat) => {
+    if(err) return console.error(err);
+    console.log({cat})
+  });
+```
+
+- Gets the record where the name is 'fluffy'
+
+```javaScript
+  CatModel.find({name:'fluffy'}, (err, cat) => {
+    if(err) return console.error(err);
+    console.log({cat})
+  });
+```
+
+1. What resources can I use to help me with my lab and to learn more?
+[mongoose](https://mongoosejs.com/docs/)
diff --git a/class-11/lab/README.md b/class-11/lab/README.md
new file mode 100644
index 0000000..5953841
--- /dev/null
+++ b/class-11/lab/README.md
@@ -0,0 +1,114 @@
+# Building CRUD apps with MongoDB
+
+## Overview - Can of Books App
+
+Books are life-changing. They have the power to enlighten, educate, entertain, heal, and help us grow. Throughout this module, you'll create a small app to track what books have impacted you, and what's recommended to read next.
+
+Web applications essentially all work by managing data related to "resources". The resources that an app cares about can be just about anything: a product for sale, an uploaded photo, a review, a bit of weather data... whatever it is that gets stored in a database. When the app provides the interface to create, read, update, and delete a resource, we refer to that as a CRUD app. Over the next few labs, you will build an app that has books as a resource.
+
+For today's assignment, you will READ book data by connecting your front-end React app to a back-end Express server. Your Express server will connect to a Mongo database. You will need to make a "schema" in your back-end code to model how you want your data to look. You will then populate your database with "seed" data—some of your favorite books. When the front end makes a request to your server, your server will query the database and respond with all of the results from the database. Your front end will display these results.
+
+## Process: Professional Pairing Practice
+
+Much of the work you will be doing in the industry will be in pairs. In order to best prepare you for this, you will be working with the same partner all week on this book app project.
+
+Before you begin to even think about your application, take at least 30 minutes to make a team agreement with your partner. This is an essential step to ensure a peaceful and productive week. You MUST answer the following questions in your agreement and include it in your README's "Collaboration" section:
+
+### Logistical
+
+- What hours will you be available to communicate?
+- What platform will you use to communicate (ie. Slack, phone ...)?
+- How often will you take breaks?
+- What is your plan if you start to fall behind?
+
+### Cooperative
+
+- Make a list of each parson's strengths.
+- How can you best utilize these strengths in the development of your application?
+- In what areas do you each want to develop greater strength?
+- Knowing that every person in your team needs to understand the code, how do you plan to approach the day-to-day development?
+
+### Conflict Resolution
+
+- What will your team do if one person is pulling all the weight while the other person is not contributing?
+- What will your team do if one person is taking over the project and not letting the other member contribute?
+- How will you approach each other and the challenge of building an application knowing that it is impossible for two people to be at the exact same place in understanding and skill level?
+
+## Feature Tasks — READ of CRUD
+
+Tasks for this lab are tracked in user stories on a Trello board.
+
+Your instructor will supply you with a link to the Trello board for you to copy (see instructions below).
+
+## Workflow
+
+- We will be using the [Trello](https://trello.com/home){:target="_blank"} project management tool for the duration of this project.
+- After signing in to your account, go to the [Can of Books Trello board](https://trello.com/b/ns9ZCHQL/module-3-can-of-books){:target="_blank"}
+- Open the "... Show Menu" link, click the "... More" link, and then click "Copy Board".
+- Before you create it, be sure to "Change" from Private to "Public" (and click "Yes, Make Board Public") so your instructional team can see your work. Now, click "Create" to add a copy to your personal account.
+- This Trello board contains all of the features required to complete each lab assignment.
+- Review the user stories and analyze the feature requests and requirements in the lab.
+- Within each story, note the acceptance criteria ("Given ... When ... Then...") and the checklist of feature tasks. Be careful to execute tasks in order as they are often dependencies of one another.
+- Throughout the lab time, check off tasks as you complete them, and move the story cards through the workflow.
+
+## Documentation
+
+You must have a complete `README.md` for your repository.
+
+_Your `README.md` must include:_
+
+```md
+# Project Name
+
+**Author**: Team Member Names Goes Here
+**Version**: 1.0.0 (increment the patch/fix version number if you make more commits past your first submission)
+
+## Overview
+<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for this class. (i.e. What's your problem domain?) -->
+
+## Getting Started
+<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->
+
+## Architecture
+<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->
+
+## Change Log
+<!-- Use this area to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an example:
+
+01-01-2001 4:59pm - Application now has a fully-functional express server, with a GET route for the location resource. -->
+
+## Estimates
+<!-- See below -->
+
+## Credit and Collaborations
+<!-- Give credit (and a link) to other people or resources that helped you build this application. -->
+```
+
+## Time Estimates
+
+For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```markdown
+Name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab, according to the Trello cards.
+1. Create a PR back to the `main` branch of your repository, showing ALL your work, and merge it cleanly.
+1. On Canvas, submit a link to your PR. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest code.
+    - A link to your public Trello board.
+    - A question within the context of today's lab assignment.
+    - An observation about the lab assignment, or related 'Ah-hah!' moment.
+    - How long you spent working on this assignment.
diff --git a/class-11/whiteboard-diagrams/simple-wrrc.png b/class-11/whiteboard-diagrams/simple-wrrc.png
new file mode 100644
index 0000000..07fdb79
Binary files /dev/null and b/class-11/whiteboard-diagrams/simple-wrrc.png differ
diff --git a/class-12/.DS_Store b/class-12/.DS_Store
new file mode 100644
index 0000000..5e6623e
Binary files /dev/null and b/class-12/.DS_Store differ
diff --git a/class-12/DISCUSSION.md b/class-12/DISCUSSION.md
new file mode 100644
index 0000000..dde4d7f
--- /dev/null
+++ b/class-12/DISCUSSION.md
@@ -0,0 +1,40 @@
+# Readings: CRUD
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[Status Codes Based On REST Methods](https://www.moesif.com/blog/technical/api-design/Which-HTTP-Status-Code-To-Use-For-Every-CRUD-App/)
+
+1. In your own words, describe what each group of status code represents:
+
+   - 100's =
+   - 200's =
+   - 300's =
+   - 400's =
+   - 500's =
+
+1. What is a status code 202?
+1. What is a status code 308?
+1. What code would you use if an update didn't return data to a client?
+1. What code would you use if a resource used to exist but no longer does?
+1. What is the 'Forbidden' status code?
+
+## Videos
+
+[Build A REST API With Node.js, Express, & MongoDB - Quick](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw) - First 20 minutes
+
+1. Why do we need to pull our MongoDB database string out of our server and put it into our .env?
+1. What is middleware?
+1. What does `app.use(express.json())` do?
+1. What does the `/:id` mean in a route?
+1. What is the difference between `PUT` and `PATCH`?
+1. How do you make a default value in a schema?
+1. What does a `500` error status code mean?
+1. What is the difference between a status `200` and a status `201`?
+
+<!-- ### Bookmark and Review
+
+PLACEHOLDER -->
diff --git a/class-12/README.md b/class-12/README.md
new file mode 100644
index 0000000..bb7e224
--- /dev/null
+++ b/class-12/README.md
@@ -0,0 +1,161 @@
+# Creating and Deleting Resources
+
+## Overview
+
+Today we will focus on the `C` and the `D` of the `CRUD`:`CREATE` and `DELETE`. We will discuss how to send a POST request and save that information in a Mongo database and a DELETE request to remove information from the database.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- Creating a resource
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- POST
+- DELETE
+- params
+- request.body
+- middleware
+
+#### Execute
+
+- Be able to send a post request from the front end to a server
+- Be able to instantly update the results and have those results persist on reload
+- Be able to send a delete request from the front end to the server
+- Understand the need for a body parser
+
+## Helpful Resources
+
+- [mongoose queries](https://mongoosejs.com/docs/api.html#model_Model.findOneAndDelete)
+
+## Notes
+
+1. What does the C and D stand for in CRUD?
+
+1. What are three ways to send information from the front-end to the back-end?
+
+1. Of the three ways to send information, which two are send in the URL?
+
+1. How to send information from the front-end to the back-end using Axios:
+
+**QUERY**
+
+  ```javaScript
+  const randomString = 'info that I want to send to the server';
+  const SERVER = 'http://localhost:3001';
+
+  axios.get(`${SERVER}`, { params, { data: randomString }})
+  ```
+
+- queries look like this: `http://localhost:3000/?city=seattle`
+- they come after the question mark
+- they are made up of key/value pairs separated by an equal sign
+- you can have multiple queries: `http://localhost:3000/?city=seattle&state=wa`
+- sent on the request.query
+  - this will be the `request.query.data`
+
+------------------------
+
+**PARAMS**
+
+```javaScript
+const id = 12;
+const SERVER = 'http://localhost:3001`;
+
+// this will get a single record because we are doing an app.get with an id
+axios.get(`${SERVER}/${id}`)
+
+// this will delete a single record because we are doing an app.delete with an id
+axios.delete(`${SERVER}/${id}`})
+```
+
+- params look like this: `http://localhost:3000/12`
+- they come before any queries
+- the server defines what the key is for the params like this: `app.get('/someRoute/:id', callBack)`
+  - That `:id` can be called anything - it is a variable (ie `app.get('/someRoute/:banana', callback)`)
+- The value of the params is what comes in in the URL in that position. So, in this case, the key is `id` and the value is `12`. 
+- sent on the request.params
+  - this will be `request.params.id`
+
+------------------------
+
+**BODY**
+
+```javaScript
+const newRecord = {
+  name: 'bob',
+  age: 104
+}
+const SERVER = 'http://localhost:3001';
+
+// this will create a new record because that is what POST does
+axios.post(`${SERVER}`, { data: newRecord });
+```
+
+- sent on the request.body
+- will need to parse the body on server in order to be able to read this information. You do this by adding this line of code to your server: `app.use(express.json());`
+  - Without this line of code, the request.body will come in as undefined
+
+1. Server Routes
+
+**CREATE**
+
+  ```javaScript
+  app.post('/someRoute', callback);
+
+  callback(request, response) {
+    // gets information from the BODY of the request object
+    const newRecord = request.body.newRecord
+
+    // create a record and save
+    const bob = new Model(name: request.body.newRecord.name, age: request.body.newRecord.age);
+    bob.save()
+  }
+  ```
+
+**DELETE**
+
+  ```javaScript
+  app.delete('/someRoute/:id', callback);
+
+  callback(request, response) {
+    // get the id of the record to delete from the params
+    const id = request.params.id;
+
+    // find that record and delete
+    Model.findOneAndDelete(id);
+  }
+  ```
+
+- if we need to find a user first and then delete a book ...
+
+  ```javaScript
+  app.delete('/someRoute/:index', callback);
+
+  callback(request, response) {
+    // get the index of the book
+    const index = request.params.index;
+    // get the email from the query (need to make sure we send it in the front-end)
+    const email = request.query.email;
+
+    // find the user by email
+    Model.findOne({ email }, (err, person) => {
+      if(err) console.error(err);
+      // now that we found the user, delete the book using the index
+      const newBookArray = person.books.splice(index, 1);
+      // assign the new book Array to the user
+      person.books = newBookArray;
+      // save it
+      person.save();
+    })
+  }
+  ```
diff --git a/class-12/lab/README.md b/class-12/lab/README.md
new file mode 100644
index 0000000..5b02bf2
--- /dev/null
+++ b/class-12/lab/README.md
@@ -0,0 +1,68 @@
+# Resource Create and Delete
+
+## Overview
+
+Today you will add the functionality for the user to create a book resource in the database or delete one. A book will be created from a form in React, and sent to the server where it will be saved into the database, and then returned to the front end to be displayed in the list of favorite books. You will then be able to delete that book with a click of a button, to have it instantly removed from the front end, with a request sent to back end for removal.
+
+## Feature Tasks - CREATE and DELETE of CRUD
+
+See your team's Trello board for this lab's feature tasks.
+
+## Documentation
+
+You must have a complete `README.md` for your repository.
+
+_Your `README.md` must include:_
+
+```md
+# Project Name
+
+**Author**: Team Member Names Goes Here
+**Version**: 1.0.0 (increment the patch/fix version number if you make more commits past your first submission)
+
+## Overview
+<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for this class. (i.e. What's your problem domain?) -->
+
+## Getting Started
+<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->
+
+## Architecture
+<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->
+
+## Change Log
+<!-- Use this area to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an example:
+
+01-01-2001 4:59pm - Application now has a fully-functional express server, with a GET route for the location resource. -->
+
+## Credit and Collaborations
+<!-- Give credit (and a link) to other people or resources that helped you build this application. -->
+```
+
+## Time Estimates
+
+For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```markdown
+Name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab, according to the Trello cards.
+1. Create a PR back to the `main` branch of your repository, showing ALL your work, and merge it cleanly.
+1. On Canvas, submit a link to your PR. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest code.
+    - A link to your public Trello board.
+    - A question within the context of today's lab assignment.
+    - An observation about the lab assignment, or related 'Ah-hah!' moment.
+    - How long you spent working on this assignment.
diff --git a/class-13/.DS_Store b/class-13/.DS_Store
new file mode 100644
index 0000000..11e8d4f
Binary files /dev/null and b/class-13/.DS_Store differ
diff --git a/class-13/DISCUSSION.md b/class-13/DISCUSSION.md
new file mode 100644
index 0000000..a44b971
--- /dev/null
+++ b/class-13/DISCUSSION.md
@@ -0,0 +1,19 @@
+# Readings: More CRUD
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+[CRUD Basics](https://medium.com/geekculture/crud-operations-explained-2a44096e9c88){:target="_blank"}
+
+   1. Which HTTP method would you use to update a record through an API?
+   1. Which REST methods require an ID parameter?
+
+### Videos
+
+[Speed Coding: Building a CRUD API](https://www.youtube.com/watch?v=EzNcBhSv1Wo){:target="_blank"} (*Watch a Twitch streamer code an Express API in 20 minutes!*)
+
+  1. What's the relationship between REST and CRUD?
+  1. If you had to describe the process of creating a RESTful API in 5 steps, what would they be?
diff --git a/class-13/README.md b/class-13/README.md
new file mode 100644
index 0000000..a3a0163
--- /dev/null
+++ b/class-13/README.md
@@ -0,0 +1,142 @@
+# Updating Resources
+
+## DEI Reminder
+
+In our next class we will discuss Diversity, Equity and Inclusion.  Be sure to complete [the reading assignment](https://codefellows.github.io/code-301-guide/curriculum/class-14/DISCUSSION) before class begins in order to achieve full credit for the activity.
+
+## Overview
+
+Today we do the final step in full CRUD functionality for our database. This step is to implement the ability to update records that exist in our database.
+
+## Class Outline
+
+- Warm-up exercise
+- Review code challenges
+- Code review of lab assignment
+- Updating Resources
+- Code demo
+- Lab preview
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- UPDATE
+- PUT
+
+#### Execute
+
+- Be able to update a resources in a mongo database
+- Be able to update a resource instantly in a React application and have that resource state persist on reload
+
+## Notes
+
+1. Why do we need to talk about Diversity and Inclusion?
+
+1. What does the U stand for in CRUD?
+
+1. How do we find a record by id and update it in Mongoose?
+
+1. Sending an axios request to update a record:
+
+  ```javaScript
+  const SERVER = 'http://localhost:3001';
+  // id of the record to update
+  const id = 2; 
+  // the entire record with the updated information
+  const updatedRecord = {name: 'bobby', age: 105}; 
+
+  axios.put(`${SERVER}/${id}`, { recordToUpdate: updatedRecord });
+  ```
+
+1. Updating a record server side:
+
+  ```javaScript
+  app.put('/someRoute/:id', callback);
+
+  callback(request, response) {
+    const record = request.body.recordToUpdate;
+    const id = request.query.params.id;
+
+    Model.findOneAndUpdate(id, record);
+  }
+  ```
+
+1. Updating a record server side when the record is nested inside of a user object (like the books in the user)
+
+  ```javaScript
+  app.put('/someRoute/:index', callback);
+
+  callback(request, response) {
+    const email = request.body.email; // send the email in the body as well as the record
+    const record = request.body.recordToUpdate;
+    const index = request.query.params.index;
+
+    Model.findOne({ email }, (err, person) => {
+      if(err) console.error(err);
+      // now that we have the user, we need to replace the record
+      const newBooks = person.books.splice(index, 1, record);
+      // replace the books array with the new books array
+      person.books = newBooks;
+      // save the updated person in the DB
+      person.save()
+    })
+  }
+  ```
+
+1. Deploying Mongo to Heroku!
+
+### Hosted Mongo Databases: Atlas
+
+While you can run Mongo on your own machines, it's quite common to run an instance of Mongo in the cloud so that you can take advantage of better hardware, more memory and higher speed networks. Mongo offers a hosted cloud database service called "Atlas" ... once you've got this setup, it's easy to connect your API servers from anywhere in the world to use it.
+
+1. Sign Up
+1. Setup the organization
+   - Name your organization and project
+   - These can be whatever you want to call them
+   - Set Preferred Language (Javascript)
+1. Pick the "Free" (Shared Cluster) option
+1. Create Cluster
+   - Choose AWS
+   - Choose the closest region to your location (i.e. Oregon)
+1. Create a DB User
+   - Click the "Database Access" link
+   - Add a new user
+     - Choose Password Authentication
+     - Choose a username and password
+     - For access rights, choose "Atlas Admin"
+1. Enable Network Access
+   - Click Network Access Button
+   - Click "Add IP Address"
+   - Choose the "Allow Access from Anywhere" option
+   - Click "Confirm"
+1. Get your connection string
+   - Click "Clusters" button on the left
+   - Click on the "Connect" button on the cluster screen
+   - To connect to your new database with the command line:
+     - Choose the "Connect with Mongo Shell" option
+     - Copy out the connection string
+     - This will look something like this:
+     - `mongo "mongodb+srv://cluster0.xtrut.mongodb.net/<dbname>" --username dba`
+     - Replace `<dbname>` with the name of the database you want to use for your application, for example 'people'
+   - To connect your Node or Express application:
+     - Choose the "Connect your Application" option
+     - This will look something like this:
+     - `mongodb+srv://dba:<password>@cluster0.xtrut.mongodb.net/<dbname>?retryWrites=true&w=majority`
+     - Replace `<password>` with the password you created earlier
+     - Replace `<dbname>` with the name of the database you want to use for your application, for example 'people'
+     - Use this as  `MONGODB_URI` in your .env file or at Heroku when you deploy
+
+![Account Setup](assets/atlas-setup.png)
+
+![Choose Plan](assets/atlas-choose-plan.png)
+
+![Cluster](assets/atlas-cluster-screen.png)
+
+![Network Options](assets/atlas-network.png)
+
+![Connect](assets/atlas-connect-options.png)
+
+![Heroku Setup](assets/heroku-mongo.png)
diff --git a/class-13/lab/README.md b/class-13/lab/README.md
new file mode 100644
index 0000000..21a9427
--- /dev/null
+++ b/class-13/lab/README.md
@@ -0,0 +1,69 @@
+# Update a Resource
+
+## Overview
+
+Today you will complete your full stack CRUD application by adding an UPDATE route. You will add a button to each book that, when clicked, will display a form where the user can change information about that book. That information will be sent to the server where it will replace what's already in the database for that record.
+
+## Feature Tasks — UPDATE of CRUD
+
+See your team's Trello board for this lab's feature tasks.
+
+## Documentation
+
+You must have a complete `README.md` for your repository.
+
+_Your `README.md` must include:_
+
+```md
+# Project Name
+
+**Author**: Team Member Names Goes Here
+**Version**: 1.0.0 (increment the patch/fix version number if you make more commits past your first submission)
+
+## Overview
+<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for this class. (i.e. What's your problem domain?) -->
+
+## Getting Started
+<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->
+
+## Architecture
+<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->
+
+## Change Log
+<!-- Use this area to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an example:
+
+01-01-2001 4:59pm - Application now has a fully-functional express server, with a GET route for the location resource. -->
+
+## Credit and Collaborations
+<!-- Give credit (and a link) to other people or resources that helped you build this application. -->
+```
+
+## Time Estimates
+
+For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```markdown
+Name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab, according to the Trello cards.
+1. Create a PR back to the `main` branch of your repository, showing ALL your work, and merge it cleanly.
+1. On Canvas, submit a link to your PR. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest front-end code.
+    - A pull request to the your server code.
+    - A link to your public Trello board.
+    - A question within the context of today's lab assignment.
+    - An observation about the lab assignment, or related 'Ah-hah!' moment.
+    - How long you spent working on this assignment.
diff --git a/class-14/.DS_Store b/class-14/.DS_Store
new file mode 100644
index 0000000..f7dc6f3
Binary files /dev/null and b/class-14/.DS_Store differ
diff --git a/class-14/DISCUSSION.md b/class-14/DISCUSSION.md
new file mode 100644
index 0000000..1a65f75
--- /dev/null
+++ b/class-14/DISCUSSION.md
@@ -0,0 +1,22 @@
+# Diversity & Inclusion in the Tech Industry
+
+Below you will find some reading material that supports today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+Consider the history: [That Time When Women Stopped Coding](https://www.npr.org/sections/money/2014/10/21/357629765/when-women-stopped-coding){:target="_blank"}
+
+  1. What occurred during the same time as the beginning of the decline of women in computer science?
+  1. Why does it matter that males had been playing on computers growing up?
+
+## Videos
+
+Review the data: [Employee breakdown of key technology companies](https://informationisbeautiful.net/visualizations/diversity-in-tech/){:target="_blank"}
+
+Ask the question: [Why diversity matters to your tech company](https://www.usatoday.com/story/tech/columnist/2015/07/21/why-diversity-matters-your-tech-company/30419871/){:target="_blank"}
+
+  1. When are diversity efforts most successful?
+  1. Why do diverse companies perform better?
+  1. Give an example of how a diverse company can serve a diverse user base or vise-versa.
diff --git a/class-14/README.md b/class-14/README.md
new file mode 100644
index 0000000..86986b2
--- /dev/null
+++ b/class-14/README.md
@@ -0,0 +1,24 @@
+
+# DEI and 301 Final Exam
+
+## Overview
+
+We begin class with a discussion on Diversity, Equity, and Inclusion in technology. Take some time to think about what a diverse workplace and team would look like for you and what you think the benefits of that type of team would be.
+
+The Code 301 final exam will become available today and is due at the end of 4 hours. This exam also serves as the Code 401 entrance exam. However, it is a pass/fail graded portion of this course, regardless of your intent to advance to a Code 401 course.
+
+The exam is open book, open Google, open Stack Overflow, whatever resources you want to use, but it must be completed individually. You may not get help from anyone else, except from your instructor. The exam is designed to cover the full range of what was taught in this course. The intent is to measure not your memorization skills, but your resourcefulness and your ability to adapt and problem-solve. Give yourself adequate time for the exam. 
+
+## Class Outline
+
+- Discussion on diversity, inclusion, equity, and belonging in the tech industry
+- Final exam prep
+- Exam administered
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- Diversity and Inclusion
diff --git a/class-14/assessment.md b/class-14/assessment.md
new file mode 100644
index 0000000..0f3ca17
--- /dev/null
+++ b/class-14/assessment.md
@@ -0,0 +1,132 @@
+# Code 301 Final Assessment
+
+This assessment comes in 2 parts (applications), a **client** and a **server** that together, will allow a user to create a list of items.
+
+Each application is intended to be operated and tested independently, while also working together.
+
+- The server, written in express, will be the API that the react application uses for data retrieval and storage.
+
+## Feature Tasks
+
+- Fix the bugs in the server.
+- Fix the bugs in the client.
+- Add **DELETE** functionality on both the server and client.
+  - The client app has a "Delete Button" that is there but not wired up. Wire it up.
+- Change the styling of the items list.
+
+### The API Server
+
+Located in the `/server` folder, this is an express server designed to perform CRUD (Create, Read, Update, Delete) operations on a mongo/mongoose data model: `items`.
+
+> However, this server is broken. Your task is to fix the bugs and add the missing features.
+
+How will you know that you've found them all? The tests will all pass!
+
+**Note:** this server does not require you to install or configure MongoDB, that will be handled automatically.
+
+#### Server: Running the tests
+
+- Make sure the server is **NOT** running.
+- From the root directory of the server in the terminal, run the command `npm test`.
+- You should receive a list of the tests that are passing and failing just like you have seen in your code challenges.
+
+#### Server: Getting Started
+
+- Create an empty **private** repo on GitHub.
+- Invite your instructor to the repo.
+- Connect it to your server directory:
+  - run `git init -b main`
+  - run `git remote add origin <url-of-the-repo-you-just-created>`
+  - A/C/P
+
+- Install your dependencies.
+- Run the tests.
+  - with the server turned off run the command: `npm test`
+- A "bug" is a defect or missing feature. Find the bugs and fix them.
+  - You will know you have found the bugs when the tests all pass.
+- Deploy to Heroku.
+
+#### Server: Notes
+
+- You may inspect the tests, but do not change them.
+- Once you have this working, keep it running. The React app will be using it to save and retrieve data.
+- If you are using an Apple device with the M1 chip and you get an error message about the Mongo Memory Server, you may need to run the following command in your terminal shell before attempting to run the final exam server:
+`export MONGOMS_DOWNLOAD_URL=https://fastdl.mongodb.org/osx/mongodb-osx-ssl-x86_64-4.0.25.tgz`
+
+### The React App
+
+The React application will allow a user to:
+
+- Display current items.
+- Add a new item.
+- Delete an item from the list.
+
+#### React App: Getting Started
+
+- Create an empty **private** repo on GitHub.
+- Invite your instructor to the repo.
+- Connect it to your React app directory:
+  - run `git init -b main`
+  - run `git remote add origin <url-of-the-repo-you-just-created>`
+  - A/C/P
+
+- Install your dependencies.
+- Run the tests.
+  - with the React App turned off run `npm test`
+- A "bug" is defect or missing feature. Find the bugs and fix them
+  - You will know you have found the bugs when the tests all pass
+- Deploy to Netlify
+
+#### React App: Change Styling
+
+- Using React Bootstrap, use `Accordion` for showing the items in the list instead of `Table`.
+  - Use `Accordion` in expected fashion.
+  - Remove `Table` related code.
+
+#### React App Notes
+
+- Throughout the application code, you will see that some components/markup have a prop called **data-testid** that look like the below. **Do not remove or change these, as they are required for the tests and grading**.
+  - ```data-testid="---"```
+- When you are running the application and manually testing in the browser, it'll use your server and will not operate unless it is running.
+- However, it's not sufficiently set up at first to reach the API.
+  - You'll need to properly configure the app in order to reach the server.
+- When you are running the tests with `npm test` the application will simulate having a server, so it's not necessary to have your server up while executing the tests.
+
+## Submitting this assignment
+
+- Submit the URLs to:
+  - GitHub repositories for both your frontend and backend code.
+  - URLs to both your deployed frontend and backend applications.
+
+## Rubric
+
+- 100 points total.
+- 80 required to pass.
+
+### Back End - 35 Points
+
+- 05 points: server tests other than delete passing.
+- 25 points: delete test passing.
+- 05 points: deployed to Heroku.
+
+### Front End - 35 Points
+
+- 05 points: tests other than delete passing.
+- 25 points: delete test passing.
+- 05 points: deploy to Netlify.
+
+### Integration - 5 Points
+
+- 05 points: deployed Applications are properly configured to interoperate fully.
+
+### Styling - 25 Points
+
+- 15 points: functional use of Accordion component.
+- 10 points: removal of all Table related elements.
+
+## STRETCH GOALS
+
+No extra points, just the satisfaction of being stretchy.
+
+- Integrate Mongo Atlas so deployed server and client are fully functional.
+- Add Auth0
diff --git a/class-15/.DS_Store b/class-15/.DS_Store
new file mode 100644
index 0000000..fa58f16
Binary files /dev/null and b/class-15/.DS_Store differ
diff --git a/class-15/DISCUSSION.md b/class-15/DISCUSSION.md
new file mode 100644
index 0000000..474eac0
--- /dev/null
+++ b/class-15/DISCUSSION.md
@@ -0,0 +1,32 @@
+# Readings: Authentication
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+- [What is OAuth](https://www.csoonline.com/article/3216404/what-is-oauth-how-the-open-authorization-framework-works.html){:target="_blank"}
+
+  1. What is OAuth?
+  1. Give an example of what using OAuth would look like.
+  1. How does OAuth work? What are the steps that it takes to authenticate the user?
+  1. What is OpenID?
+
+- [Authorization and Authentication flows](https://auth0.com/docs/flows){:target="_blank"}
+
+  1. What is the difference between authorization and authentication?
+  1. What is Authorization Code Flow?
+  1. What is Authorization Code Flow with Proof Key for Code Exchange (PKCE)?
+  1. What is Implicit Flow with Form Post?
+  1. What is Client Credentials Flow?
+  1. What is Device Authorization Flow?
+  1. What is Resource Owner Password Flow?
+
+## Videos
+
+<!-- PLACEHOLDER -->
+
+## Bookmark and Review
+
+- [Auth0 for single page apps](https://auth0.com/docs/libraries/auth0-react){:target="_blank"}
diff --git a/class-15/README.md b/class-15/README.md
new file mode 100644
index 0000000..7a0192f
--- /dev/null
+++ b/class-15/README.md
@@ -0,0 +1,126 @@
+# Final Project Kick-off
+
+## Overview
+
+Today is the last day of formal lecture. It's time to add authentication to our app, so we know, with some level of confidence, who our users are.
+
+You will be assigned your project teams. For the next week of this course, you will be working with your assigned project team to build out your final project. On the last day of class, your group will present your project.
+
+## Class Outline
+
+- Authentication
+- Code demo
+- Lab preview
+- Review [final project requirements](./project-guidelines.md)
+
+## Learning Objectives
+
+### Students will be able to
+
+#### Describe and Define
+
+- Authentication
+- Authorization
+- Auth0
+- Understand Authentication - its uses and applications
+- Understand the concept of OAuth
+
+#### Execute
+
+- Be able to implement authentication using Auth0 in their React application
+
+## Helpful Resources
+
+[auth0](https://auth0.com/docs/libraries/auth0-react)
+
+## Notes
+
+1. The difference between Authentication and Authorization is...
+1. There are different types of authentication. Give an example of being authenticated using OAuth.
+1. What is the difference between OAuth and Auth0?
+1. What is Auth0? What are the requirements to use Auth0?
+1. How does Auth0 make sure you are who you say you are?
+1. LoginButton component:
+
+   ```javaScript
+   import React from "react";
+   import { useAuth0 } from "@auth0/auth0-react";
+
+   const LoginButton = (props) => {
+     const { loginWithRedirect } = useAuth0();
+
+     return <button onClick={() => loginWithRedirect()}>Log In</button>;
+   };
+
+   export default LoginButton;
+   ```
+
+1. LogOutButton component:
+
+   ```javaScript
+   import React from "react";
+   import { useAuth0 } from "@auth0/auth0-react";
+
+   const LogoutButton = () => {
+     const { logout } = useAuth0();
+
+     return (
+       <button onClick={() => logout({ returnTo: window.location.origin })}>
+         Log Out
+       </button>
+     );
+   };
+
+   export default LogoutButton;
+   ```
+
+1. IsLoadingAndError component - this should wrap everything
+
+   ```javaScript
+   import React from 'react';
+   import { withAuth0 } from '@auth0/auth0-react';
+
+   class IsLoadingAndError extends React.Component {
+     render() {
+       return(
+         this.props.auth0.isLoading ?
+           <div> Loading...</div>
+           :
+           this.props.auth0.error ?
+           <div>Oops... {this.props.auth0.error.message}</div>
+           :
+           this.props.children
+       )
+     }
+   }
+
+   export default withAuth0(IsLoadingAndError);
+   ```
+
+1. Profile component - this will show the user's information. There is more that we can display. Details can be found in the docs.
+
+   ```javaScript
+   import React from "react";
+   import { useAuth0 } from "@auth0/auth0-react";
+
+   const Profile = () => {
+     const { user, isAuthenticated, isLoading } = useAuth0();
+
+     if (isLoading) {
+       return <div>Loading ...</div>;
+     }
+
+     return (
+       isAuthenticated && (
+         <div>
+           <img src={user.picture} alt={user.name} />
+           <h2>{user.name}</h2>
+           <p>{user.email}</p>
+         </div>
+       )
+     );
+   };
+
+   export default Profile;
+
+   ```
diff --git a/class-15/lab/README.md b/class-15/lab/README.md
new file mode 100644
index 0000000..3b14bf6
--- /dev/null
+++ b/class-15/lab/README.md
@@ -0,0 +1,74 @@
+# User Authentication with Auth0
+
+## Overview
+
+Right now, books in your app aren't associated with who added them. Let's ensure only you can edit your books. To do this, we will need an authentication system to know a user is indeed who they say they are. But we don't want to deal with storing passwords... let's outsource it! Think about all the times you have signed up for an app using your Facebook or Google account. That is done through a process called OAuth. Essentially, the app allows "someone else" (an external identity "provider") to take care of making sure that you are who you say you are.
+
+In this lab, we are going to use a service called Auth0 that will handle most of the challenges of working with external identity providers. Your job will be to create React components to allow users to sign in via the Auth0 service. This service will then give you a secure `jsonwebtoken` or JWT (pronounced "jot").
+
+Once you have that hooked up, you will send that JWT (that essentially says that you are who you say you are) to your backend. You will use a library call `jsonwebtoken` on the server to open the JWT and will verify whether it is valid, and who the user is.
+
+You will be provided starter code libraries for both your React application and your Express server to aid you in this process. Your job in this lab will be to integrate these modules and components into your client and server applications, not to write this functionality from scratch.
+
+## Feature Tasks
+
+See your team's Trello board for this lab's feature tasks.
+
+## Documentation
+
+You must have a complete `README.md` for your repository.
+
+_Your `README.md` must include:_
+
+```md
+# Project Name
+
+**Author**: Team Member Names Goes Here
+**Version**: 1.0.0 (increment the patch/fix version number if you make more commits past your first submission)
+
+## Overview
+<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for this class. (i.e. What's your problem domain?) -->
+
+## Getting Started
+<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->
+
+## Architecture
+<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->
+
+## Change Log
+<!-- Use this area to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an example:
+
+01-01-2001 4:59pm - Application now has a fully-functional express server, with a GET route for the location resource. -->
+
+## Credit and Collaborations
+<!-- Give credit (and a link) to other people or resources that helped you build this application. -->
+```
+
+## Time Estimates
+
+For each of the lab features, make an estimate of the time it will take you to complete the feature, and record your start and finish times for that feature:
+
+```markdown
+Name of feature: ________________________________
+
+Estimate of time needed to complete: _____
+
+Start time: _____
+
+Finish time: _____
+
+Actual time needed to complete: _____
+```
+
+Add this information to your README.
+
+## Submission Instructions
+
+1. Complete your Feature Tasks for the lab, according to the Trello cards.
+1. Create a PR back to the `main` branch of your repository, showing ALL your work, and merge it cleanly.
+1. On Canvas, submit a link to your PR. Add a comment in your Canvas assignment which includes the following:
+    - A link to the deployed version of your latest code.
+    - A link to your public Trello board.
+    - A question within the context of today's lab assignment.
+    - An observation about the lab assignment, or related 'Ah-hah!' moment.
+    - How long you spent working on this assignment.
diff --git a/class-15/lab/starter-code/client/Auth/AuthButtons.js b/class-15/lab/starter-code/client/Auth/AuthButtons.js
new file mode 100644
index 0000000..d0bfa65
--- /dev/null
+++ b/class-15/lab/starter-code/client/Auth/AuthButtons.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+import Login from "./Login";
+import Logout from "./Logout";
+
+function AuthButtons() {
+
+  const {
+    isAuthenticated,
+  } = useAuth0();
+
+  return isAuthenticated ? <Logout /> : <Login />
+}
+
+export default AuthButtons;
diff --git a/class-15/lab/starter-code/client/Auth/Login.js b/class-15/lab/starter-code/client/Auth/Login.js
new file mode 100644
index 0000000..b39e357
--- /dev/null
+++ b/class-15/lab/starter-code/client/Auth/Login.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+function Login() {
+
+  const {
+    isAuthenticated,
+    loginWithRedirect,
+  } = useAuth0();
+
+  function handleLogin() {
+    loginWithRedirect();
+  }
+
+  return ! isAuthenticated &&
+    <button onClick={handleLogin}>Log in</button>
+  ;
+}
+export default Login;
diff --git a/class-15/lab/starter-code/client/Auth/Logout.js b/class-15/lab/starter-code/client/Auth/Logout.js
new file mode 100644
index 0000000..eeda59d
--- /dev/null
+++ b/class-15/lab/starter-code/client/Auth/Logout.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+function LogoutButton() {
+
+  const {
+    isAuthenticated,
+    logout
+  } = useAuth0();
+
+  function handleLogout() {
+    logout({ returnTo: window.location.origin });
+  }
+
+  return isAuthenticated &&
+      <button onClick={handleLogout}>Log out</button>
+    ;
+}
+
+export default LogoutButton;
diff --git a/class-15/lab/starter-code/server/auth/authorize.js b/class-15/lab/starter-code/server/auth/authorize.js
new file mode 100644
index 0000000..5a69431
--- /dev/null
+++ b/class-15/lab/starter-code/server/auth/authorize.js
@@ -0,0 +1,43 @@
+const jwt = require('jsonwebtoken'); // auth
+const jwksClient = require('jwks-rsa'); // auth
+
+// This is a special function for express called "Middleware"
+// We can simply "use()" this in our server
+// When a user is validated, request.user will contain their information
+// Otherwise, this will force an error
+function verifyUser(request, response, next) {
+
+  function valid(err, user) {
+    request.user = user;
+    next();
+  }
+
+  try {
+    const token = request.headers.authorization.split(' ')[1];
+    jwt.verify(token, getKey, {}, valid);
+  } catch (error) {
+    next('Not Authorized');
+  }
+}
+
+
+// =============== HELPER METHODS, pulled from the jsonwebtoken documentation =================== //
+//                 https://www.npmjs.com/package/jsonwebtoken                                     //
+
+// Define a client, this is a connection to YOUR auth0 account, using the URL given in your dashboard
+const client = jwksClient({
+  // this url comes from your app on the auth0 dashboard
+  jwksUri: process.env.JWKS_URI,
+});
+
+// Match the JWT's key to your Auth0 Account Key so we can validate it
+function getKey(header, callback) {
+  client.getSigningKey(header.kid, function (err, key) {
+    const signingKey = key.publicKey || key.rsaPublicKey;
+    callback(null, signingKey);
+  });
+}
+
+
+
+module.exports = verifyUser;
diff --git a/configs/.eslintrc.json b/configs/.eslintrc.json
new file mode 100644
index 0000000..f4cf0bb
--- /dev/null
+++ b/configs/.eslintrc.json
@@ -0,0 +1,49 @@
+{
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 8
+  },
+  "env": {
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "rules": {
+    "eol-last": "error",
+    "eqeqeq": [
+      "error",
+      "always"
+    ],
+    "indent": [
+      "error",
+      2
+    ],
+    "new-cap": "warn",
+    "no-console": "off",
+    "no-multi-spaces": [
+      "warn",
+      {
+        "exceptions": {
+          "VariableDeclarator": true
+        }
+      }
+    ],
+    "no-redeclare": [
+      "error",
+      {
+        "builtinGlobals": true
+      }
+    ],
+    "no-template-curly-in-string": "error",
+    "no-trailing-spaces": "warn",
+    "no-undefined": "off",
+    "quotes": [
+      "warn",
+      "single",
+      {
+        "allowTemplateLiterals": true
+      }
+    ],
+    "semi": "error"
+  }
+}
diff --git a/configs/.gitignore b/configs/.gitignore
new file mode 100644
index 0000000..0235aaa
--- /dev/null
+++ b/configs/.gitignore
@@ -0,0 +1,231 @@
+
+# Created by https://www.gitignore.io/api/node,macos,linux,windows,webstorm,visualstudiocode
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+### WebStorm ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+### WebStorm Patch ###
+# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
+
+# *.iml
+# modules.xml
+# .idea/misc.xml
+# *.ipr
+
+# Sonarlint plugin
+.idea/sonarlint
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# Visual Studio 2015/2017 cache/options directory
+.vs/
+
+
+# End of https://www.gitignore.io/api/node,macos,linux,windows,webstorm,visualstudiocode
diff --git a/configs/.markdownlint.json b/configs/.markdownlint.json
new file mode 100644
index 0000000..e11c946
--- /dev/null
+++ b/configs/.markdownlint.json
@@ -0,0 +1,15 @@
+{
+  "line-length": false,
+  "no-trailing-punctuation": false,
+  "no-inline-html": {
+    "allowed_elements": [
+      "a",
+      "dl",
+      "dt",
+      "dd",
+      "summary",
+      "detail",
+      "img"
+    ]
+  }
+}
diff --git a/prework/.DS_Store b/prework/.DS_Store
new file mode 100644
index 0000000..bb3292e
Binary files /dev/null and b/prework/.DS_Store differ
diff --git a/prework/README.md b/prework/README.md
new file mode 100644
index 0000000..748b718
--- /dev/null
+++ b/prework/README.md
@@ -0,0 +1,35 @@
+# Prework for Code 301: Intermediate Software Development
+
+Welcome to Code 301!
+
+To get your laptop and yourself ready for the start of Code 301, there are a series of pre-work tasks to complete.
+
+Before completing the tasks in this document, ensure that you have completed all of the computer setup tasks in the [Code 201 Prework](https://codefellows.github.io/code-201-guide/curriculum/prework/){:target="_blank"}.
+
+In particular, if you have tested in to Code 301 and did not take Code 201, be especially attentive to the git and GitHub portion of the Code 201 prework. Note that your future classmates who took 201 will already have a few weeks of practice using git and GitHub; it is a common area of challenge in 301 for students who tested in to the course.
+
+Note that the tasks below have a corresponding assignment to submit in your Canvas course, but be aware that at the time you receive the link to this prework that the Canvas course will not yet be published. Because of Admissions processes and when classes begin and end, Canvas courses are typically published 3-5 days before class begins.
+
+## Assignments
+
+### Please Complete:
+
+1. [Dive into React](react)
+1. [Setup Your Laptop for Code 301](https://codefellows.github.io/setup-guide/code-301)
+1. [Learn ES6 Arrow Functions in JavaScript](arrow-functions)
+1. [Learn ES6 Classes in JavaScript](classes)
+1. [Read 01 - Introduction to React and Components](https://codefellows.github.io/code-301-guide/curriculum/class-01/DISCUSSION)
+1. [Practice with CSS Diner](css_diner.md)
+1. [Practice with Chocolate Pizza](chocolate_pizza)
+1. [Prepare for building your own portfolio](portfolio_prep)
+1. [Setup Your Accounts](/common_curriculum/prep_work/Setup_Your_Accounts)
+1. [Setup Your Reading Notes Repo](/common_curriculum/prep_work/Setup_Readings)
+1. [Career Coaching Status Report](/common_curriculum/career_coaching/301/status-report)
+1. [Review Professional Etiquette](/common_curriculum/career_coaching/301/professional-etiquette)
+1. [Explore Behavioral Interview Questions](/common_curriculum/career_coaching/301/behavioral-questions)
+1. [Practice your Professional Pitch](/common_curriculum/career_coaching/301/professional-pitch-draft)
+1. [Update Your Resume](/common_curriculum/career_coaching/301/update-your-resume)
+
+### Please Read
+
+- [Familiarize yourself with the Career Coaching program](/common_curriculum/career_coaching), and review the [Code 301 Career Coaching Syllabus](/common_curriculum/career_coaching/301/301-career-coaching-syllabus).
diff --git a/prework/arrow-functions/.eslintrc.json b/prework/arrow-functions/.eslintrc.json
new file mode 100644
index 0000000..ff69f52
--- /dev/null
+++ b/prework/arrow-functions/.eslintrc.json
@@ -0,0 +1,54 @@
+{
+  "globals": {
+    "Mustache": true,
+    "$": true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "env": {
+    "browser": true,
+    "jquery": true,
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+  "rules": {
+    "eqeqeq": [
+      "error",
+      "always"
+    ],
+    "no-template-curly-in-string": "error",
+    "no-console": "off",
+    "no-undefined": "off",
+    "indent": [
+      "error",
+      2
+    ],
+    "quotes": [
+      "warn",
+      "single",
+      {
+        "allowTemplateLiterals": true
+      }
+    ],
+    "no-multi-spaces": [
+      "warn",
+      {
+        "exceptions": {
+          "VariableDeclarator": true
+        }
+      }
+    ],
+    "no-trailing-spaces": "warn",
+    "new-cap": "warn",
+    "no-redeclare": [
+      "error",
+      {
+        "builtinGlobals": true
+      }
+    ],
+    "eol-last": "error"
+  }
+}
\ No newline at end of file
diff --git a/prework/arrow-functions/.gitignore b/prework/arrow-functions/.gitignore
new file mode 100644
index 0000000..2a0c73c
--- /dev/null
+++ b/prework/arrow-functions/.gitignore
@@ -0,0 +1,62 @@
+# User defined
+.DS_Store
+*.diff
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
diff --git a/prework/arrow-functions/README.md b/prework/arrow-functions/README.md
new file mode 100644
index 0000000..9bcb898
--- /dev/null
+++ b/prework/arrow-functions/README.md
@@ -0,0 +1,38 @@
+# ES6 Arrow Functions
+
+This assignment is designed to introduce you to some features in [ECMAScript 2015](https://www.ecma-international.org/ecma-262/6.0/){:target="_blank"}, otherwise known as ES6. From this point on, you are expected to use these features.
+
+## Overview: Arrow Functions
+
+- [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions){:target="_blank"}
+- [caniuse.com](https://caniuse.com/#search=arrow%20functions){:target="_blank"}
+
+By now you should be comfortable writing [function expressions](https://developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Operators/function){:target="_blank"} and [function declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function){:target="_blank"}. Arrow functions are a shorter, more concise way to write a JavaScript function. The syntax might seem strange at first, so try to use arrow functions wherever you can and they will become second nature in no time.
+
+There are a few caveats with arrow functions, though. Most importantly, the `this` context is not reset within an arrow function. The value of `this` is therefore the same as the `this` of the enclosing scope (the surrounding non-arrow function). If there isn't a non-arrow function scope surrounding, the `this` context will be, in the browser, the global window object.
+
+Why does this happen? It happens because arrow functions retain the `this` value of the enclosing functional scope. Therefore, you will want to avoid using an arrow function in a constructor (where we need the contextual `this` to be the object we are building) or any method that needs to use `this` to behave properly.
+
+## Assignment Tasks
+
+1. Create a new repo in your GitHub account called `arrow-functions`. Clone the empty repo to your dev environment.
+1. Navigate to the `prework` folder in the root directory of the class repository.  Then navigate into the `arrow-functions` folder.
+1. Copy the contents of the folder named `starter-code` into your newly-created repo. Make an initial commit with the unchanged starter code. 
+1. Proceed to work on a well-named branch. As you work, remember to add, commit, and push regularly.
+1. The `app.js` file contains examples of function expressions, as you are accustomed to seeing. Work through steps 1-9, reading the notes and reviewing the refactored samples. 
+1. For each of these steps, uncomment the console.log line. Open the `index.html` file in the browser and verify the correct output in the developer console.
+1. To complete step 10, refactor the function expressions one at a time. Uncomment the console.log line and use it to check that the output is the same after you have completed the refactoring process.
+1. To complete step 11, uncomment the two console.log lines and observe the output in the developer console in the browser. Answer the corresponding questions.
+
+## Additional resources
+
+- ["JavaScript Arrow Functions" by Wes Bos](https://wesbos.com/arrow-functions/){:target="_blank"}
+
+## Submission Instructions
+
+1. When finished, make a PR from your branch to main, and merge it.
+1. Submit a link to your PR. You can link to a pull request even if the pull request is already merged or closed.
+1. Add a comment in your Canvas assignment which includes the following:
+    - A question within the context of today's lab assignment
+    - An observation about the lab assignment, or related 'Ah-hah!' moment
+    - How long you spent working on this assignment
diff --git a/prework/arrow-functions/starter-code/app.js b/prework/arrow-functions/starter-code/app.js
new file mode 100644
index 0000000..dc73506
--- /dev/null
+++ b/prework/arrow-functions/starter-code/app.js
@@ -0,0 +1,206 @@
+'use strict';
+
+// STEP 1
+// This is a standard function expression. You may also be familiar with function declarations, which begin with the "function" keyword.
+const theOldWay = function(course) {
+  return `I am currently enrolled in ${course}`;
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log('The old way:', theOldWay('Code 301'));
+
+
+// STEP 2
+// We can refactor our first function to use an arrow function.
+// The word "function" is removed and an arrow is added in between the parameter and the opening curly brace
+const theNewWay = (course) => {
+  return `I am currently enrolled in ${course}`;
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log('The new way:', theNewWay('Code 301'));
+
+
+// STEP 3
+// When we have one parameter, we can omit the parentheses
+const withoutParens = course => {
+  return `I am currently enrolled in ${course}`;
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log('Without parens:', withoutParens('Code 301'));
+
+
+// STEP 4
+// If the code block contains a single line of code, we can write everything on one line
+// We no longer need the curly braces and the return is implicit
+// Without an arrow function, we need to explicitly type "return"
+const oneLiner = course => `I cam currently enrolled in ${course}`;
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log('As a one-liner:', oneLiner('Code 301'));
+
+
+// STEP 5
+// What if we have multiple parameters?
+// In a function expression, they all go in the parentheses
+const add = function(num1, num2) {
+  return `${num1} + ${num2} = ${num1 + num2}`;
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log('Let\'s do some math:', add(4, 5));
+
+
+// STEP 6
+// When we have multiple parameters, they must be wrapped in parentheses
+// We can only remove the parentheses when there is a single parameter
+const addOneLiner = (num1, num2) => `${num1} + ${num2} = ${num1 + num2}`;
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log('Add as a one-liner:', addOneLiner(4, 5));
+
+
+// STEP 7
+// What if we have multiple lines of code?
+// We need to use a code block
+const multiLiner = word => {
+  word = word.toUpperCase();
+  return word;
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log('Multi-line arrow function:', multiLiner('hello'));
+
+
+// STEP 8
+// The way an object is returned is different with an arrow function, too.
+// Here is how we return an object without arrow functions
+const oldObject = function(array) {
+  return {
+    firstValue: array[0],
+    secondValue: array[1],
+    thirdValue: array[2]
+  };
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log('Hello from the old object function', oldObject(['hi', 'hello', 'are you there?']));
+
+
+// STEP 9
+// With an arrow function, we need to wrap our object in parentheses
+// Otherwise, it will be interpreted as a code block
+const newObject = array => ({
+  firstValue: array[0],
+  secondValue: array[1],
+  thirdValue: array[2]
+});
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log('Hello from the new object function', newObject(['hi', 'hello', 'are you there?']));
+
+
+// STEP 10
+// Uncomment the console.log lines to view the output of each function in the browser console.
+// Refactor each function into an arrow function.
+// Write your solutions on a single line wherever possible.
+
+
+
+let sum = function(a, b, c, d) {
+  return a + b + c + d;
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log(sum(1, 2, 3, 4));
+
+
+let objectLit = function() {
+  return {
+    key1: 'value1',
+    key2: 'value2',
+    key3: 'value3',
+  };
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log(objectLit());
+
+
+let sumAndProduct = function(a, b) {
+  let sum = a + b;
+  let product = a * b;
+  return [sum, product];
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log(sumAndProduct(3, 9));
+
+
+let message = function(name) {
+  return `Hello, ${name}!`;
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log(message('Allie'));
+
+
+let Student = function(name, age, hometown) {
+  this.name = name;
+  this.age = age;
+  this.hometown = hometown;
+};
+
+let joe = new Student('Joe Schmoe', 100, 'Anytown, USA');
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// Note that the arrow function will cause this code to break!
+// console.log(joe);
+
+// TODO: After viewing the previous console.log(), return the code to a working state.
+
+
+
+Student.prototype.greeting = function() {
+  return `Hi, my name is ${this.name}`;
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// Note that the arrow function will cause this method to break!
+// console.log(joe.greeting());
+
+// TODO: After viewing the previous console.log(), return the code to a working state.
+
+
+
+Student.courseName = function() {
+  return 'This student is enrolled in Code 301.';
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// console.log(Student.courseName());
+
+
+
+// STEP 11
+// How do arrow functions affect constructor functions?
+Student.prototype.scope = function() {
+  console.log(this);
+};
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// joe.scope();
+
+Student.prototype.scopeArrow = () => console.log(this);
+
+// TODO: Uncomment the following line of code to see the output in the browser console
+// joe.scopeArrow();
+
+// TODO: Write a COMMENT below to answer the following questions.
+// 1. What is "this" when joe.scope() is invoked?
+//
+// 2. What is "this" when joe.scopeArrow() is invoked?
+//
+// 3. Explain why "this" is different when an arrow function is used.
+//
diff --git a/prework/arrow-functions/starter-code/index.html b/prework/arrow-functions/starter-code/index.html
new file mode 100644
index 0000000..592e91a
--- /dev/null
+++ b/prework/arrow-functions/starter-code/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Arrow Functions</title>
+    <link rel="stylesheet" href="./styles.css">
+          <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+  <body>
+    <main>
+      <p>Open the developer console to see your output</p>
+    </main>
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/prework/arrow-functions/starter-code/styles.css b/prework/arrow-functions/starter-code/styles.css
new file mode 100644
index 0000000..6195551
--- /dev/null
+++ b/prework/arrow-functions/starter-code/styles.css
@@ -0,0 +1,9 @@
+body {
+  background-color: #002145;
+}
+
+p {
+  font-size: 50px;
+  text-align: center;
+  color: #66C010;
+}
diff --git a/prework/assets/chocolate_pizza.zip b/prework/assets/chocolate_pizza.zip
new file mode 100644
index 0000000..74ec133
Binary files /dev/null and b/prework/assets/chocolate_pizza.zip differ
diff --git a/prework/assets/chocolate_pizza/PREVIEW.png b/prework/assets/chocolate_pizza/PREVIEW.png
new file mode 100644
index 0000000..f3eba8b
Binary files /dev/null and b/prework/assets/chocolate_pizza/PREVIEW.png differ
diff --git a/prework/assets/chocolate_pizza/choco-pizza.png b/prework/assets/chocolate_pizza/choco-pizza.png
new file mode 100644
index 0000000..0794959
Binary files /dev/null and b/prework/assets/chocolate_pizza/choco-pizza.png differ
diff --git a/prework/assets/chocolate_pizza/fb-icon.png b/prework/assets/chocolate_pizza/fb-icon.png
new file mode 100644
index 0000000..442788a
Binary files /dev/null and b/prework/assets/chocolate_pizza/fb-icon.png differ
diff --git a/prework/assets/chocolate_pizza/flic-icon.png b/prework/assets/chocolate_pizza/flic-icon.png
new file mode 100644
index 0000000..a7eedc3
Binary files /dev/null and b/prework/assets/chocolate_pizza/flic-icon.png differ
diff --git a/prework/assets/chocolate_pizza/gp-icon.png b/prework/assets/chocolate_pizza/gp-icon.png
new file mode 100644
index 0000000..fede98b
Binary files /dev/null and b/prework/assets/chocolate_pizza/gp-icon.png differ
diff --git a/prework/assets/chocolate_pizza/insta-icon.png b/prework/assets/chocolate_pizza/insta-icon.png
new file mode 100644
index 0000000..1c35d61
Binary files /dev/null and b/prework/assets/chocolate_pizza/insta-icon.png differ
diff --git a/prework/assets/chocolate_pizza/list-bg.png b/prework/assets/chocolate_pizza/list-bg.png
new file mode 100644
index 0000000..3cfe169
Binary files /dev/null and b/prework/assets/chocolate_pizza/list-bg.png differ
diff --git a/prework/assets/chocolate_pizza/logo.png b/prework/assets/chocolate_pizza/logo.png
new file mode 100644
index 0000000..091773a
Binary files /dev/null and b/prework/assets/chocolate_pizza/logo.png differ
diff --git a/prework/assets/chocolate_pizza/mail-icon.png b/prework/assets/chocolate_pizza/mail-icon.png
new file mode 100644
index 0000000..c964d54
Binary files /dev/null and b/prework/assets/chocolate_pizza/mail-icon.png differ
diff --git a/prework/assets/chocolate_pizza/pint-icon.png b/prework/assets/chocolate_pizza/pint-icon.png
new file mode 100644
index 0000000..685d80f
Binary files /dev/null and b/prework/assets/chocolate_pizza/pint-icon.png differ
diff --git a/prework/assets/chocolate_pizza/print-icon.png b/prework/assets/chocolate_pizza/print-icon.png
new file mode 100644
index 0000000..da819f0
Binary files /dev/null and b/prework/assets/chocolate_pizza/print-icon.png differ
diff --git a/prework/assets/chocolate_pizza/rss-icon.png b/prework/assets/chocolate_pizza/rss-icon.png
new file mode 100644
index 0000000..b420864
Binary files /dev/null and b/prework/assets/chocolate_pizza/rss-icon.png differ
diff --git a/prework/assets/chocolate_pizza/small-logo.png b/prework/assets/chocolate_pizza/small-logo.png
new file mode 100644
index 0000000..bfd3407
Binary files /dev/null and b/prework/assets/chocolate_pizza/small-logo.png differ
diff --git a/prework/assets/chocolate_pizza/twit-icon.png b/prework/assets/chocolate_pizza/twit-icon.png
new file mode 100644
index 0000000..0b41d38
Binary files /dev/null and b/prework/assets/chocolate_pizza/twit-icon.png differ
diff --git a/prework/assets/chocolate_pizza/van-pic.png b/prework/assets/chocolate_pizza/van-pic.png
new file mode 100644
index 0000000..117d40d
Binary files /dev/null and b/prework/assets/chocolate_pizza/van-pic.png differ
diff --git a/prework/chocolate_pizza.md b/prework/chocolate_pizza.md
new file mode 100644
index 0000000..1ef1419
--- /dev/null
+++ b/prework/chocolate_pizza.md
@@ -0,0 +1,24 @@
+# Chocolate Pizza CSS
+
+**If you are coming from a Code 201 class that ended within 2 weeks of the start of your Code 301 class**, submit the work you did there.
+
+If you completed Code 201 more than 2 weeks prior to the start of Code 301, please complete this assignment as a way to keep your HTML/CSS skills sharp. 
+
+If you are testing in to Code 301, you should know that students in Code 201 complete a time-boxed "design comp" assignment, called "Chocolate Pizza". This is your opportunity to take on that challenge:
+
+- Rather than the "complete as much of the assignment as you can in the available time" approach in Code 201, your challenge is to get the HTML/CSS mockup to be pixel-perfect
+- Your column of content should be centered in the window, as in the preview image
+- Your solution does not need to be responsive in any way
+- Do not use any negative margins, grids, or flex positioning
+
+**Instructions:**
+
+1. Create and clone a new GitHub repository to house the code for this project.
+1. Immediately check out a new branch in which to do your work.
+1. Download and unzip [these assets](./assets/chocolate_pizza.zip){:target="_blank"} into an `assets` directory in your project.
+1. Write your code in two files: `index.html` and `style.css`. You do not need to include JavaScript.
+1. Use the included `PREVIEW.png` image as a reference; your goal is to match it as closely as possible.
+1. Make regular Git commits with appropriately descriptive commit messages while you are working.
+1. When finished, be sure to push your final code to GitHub and merge your branch into `main`.
+1. Deploy your page on GitHub Pages via the options in the repository "Settings" tab.
+1. Submit the links to your repository AND your deployed page in the corresponding Canvas assignment.
diff --git a/prework/classes/DEMO.md b/prework/classes/DEMO.md
new file mode 100644
index 0000000..2da4cca
--- /dev/null
+++ b/prework/classes/DEMO.md
@@ -0,0 +1,68 @@
+# ES6 Classes - Demo Code
+
+## Constructor Functions & Prototypes
+
+```javascript
+const Animal = function(name, legs) {
+  this.name = name;
+  this.legs = legs;
+  this.eat = function() {
+    this.isEating = true;
+  }
+}
+Animal.prototype.walk = function() {
+  this.isWalking = true;
+}
+
+const Dog = function(name, legs) {
+  Animal.call(this, name, legs);
+}
+Dog.prototype = Object.create(Animal.prototype);
+
+let puppy = new Dog('blake', 4);
+puppy.walk();
+puppy.eat();
+console.log(puppy);
+console.log(puppy instanceof Animal);
+console.log(puppy instanceof Dog);
+```
+
+## ES6 Classes
+
+```javascript
+class Animal {
+
+  constructor(name, legs) {
+    this.name = name;
+    this.legs = legs;
+  }
+
+  walk() {
+    this.isWalking = true;
+  }
+
+  eat() {
+    this.isEating = true;
+  }
+
+}
+
+class Dog extends Animal {
+
+  constructor(name, legs, furType) {
+    super(name,legs);
+    this.furType = furType;
+  }
+
+  speak() {
+    console.log('Wooof!');
+  }
+
+}
+
+let rosie = new Dog('rosie', 4, 'Short Hair');
+rosie.walk();
+rosie.eat();
+console.log(rosie);
+rosie.speak();
+```
diff --git a/prework/classes/LAB.md b/prework/classes/LAB.md
new file mode 100644
index 0000000..21ece0a
--- /dev/null
+++ b/prework/classes/LAB.md
@@ -0,0 +1,27 @@
+# LAB: ES6 Classes
+
+In this lab, you will be doing your first "refactoring", which the process of migrating working code into a new methodology or tech stack. Today, you'll migrate a standard constructor function exported from a node module into a Class, keeping the functionality (and the interface) exactly the same.
+
+## Getting Started
+
+Fork the [Online REPL](https://repl.it/@codefellows/ES6-Classes){:target=_blank} for this assignment. Complete your work in the online editor
+
+## Requirements
+
+- Implement both `Car` and `Motorcycle` as Vehicles using only Javascript ES6 `Class{}` syntax
+
+## Implementation Details
+
+When running this REPL, you will see that there is some output that will show you that a Car and Motorcycle can be created properly using a Constructor Function and Prototype methods.
+
+However, the Vehicles via ES6 Classes will cause errors, as it has not yet been implemented.
+
+Your work will be done in the `vehicles-with-classes.js` file, which is setup to run the same methods on Car and Motorcycle classes as the "Constructor" version, with the expectation that you can produce identical output
+
+- Using ES6 Classes and inheritance, replicate the behavior of the Vehicle, Car, and Motorcycle implementations
+- Your output from this file should be exactly the same as the output from the other version (vehicles-with-constructor.js).
+- Clicking the "run >" button will execute both versions
+
+## Assignment Submission Instructions
+
+Submit a link to your completed REPL
diff --git a/prework/classes/README.md b/prework/classes/README.md
new file mode 100644
index 0000000..dad18fe
--- /dev/null
+++ b/prework/classes/README.md
@@ -0,0 +1,74 @@
+# Readings and Resources: ES6 Classes
+
+Below you will find some reading material, code samples, and some additional resources that will help you to better understand ES6 Classes
+
+- Watch the [Shred Talk: ES6 Classes](https://youtu.be/9Yc5J3Ap9-4){:target="_blank"}
+- Review the [Demo Code](./DEMO.md){:target="_blank"}
+- Complete the [Assignment](./LAB.md){:target="_blank"}
+
+## Objects and Inheritance
+
+JavaScript objects use prototype-based inheritance. Its design is logically similar (but different in implementation) from class inheritance in strictly Object Oriented Programming languages like Java and C#.
+
+It can be loosely described by saying that when methods or properties are attached to object’s prototype they become available for use on that object and its descendants, but not directly attached to them.
+
+When you use class and extends keywords internally JavaScript will still use prototype-based inheritance. It just simplifies the syntax (this is often called "Syntactic Sugar"). While classes are easier to use, it’s still very important to understand how prototype-based inheritance works. It’s still at the core of the language design.
+
+### Prototypal Inheritance
+
+```javascript
+function Animal(name) {
+  this.name = name;
+}
+Animal.prototype.walk = function() {}
+
+function Bird(name) {
+  // I can do all the things animals can do!
+  Animal.call(this, name);
+}
+// Unlike other animals, birds can fly
+Bird.prototype.fly = function() {}
+
+// Make a new bird ..
+let parrot = new Bird('parrot');
+parrot.fly();
+parrot.walk();
+```
+
+### ES6 Classes
+
+The same thing with classes (much cleaner!)
+
+- `function()` becomes `class {}`
+- `call()` becomes `extends`
+- Classes are standalone, self-contained object (instance) factories
+  - Ultimately, they result in a prototype
+  - But for the developer, they are many orders of magnitude easier to comprehend and work with
+
+```javascript
+class Animal {
+  constructor(name) {
+    this.name  = name;
+  }
+
+  walk() {}
+}
+
+// Thanks to 'extends', all birds can now do all things animals can
+class Bird extends Animal {
+  // Birds can walk, becuase they're animals also do their own thing.
+  fly() {}
+}
+
+// Make one (the same was as before, but wasn't the class creation much easier?)
+let parrot = new Bird('parrot');
+parrot.fly();
+parrot.walk();
+```
+
+## Additional Resources
+
+- Video: [what the heck is the event loop anyway](https://www.youtube.com/watch?v=8aGhZQkoFbQ){:target="_blank"}
+- [MDN inheritance](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain){:target="_blank"}
+- [MDN this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this){:target="_blank"}
+- [MDN class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes){:target="_blank"}
diff --git a/prework/computer-setup.md b/prework/computer-setup.md
new file mode 100644
index 0000000..a1c0f5c
--- /dev/null
+++ b/prework/computer-setup.md
@@ -0,0 +1,10 @@
+# Computer Setup
+
+Confirm that your laptop or computer is properly setup with appropriate software and settings so that you may begin your class work.
+
+1. Ensure your computer is compliant with [Code 201 Requirements](https://codefellows.github.io/setup-guide/system-setup/11-verify.html){:target="_blank"}
+1.Install and configure the required [Code 301 Developer Tools](https://codefellows.github.io/setup-guide/code-301){:target="_blank"}
+
+## Submission Instructions
+
+Submit a screen shot of your terminal with the success messages from each verification step above.
diff --git a/prework/css_diner.md b/prework/css_diner.md
new file mode 100644
index 0000000..448a322
--- /dev/null
+++ b/prework/css_diner.md
@@ -0,0 +1,9 @@
+# CSS Diner
+
+**If you are coming from a Code 201 class that ended within 2 weeks of the start of your Code 301 class**, consider redoing the assignment.
+
+If you completed Code 201 more than 2 weeks prior to the start of Code 301, please complete this assignment as a way to keep your HTML/CSS skills sharp. 
+
+If you are testing in to Code 301, you should know that students in Code 201 complete all levels of the [CSS Diner](https://flukeout.github.io/). This is your opportunity to take on that challenge.
+
+[CSS Diner](https://flukeout.github.io/) takes you through different levels of CSS challenges. Once you have completed all the levels, take a screenshot that shows all the levels checked off and submit it.
diff --git a/prework/portfolio_prep.md b/prework/portfolio_prep.md
new file mode 100644
index 0000000..3ec7346
--- /dev/null
+++ b/prework/portfolio_prep.md
@@ -0,0 +1,27 @@
+# Portfolio Prep
+
+In your first few days of Code 301, you will build a personal portfolio site. This will help you establish a home on the web, and show off some of your software development projects and skills. 
+
+Sometimes, the hardest part is getting the words right. To help you prepare for building your portfolio, you can start thinking about what you want to say now. 
+
+## Tell me about yourself
+
+Visitors to your portfolio site want to learn about you, in memorable, bite-sized bits. Your page will have a space for you to fill in each of the following descriptions of yourself:
+
+1. A 2 or 3 word catchy title. Avoid cliches like "programming ninja" or "coding rockstar".
+1. A personal headline, like you have atop your LinkedIn page. What do you want your career to be about?
+1. Your professional pitch: You've done a recording, so just write down here how it goes.
+1. What excites you the most about tech? Write 1-2 sentences.
+
+## Gather your assets
+
+A few punchy images will really help your page stand out, and make it your own. Gather images for the following:
+
+1. A headshot of your lovely face, reduced to 100x100 pixels
+1. A banner of you looking happy, cropped to exactly 1400 × 422 pixels
+1. A screenshot of the best-looking part of your favorite previous project, like your Code 201 final project
+1. Two or three other nice-looking screenshots, of any other projects you have worked on. Salmon Cookies? Bus Mall? 
+
+## Submission
+
+Once you have access to Canvas for your course, submit your responses to the items listed above. Include direct URLs for the images you want to use on your page. 
diff --git a/prework/react.md b/prework/react.md
new file mode 100644
index 0000000..8a8d720
--- /dev/null
+++ b/prework/react.md
@@ -0,0 +1,19 @@
+# Dive into React
+
+Below you will find a short video about React. Watch the video then answer the questions below.
+
+[A High Level Overview Of React](https://www.youtube.com/watch?v=FRjlF74_EZk){:target="_blank"}
+
+1. What is React?
+
+1. What is a component?
+
+1. What is the dataflow of React?
+
+1. How do we make a React element a DOM element?
+
+1. React is a User Interface ______________.
+
+1. Which direction does data flow in React?
+
+1. Every component manages its own ____________.