https://github.com/fullstackacademy/2109-wdf-ny-web-ft

https://github.com/fullstackacademy/2109-wdf-ny-web-ft

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/fullstackacademy/2109-wdf-ny-web-ft
• Owner: FullstackAcademy
• Created: 2021-09-16T14:24:25.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-27T21:03:04.000Z (over 4 years ago)
• Last Synced: 2025-10-28T02:39:57.000Z (8 months ago)
• Language: JavaScript
• Size: 17 MB
• Stars: 3
• Watchers: 12
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 📚 **2109-WDF-NY-WEB-FT Library**

This will be your main place for Fullstack-related materials!

## **Helpful Resources/Links**

Click to view

- [🗺 Stack Map Diagram][stack-map-diagram]

- [📺 Video: Debugging Node][vid-debugging-node]

- [📖 Effective git and github usage for pairing on workshops][git-pairing]

- [📺 Video of Github workflow when pairing on Workshops][vid-git-pairing]

- [📖 Fullstack Student / Alum Blogs List][alum-blogs]

- [📖 Gist: Debugging][doc-glebec-debug]

- [📺 Video: Debugging][vid-glebec-debug]

- [📖 Gist: Some code wars problems, categorized][codewars-categorized]

- [📖 Gist: Book Recommendations][doc-glebec-books]

- [📖 Oh-My-ZSH cheatsheet][oh-my-zsh]

- [📖 MVC vs Redux (Flux)][mvc-vs-redux]

- [📖 Gist: Functional Programming][doc-glebec-fp]

- **Destructuring**

  - [📖 MDN: Destructuring assignment][mdn-destructuring]

  - [📖 A Dead Simple intro to Destructuring JavaScript Objects][wes-bos-destructuring]

  - [📖 Rename & Destructure Variables in ES6][wes-bos-destructure-renaming]

[stack-map-diagram]: https://fullstackacademy.github.io/stack-map/

[vid-debugging-node]: https://youtu.be/N9w__SIB-wA

[git-pairing]: https://gist.github.com/omriBernstein/4fd2c21be8416d5e5a69aabc6fa94b82

[vid-git-pairing]: http://www.youtube.com/watch?v=VJHyW8OmSaI

[alum-blogs]: https://github.com/FullstackAcademy/student-blogs

[doc-glebec-debug]: https://gist.github.com/glebec/8a0d06e54a4b3f95a33392f948e97b6a

[vid-glebec-debug]: https://youtu.be/-NoR8H_mrC0

[codewars-categorized]: https://gist.github.com/joedotjs/7614f84264bf20e49d39

[doc-glebec-books]: https://gist.github.com/glebec/c8139b51feb86005504810b8f58a696c

[oh-my-zsh]: https://github.com/robbyrussell/oh-my-zsh/wiki/Cheatsheet

[mvc-vs-redux]: https://blog.gisspan.com/2017/02/Redux-Vs-MVC,-Why-and-How.html

[doc-glebec-fp]: https://gist.github.com/glebec/a5c9309c7615d4bbdb838a4973e0f9d7

[wes-bos-destructuring]: https://wesbos.com/destructuring-objects

[wes-bos-destructure-renaming]: https://wesbos.com/destructuring-renaming

[mdn-destructuring]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

___

## 🥚 **Foundations**

Fullstack Test First Solution Videos

- [📺 01 Properties][vid-foundations-01-properties]

- [📺 02 Calculator][vid-foundations-02-calculator]

- [📺 03 RPN Calculator Playlist][vid-foundations-03-RPN]

- [📺 04 Loops Playlist][vid-foundations-01-loops]

- [📺 05 Functions][vid-foundations-01-functions]

- [📺 06 Functional][vid-foundations-01-functional]

- [📺 07 Mammals][vid-foundations-01-mammals]

- [📺 08 Recursion][vid-foundations-01-recursion]

[vid-foundations-01-properties]: https://www.youtube.com/watch?v=YDoRg2topuA

[vid-foundations-02-calculator]: https://www.youtube.com/watch?v=komtSeCkzCA

[vid-foundations-03-RPN]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmnfk2sgE6qjfmAk6vbQVcNG

[vid-foundations-01-loops]: https://www.youtube.com/watch?v=66bl0bvyH2M&list=PLx0iOsdUOUmmHlW6T7IPy8uyiSgZp9R-E

[vid-foundations-01-functions]: https://www.youtube.com/watch?v=oAHIBcmFUsg

[vid-foundations-01-functional]: https://www.youtube.com/watch?v=fbf7aLX9dx4

[vid-foundations-01-mammals]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmkJGuH7-4KJ6dToxFJzgVFh

[vid-foundations-01-recursion]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmmrCVtFYTSvFgytB34qWT8a

Foundations Checkpoint

- [💬 Q & A](https://youtu.be/hanrq65sulg)

Foundations Lectures

### Week 1 Review Videos

- [📓 08-18-2021](https://youtu.be/5MIZTQckGbY)

- [📓 08-20-2021](https://youtu.be/VdX2uvsqcsA)

### Week 2 Review Videos

- [📓 08-24-2021](https://youtu.be/ahPntoSt36o)

- [📓 08-26-2021](https://youtu.be/UfhfYU-dCMU)

### Week 3 Review Videos

- [📓 09-01-2021](https://youtu.be/f7ydmX9pOk0)

- [📓 09-03-2021](https://youtu.be/_b1Eqagds-E)

### Week 4 Review Videos

- [📓 09-08-2021](https://youtu.be/gLT20XwFOj4)

- [📓 09-10-2021](https://youtu.be/_rDxxnaA_T0)

___

## 🐣 **Junior Phase**

Click to view

### ✔️ **Checkpoints**

| Topic | Link | Due by | Solution | Walkthrough |

| ---------- | ---- | ------ | -------- | -------- |

| DOM | [🔗][ckpt-dom] | Sun 09/26 6PM EST | [👾][ckpt-dom-sol] | [📺][ckpt-dom-video] |

| Express & Sequelize | [🔗][ckpt-express-sequelize] | Sun 10/03 6PM EST | [👾][ckpt-express-sequelize-sol] | [📺][ckpt-express-sequelize-video]

| Pillars | [🔗][pillars] | Wed 10/05 6PM EST | - | [📺][pillars-rev] |

| React | [🔗][ckpt-react] | Sun 10/10 6 PM EST | [👾][ckpt-react-sol] | [📺][ckpt-react-rev] |

| Redux | [🔗][ckpt-redux] | Sun 10/17 6 PM EST | [👾][ckpt-redux-sol] | - |

[//]: # ( Open checkpoint solutions the day after it is due [depending on extensions] )

[ckpt-dom]: https://github.com/FullstackAcademy/Checkpoint.DOM

[//]: # ( Paste in table above >> [👾][ckpt-dom-sol] )

[ckpt-dom-sol]: 01-junior-phase/checkpoints/Checkpoint.DOM.Solution-master

[ckpt-dom-video]: https://youtu.be/3EtAyIhudF0

[ckpt-express-sequelize]: https://github.com/FullstackAcademy/Checkpoint-Express-Sequelize-B

[//]: # ( Paste in table above >> [👾][ckpt-express-sequelize-sol] )

[ckpt-express-sequelize-sol]: 01-junior-phase/checkpoints/Checkpoint-Express-Sequelize-B-Solution-main

[ckpt-express-sequelize-video]: https://www.youtube.com/playlist?list=PL_yPiP-ZZLhKmY7Je1N1Gk06TkyKPgkwe

[pillars]: https://github.com/FullstackAcademy/Checkpoint-Pillars-v2

[//]: # ( Paste in table above >> [📺][pillars-rev] )

[pillars-rev]: https://www.youtube.com/playlist?list=PL_yPiP-ZZLhKph-MuCSKujl_MVved1OWC

[ckpt-react]: https://github.com/FullstackAcademy/Checkpoint-React-v2

[//]: # ( Paste in table above >> [👾][ckpt-react-sol] )

[ckpt-react-sol]: 01-junior-phase/checkpoints/Checkpoint-React-v2-Solution-master

[//]: # ( Paste in table above >> [📺][ckpt-react-rev] )

[ckpt-react-rev]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmmUG8GiGcfoy2in0z3NrR3p

[ckpt-redux]: https://github.com/FullstackAcademy/Checkpoint-Redux

[//]: # ( Paste in table above >> [👾][ckpt-redux-sol] )

[ckpt-redux-sol]: 01-junior-phase/checkpoints/Checkpoint-Redux-Solution-master

[jpfp]: #tba

[ckpt-data-structures]: https://github.com/FullstackAcademy/Checkpoint-Data-Structures

[//]: # ( Paste in table above >> [👾][ckpt-data-structures-sol] )

[ckpt-data-structures-sol]: #tba

**📚 Supplemental Study Materials**

| Topic | Link | Solution |

| ----- | ---- | -------- |

| Study Saturday: Express & Sequelize | [🔗][ss-express-sequelize] | [👾][ss-express-sequelize-sol] |

| Cody's Cafe | [🔗][codys-cafe-repo] | [👾][codys-cafe-sol] |

| Study Saturday: React | [🔗][ss-react] | [👾][ss-react-sol] |

| Goodie Bag | [🔗][goodie-bag] | [👾][goodie-bag-sol] |

[//]: # ( Open Study Saturday material the following Monday )

[codys-cafe-repo]: https://github.com/FullstackAcademy/codys-cafe

[codys-cafe-sol]: https://github.com/FullstackAcademy/codys-cafe-solution.git

[ss-express-sequelize]: https://github.com/FullstackAcademy/Study-Saturday-Express-Sequelize

[ss-express-sequelize-sol]: https://github.com/FullstackAcademy/codys-cafe-solution

[ss-react]: https://github.com/FullstackAcademy/Study-Saturday-React

[ss-react-sol]: #tba

[goodie-bag]: https://learn.fullstackacademy.com/workshop/5f077126514d6d000422faa4/landing

[goodie-bag-sol]: https://github.com/FullstackAcademy/GoodieBag.Solution

[ss-fullstack]: https://github.com/FullstackAcademy/Study-Saturday-Fullstack

[ss-fullstack-sol]: #tba

- [Anatomy of a full-stack application directory structure](https://app.creately.com/diagram/M63wZ4CZnOh/view)

  - **Note:** This is just _one_ potential way to structure.

[fitness-tracker-1]: https://learn.fullstackacademy.com/workshop/5c6f1e993812f00004238930/landing

[//]: # ( Paste in table above >> [👾][fitness-tracker-1-sol] )

[fitness-tracker-1-sol]: #tba

[fitness-tracker-2]: https://learn.fullstackacademy.com/workshop/5c7d659837e0d200045b7a77/landing

[//]: # ( Paste in table above >> [👾][fitness-tracker-2-sol] )

[fitness-tracker-2-sol]: #tba

[fitness-tracker-3]: https://learn.fullstackacademy.com/workshop/5c86c0b95587580004b80c3f/landing

[//]: # ( Paste in table above >> [👾][fitness-tracker-3-sol] )

[fitness-tracker-3-sol]: #tba

[fitness-tracker-4]: https://learn.fullstackacademy.com/workshop/5c9110fc3fb0a40004e67bd8/landing

[//]: # ( Paste in table above >> [👾][fitness-tracker-4-sol] )

[fitness-tracker-4-sol]: #tba

___

### **Week 1: Collaboration & Git, HTML & CSS, Debugging, DOM & Events, Node**

Click to view

#### Day 1: Collaboration, Git

- Pre-Work:

  - [📖 A Pair is Better Than One][pair-better]

  - [📖 Git Handbook][git-handbook]

[git-handbook]: https://guides.github.com/introduction/git-handbook/

[pair-better]: https://hackernoon.com/a-pair-is-better-than-one-e9d4514add9f

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Intro to Junior Phase | - | - | - | - | - |

| Zoom Protocols | - | [🖼️][zoom-slides] | - | - | - |

| Intro to Pair Programming | [📺][pair-programming-lec] | [🖼️][pair-programming-slides] | - | - | - |

| Git: Getting Confident | [📺][git-lec] | [🖼️][git-slides] | - | - | - |

| Morning Review | [📺][am-rev-1-1] | [🎟][am-rev-1-1-ticket] | - | [👾][am-rev-1-1-sol] | - |

[//]: # ( Paste in table above >> [🖼️][intro-jr-phase-slides] )

[intro-jr-phase-slides]: #link-to-slide-deck-here

[//]: # ( Paste in table above >> [🖼️][zoom-slides] )

[zoom-slides]: https://docs.google.com/presentation/d/1UTdfDmUkNakkOEB40YFUPGikJIhtD_DKYm3nY32iqm8/edit?usp=sharing

[//]: # ( Paste in table above >> [📺][pair-programming-lec] )

[pair-programming-lec]: https://youtu.be/3BU8d27sZa4

[pair-programming-slides]: https://docs.google.com/presentation/d/1H_Oxl0ewwlD5HO_HGvEz0SXS47j9TboSLHi73xDLgrs/edit?usp=sharing

[//]: # ( Paste in table above >> [📺][git-lec] )

[git-lec]: https://youtu.be/EqH8DlDt_BY

[git-slides]: https://docs.google.com/presentation/d/1GLe6zqtfQkw0bxmxCSON9WVC746kPaSaJCzYRqUdIYQ/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][git-demo] )

[git-demo]: #link-demo-here

[//]: # ( Paste in table above >> [📺][am-rev-1-1] )

[am-rev-1-1]: https://youtu.be/kDfGpRl6b50

[//]: # ( Paste in table above >> [🎟][am-rev-1-1-ticket] )

[am-rev-1-1-ticket]: https://forms.gle/P8pQQi1ZqognD5wy6

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-1-1-demo] )

[am-rev-1-1-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-1-1-sol] )

[am-rev-1-1-sol]: 01-junior-phase/exit-ticket-solutions/01-git-pairing.md

- **You should be able to:**

  - Practice effective pair programming

  - Manage a project using `git`

**Extra Resources:**

- [Git Book](https://git-scm.com/book/en/v2/Getting-Started-Git-Basics)

- [GitHub: Git Cheat Sheet](https://github.github.com/training-kit/downloads/github-git-cheat-sheet.pdf)

- [Centralized vs Distributed Version Control Systems (CVCS vs DVCS)](https://scmquest.com/centralized-vs-distributed-version-control-systems)

- [Git: Customizing Git - Git Configuration](https://git-scm.com/book/en/v2/Customizing-Git-Git-Configuration)

- [Stackoverflow: `git branch BRANCH_NAME` vs. `git checkout -b BRANCH_NAME`](https://stackoverflow.com/questions/7987687/what-is-the-difference-between-git-branch-and-git-checkout-b/7987711#7987711)

- [Git Without Github: Private Repositories](https://catxmachina.xyz/git-without-github/private-repos/)

- [Atlassian: Git merge conflicts](https://www.atlassian.com/git/tutorials/using-branches/merge-conflicts)

- [freeCodeCamp: How to Delete a Git Branch Both Locally and Remotely](https://www.freecodecamp.org/news/how-to-delete-a-git-branch-both-locally-and-remotely/)

- [Checkersaga: Google and GitHub will stop using terms like ‘master and slave’ or ‘blacklist’ in their code](https://checkersaga.com/google-and-github-will-stop-using-terms-like-master-and-slave-or-blacklist-in-their-code/48456/)

#### Day 2: HTML, CSS, Flexbox

- Pre-Work:

  - [📖 HTML Basics][html-basics]

  - [📖 CSS Basics][css-basics]

  - [📖 A Complete Guide to Flexbox][flexbox-complete-guide]

[html-basics]: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

[css-basics]: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

[flexbox-complete-guide]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| HTML | [📺][html-lec] | [🖼️][html-slides] | [🧑‍💻][html-demo] | - | - |

| CSS | [📺][css-lec] | [🖼️][css-slides] | [🧑‍💻][css-demo] | - | - |

| Flexbox | [📺][flexbox-lec] | [🖼️][flexbox-slides] | [🧑‍💻][flexbox-demo] | - | - |

| Landing Page Liftoff | - | - | - | [👾][landing-page-sol] | [📺][landing-page-rev] |

| Morning Review | [📺][am-rev-1-2] | [🎟][am-rev-1-2-ticket] | - | [👾][am-rev-1-2-sol] | - |

[//]: # ( Paste in table above >> [📺][html-lec] )

[html-lec]: https://youtu.be/MYhWwb9iURI

[html-slides]: https://docs.google.com/presentation/d/1Nx7cEU0bMGIBSQPqC5BYS622owsmnoMlmY6yzfN21I0/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][html-demo] )

[html-demo]: 01-junior-phase/02-html-css-flexbox/html-demo

[//]: # ( Paste in table above >> [📺][css-lec] )

[css-lec]: https://youtu.be/33Sr39xXJtw

[css-slides]: https://docs.google.com/presentation/d/1rDKlYTjosIqNGcEQ3jXNzHSYFnq41ZeuyYB4nxIEEWk/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][css-demo] )

[css-demo]: 01-junior-phase/02-html-css-flexbox/css-demo

[//]: # ( Paste in table above >> [📺][flexbox-lec] )

[flexbox-lec]: https://youtu.be/G5xFqE22sDw

[flexbox-slides]: https://docs.google.com/presentation/d/1K0WQvp8wSHEyIZQci_eDh8EhwKafD-m6mymsA7G80l0/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][flexbox-demo] )

[flexbox-demo]: 01-junior-phase/02-html-css-flexbox/flexbox-demo

[//]: # ( Paste in table above >> [👾][landing-page-sol]  [👾 Extra Credit][landing-page-sol-extra] )

[landing-page-sol]: 01-junior-phase/02-html-css-flexbox/Landing-Page-Launchpad-Solution

[landing-page-sol-extra]: ####

[//]: # ( Paste in table above >> [📺][landing-page-rev] )

[landing-page-rev]: https://www.youtube.com/watch?v=TvTiebmefWY&ab_channel=FullstackAcademy

[//]: # ( Paste in table above >> [📺][am-rev-1-2] )

[am-rev-1-2]: https://youtu.be/UM8n81ggB1g

[//]: # ( Paste in table above >> [🎟][am-rev-1-2-ticket] )

[am-rev-1-2-ticket]: https://forms.gle/CG23syVAWfUoc3US9

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-1-2-demo] )

[am-rev-1-2-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-1-2-sol] )

[am-rev-1-2-sol]: 01-junior-phase/exit-ticket-solutions/02-html-css-flexbox.md

- **You should be able to:**

  - Create a basic HTML document using common elements (`div`, `p`, `h1`, `ul`, `button`, etc)

  - Add some basic styling to an HTML document

  - Navigate the browser developer tools (console, elements, network)

  - Style a page using Flexbox

**Extra Resources:**

  - [Calculate Specificity][specificity-calc]

  - [Calculate Specificity v2][specificity-calc2]

  - [REM vs EM vs PX][rem-em-px]

  - [CSS Units Ultimate Guide][css-units]

  - [CSS Grow][css-grow]

  - [CSS Center][css-center]

  - [Colorful Flexbox][flexbox-color]

  - [FlexBox Froggy][flexbox-froggy]

  - [Flexbox Froggy Level 24 Walkthrough][vid-flexbox-froggy] >> Spoiler alert!

  - [FlexBox in 10 Minutes][flexbox-ten-minutes]

[specificity-calc]: https://slicejack.com/quick-guide-to-css-specificity/

[specificity-calc2]: https://css-tricks.com/specifics-on-css-specificity/

[rem-em-px]: https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

[css-units]: https://blog.alexdevero.com/css-units-ultimate-guide/

[css-grow]: https://css-tricks.com/flex-grow-is-weird/

[css-center]: https://css-tricks.com/centering-css-complete-guide/

[flexbox-color]: https://medium.freecodecamp.org/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053

[flexbox-froggy]: https://flexboxfroggy.com/

[vid-flexbox-froggy]: https://youtu.be/D8V74OeZm5Y

[flexbox-ten-minutes]: https://medium.freecodecamp.org/flexbox-in-10-minutes-7295497804ed

#### Day 3: Debugging, DOM, Event Listeners & Handlers

- Pre-Work:

  - [📖 Thoughts on Debugging][debug-thoughts]

  - [📖 What is the DOM?][dom-what]

  - [📖 An Introduction To DOM Events][dom-intro]

[debug-thoughts]: https://www.bignerdranch.com/blog/thoughts-on-debugging-part-2/

[dom-what]: https://css-tricks.com/dom/

[dom-intro]: https://www.smashingmagazine.com/2013/11/an-introduction-to-dom-events/

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Practical Debugging: Prevention| [📺][prevention-lec] | [🖼️][prevention-slides] | - | - | - |

| Practical Debugging: Detection, Diagnosis & Treatment | [📺][ddt-lec] | [🖼️][ddt-slides] | - | - | - |

| Intro to the DOM | [📺][dom-intro-lec] | [🖼️][dom-intro-slides] | - | [👾][dom-sol] | - |

| Morning Review | - | [🎟][am-rev-1-3-ticket] | - | [👾][am-rev-1-3-sol] | - |

[//]: # ( Paste in table above >> [📺][prevention-lec] )

[prevention-lec]: https://youtu.be/Z1AolPk-cvk

[prevention-slides]: https://docs.google.com/presentation/d/1heeFT5nf6AHDzMrnRO9PQR38yT9OlVwIFkdO9k0E3Ts/edit?usp=sharing

[//]: # ( Paste in table above >> [📺][ddt-lec] )

[ddt-lec]: https://youtu.be/C96Zh-1UuqE

[ddt-slides]: https://docs.google.com/presentation/d/1ubjsEvmFcS9fZAOi3kQ3QRknoGWIsUYRyP472VbQJSc/edit?usp=sharing

[//]: # ( Paste in table above >> [📺][dom-intro-lec] )

[dom-intro-lec]: https://youtu.be/nREik7gTqbI

[dom-intro-slides]: https://docs.google.com/presentation/d/1aVwRxJmGNpJlBc7yJc9DHAIqWMnwAIS5TAEWBBMZC1A/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][dom-intro-demo] )

[dom-intro-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][dom-sol] )

[dom-sol]: 01-junior-phase/03-dom/Checkpoint.DOM.Solution-master

[//]: # ( Paste in table above >> [📺][am-rev-1-3] )

[am-rev-1-3]: #paste-YouTube-link-here

[//]: # ( Paste in table above >> [🎟][am-rev-1-3-ticket] )

[am-rev-1-3-ticket]: https://forms.gle/JaneK3AQ6VFNxLd88

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-1-3-demo] )

[am-rev-1-3-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-1-3-sol] )

[am-rev-1-3-sol]: 01-junior-phase/exit-ticket-solutions/03-debugging-dom.md

- **You should be able to:**

  - Describe simple steps to prevent bugs

  - Demonstrate how to read a stack trace, and use `console.log` and `debugger`

  - Define the DOM and explain its importance

  - Set up event listeners to handle DOM events

  - Manipulate the DOM using the DOM API

  - Explain how a browser uses HTML, CSS, and JavaScript to display a web page

**Extra Resources:**

  - [HTML Collection vs NodeList][html-collection-vs-nodelist]

  - [NodeList Doc][doc-nodelist]

[html-collection-vs-nodelist]: https://teamtreehouse.com/community/understanding-the-difference-between-an-htmlcollection-and-a-nodelist

[doc-nodelist]: https://developer.mozilla.org/en-US/docs/Web/API/NodeList

#### Day 4: Pixelate

- Pre-Work:

  - [📖 An Introduction To DOM Events][dom-intro] from yesterday's pre-work

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Event Listeners & Handlers | [📺][dom-events-lec] | [🖼️][dom-events-slides] | [👨‍💻][dom-events-demo] | - | - | - |

| Whack-a-mole | - | - | - | [👾][whack-a-mole-sol]  [👾 with timer][whack-a-mole-sol-timer] | - |

| Pixelate | - | - | - | [👾][pixelate-sol] | [📺][pixelate-rev] |

| Office Hours | [📺][office-hours-lec] | - | [👾][office-hours-demo] | - | - |

| Morning Review | [📺][am-rev-1-4] | [🎟][am-rev-1-4-ticket] | - | [👾][am-rev-1-4-sol] | - |

[//]: # ( Paste in table above >> [📺][dom-events-lec] )

[dom-events-lec]: https://www.youtube.com/watch?v=9kFsz37bI3w&feature=youtu.be

[dom-events-slides]: https://docs.google.com/presentation/d/1Unq4gPwi1N5Dn-8yX5MlWRr4RH_FOosaiU2uEXyogNg/edit?usp=sharing

[//]: # ( Paste in table above >> [👨‍💻][dom-events-demo] )

[dom-events-demo]:01-junior-phase/04-pixelate/event-listener-demo

[//]: # ( Paste in table above >> [👾][whack-a-mole-sol]  [👾 with timer][whack-a-mole-sol-timer] )

[//]: # ( Paste in table above >> [📺][whack-a-mole-sol] )

[whack-a-mole-sol]: 01-junior-phase/04-pixelate/Lab.Whack-a-mole-solution

[whack-a-mole-sol-timer]: 01-junior-phase/04-pixelate/Lab.Whack-a-mole-solution-with-timer

[//]: # ( Paste in table above >> [👾][pixelate-sol] )

[pixelate-sol]: 01-junior-phase/04-pixelate/PairExercise.Pixelate.Solution

[//]: # ( Paste in table above >> [📺][pixelate-rev] )

[pixelate-rev]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmlGmcCCcsf9os6lVu0l5kg-

[//]: # ( Paste in table above >> [📺][office-hours-lec] )

[office-hours-lec]: https://youtu.be/WdrWK5c-m30

[//]: # ( Paste in table above >> [👾][office-hours-demo] )

[office-hours-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/office-hours/week-1/solution

[//]: # ( Paste in table above >> [📺][am-rev-1-4] )

[am-rev-1-4]: https://youtu.be/WYSWXMO5qIo

[//]: # ( Paste in table above >> [🎟][am-rev-1-4-ticket] )

[am-rev-1-4-ticket]: https://forms.gle/HTiRRrksRfAu2Fr58

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-1-4-demo] )

[am-rev-1-4-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-1-4-sol] )

[am-rev-1-4-sol]: 01-junior-phase/exit-ticket-solutions/04-dom-events.md

- **You should be able to:**

  - Hone in on the previous day's objectives

    - Set up event listeners to handle DOM events

    - Manipulate the DOM using the DOM API

    - Explain how a browser uses HTML, CSS, and JavaScript to display a web page

**Extra Resources:**

  - [MDN: Introduction to events](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)

  - [Eloquent JavaScript: Handling Events](https://eloquentjavascript.net/15_event.html)

  - **Visualizing the Event Life Cycle:**

    - [Slow motion event path](https://jsbin.com/exezex/4/edit?css,js,output)

    - [Identifying event phases](http://jsbin.com/unuhec/4/edit)

  - [JavaScript.info: Bubbling and capturing](https://javascript.info/bubbling-and-capturing)

  - [MDN: `EventTarget.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

  - Once you isolate the target element via `event.target`, you can "dot" off of that element to access a number of properties. See here: [MDN: Element Properties](https://developer.mozilla.org/en-US/docs/Web/API/Element#Properties)

    - By doing this, we can add logic to our event handlers when we leverage event delegation in order to prevent code from running on elements we don't want it to.

  - [Overlay demonstrating stopPropagation](https://jsbin.com/fizuyesere/edit?html,js,output)

#### Day 5: Intro to Node

- Pre-Work:

  - [📖 What Exactly is Node.js][nodejs-intro]

[nodejs-intro]: https://medium.freecodecamp.org/what-exactly-is-node-js-ae36e97449f5

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Intro to Node: Modules | [📺][node-modules-lec] | [🖼️][node-slides] | - | [👾][node-basics-sol] | - |

| Intro to Node: Asyncronicity & Callbacks | [📺][node-async-lec] | [🖼️][node-async-slides] | - | [👾][node-shell-sol] | - |

| How to Give and Receive Feedback | - | - | - | - | - |

| Morning Review | [📺][am-rev-1-5] | [🎟][am-rev-1-5-ticket] | - | [👾][am-rev-1-5-sol] | - |

[//]: # ( Paste in table above >> [📺][node-modules-lec] )

[node-modules-lec]: https://youtu.be/9JO5ktOesl0

[node-slides]: https://docs.google.com/presentation/d/15Nwz0S0zWY42WtmhiU3evJF-OKm6kJJHcToA7g-zhPs/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][node-modules-demo] )

[node-modules-demo]: #link-demo-here

[//]: # ( Paste in table above >> [📺][node-async-lec] )

[node-async-lec]: https://www.youtube.com/watch?v=fh3f6UB6mv8&feature=youtu.be

[node-async-slides]: https://docs.google.com/presentation/d/1ayc7OaoS0F18seaijfoa6SdNtmZEJMZ3wN3JdCdwomk/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][node-async-demo] )

[node-async-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][node-basics-sol] )

[node-basics-sol]: 01-junior-phase/05-node/Solution.NodeBasics-main

[//]: # ( Paste in table above >> [👾][node-shell-sol] )

[node-shell-sol]: 01-junior-phase/05-node/Solution.NodeShell-main

[//]: # ( Paste in table above >> [📺][give-recieve-feedback-lec] )

[give-recieve-feedback-lec]: #paste-YouTube-link-here

[//]: # ( Paste in table above >> [🖼️][give-recieve-feedback-slides] )

[give-recieve-feedback-slides]: ###

[//]: # ( Paste in table above >> [📺][am-rev-1-5] )

[am-rev-1-5]: https://youtu.be/oKVaywJHwLY

[//]: # ( Paste in table above >> [🎟][am-rev-1-5-ticket] )

[am-rev-1-5-ticket]: https://forms.gle/fyYTqWFquz5WSbCA9

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-1-5-demo] )

[am-rev-1-5-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-1-5-sol] )

[am-rev-1-5-sol]: 01-junior-phase/exit-ticket-solutions/05-node.md

- **You should be able to:**

  - Explain the purpose of Node

  - Explain asynchronicity in JavaScript and how to handle asynchronous code

**Extra Resources:**

  - [📺 What is the Event Loop Anyway?][event-loop]

[event-loop]: https://www.youtube.com/watch?v=8aGhZQkoFbQ&vl=en

___

### **Week 2: Express, Async/Await, Databases (PostgreSQL), ORMs (Sequelize)**

Click to view

#### Day 1: Express, Handling Asynchronous Operations (`async`/`await`)

- Pre-Work:

  - [📺 Web Dev Simplified: What is an API?][what-is-an-api]

  - [📺 Codecademy: Back-End Web Architecture][codecademy-be-web-arch]

  - 📤 Download an API development tool (your choice) 📥

    - [Postman](https://www.postman.com/)

    - [Insomnia](https://insomnia.rest/)

  - [📖 Async/Await: The Hero Javascript Deserved][twilio-async-await]

[what-is-an-api]: https://youtu.be/tgbRY96q-KM

[codecademy-be-web-arch]: https://www.codecademy.com/articles/back-end-architecture

[twilio-async-await]: https://www.twilio.com/blog/2015/10/asyncawait-the-hero-javascript-deserved.html

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| HTTP and Express 101 | [📺][express-101-lec] | [🖼️][express-101-slides] | [🧑‍💻][express-101-demo] | - | - |

| Express 201 (Wizard News Pt 1) | [📺][express-201-lec] | [🖼️][express-201-slides] | [🧑‍💻][express-201-demo] | [👾][express-wizard-1-sol] | [📺][express-wizard-1-rev] |

| `async`/`await` | [📺][async-await-lec] | [🖼️][async-await-slides] | [🧑‍💻][async-await-demo] | [👾][async-await-sol] | - |

| Morning Review | [📺][am-rev-2-1] | [🎟][am-rev-2-1-ticket] | [🧑‍💻][am-rev-2-1-demo] | [👾][am-rev-2-1-sol] | - |

[//]: # ( Paste in table above >> [📺][express-101-lec] )

[express-101-lec]: https://youtu.be/PshnTdSbKcA

[express-101-slides]: https://docs.google.com/presentation/d/17LTfUVqbK1bz9fMaejOvxebxit_2IomBnAxe7kqYK-E/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][express-101-demo] )

[express-101-demo]: 01-junior-phase/06-express-and-async/express-101-demo

[//]: # ( Paste in table above >> [📺][express-201-lec] )

[express-201-lec]: https://youtu.be/maIyR4sBdXk

[express-201-slides]: https://docs.google.com/presentation/d/1cS548bLr3YMkA9tdwviIzwVU-qO29uOuw_DSJoD4O1o/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][express-201-demo] )

[express-201-demo]: 01-junior-phase/06-express-and-async/express-201-demo

[//]: # ( Paste in table above >> [👾][express-wizard-1-sol] )

[express-wizard-1-sol]: 01-junior-phase/06-express-and-async/Solution.Wizard-news-Part1

[//]: # ( Paste in table above >> [📺][express-wizard-1-rev] )

[express-wizard-1-rev]: https://www.youtube.com/watch?v=w07G_eMRFZ4&ab_channel=FullstackAcademy

[//]: # ( Paste in table above >> [📺][async-await-lec] )

[async-await-lec]: https://youtu.be/48WuIqbk3Nk

[async-await-slides]: https://docs.google.com/presentation/d/1lyOQtOBzNPx5gyc7hupZHdt-qn8XmhIN-xYRQhFal98/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][async-await-demo] )

[async-await-demo]: 01-junior-phase/06-express-and-async/asynchronous-demo

[//]: # ( Paste in table above >> [👾][async-await-sol] )

[async-await-sol]: 01-junior-phase/06-express-and-async/Solution.Lab.AsyncAwait-master

[//]: # ( Paste in table above >> [📺][am-rev-2-1] )

[am-rev-2-1]: https://youtu.be/U0u4uKnfRBo

[//]: # ( Paste in table above >> [🎟][am-rev-2-1-ticket] )

[am-rev-2-1-ticket]: https://forms.gle/kTDn26KUumP9ka1Z8

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-2-1-demo] )

[am-rev-2-1-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/promises

[//]: # ( Paste in table above >> [👾][am-rev-2-1-sol] )

[am-rev-2-1-sol]: 01-junior-phase/exit-ticket-solutions/06-express-async-await.md

- **You should be able to:**

  - Describe the role of a client, a server, and HTTP

  - Describe Express middleware, requests, and responses

  - Handle URL params in an Express route

  - Know when and why you would use `app.use` and `next` in your Express app

  - Use `module.exports` and `require` to create modular applications

  - Handle asynchronous code and Promises with `async`/`await`

**Extra Resources:**

  - [📖 A Simple Explanation of Express Middleware][express-middleware]

  - [📖 Nodejs in Flames][nodejs-flames]

[express-middleware]: https://medium.com/@agoiabeladeyemi/a-simple-explanation-of-express-middleware-c68ea839f498

[nodejs-flames]: https://medium.com/netflix-techblog/node-js-in-flames-ddd073803aa4

#### Day 2: Databases, SQL, Schema Design

- Pre-Work:

  - [📖 Schema Design Overview][schema-design]

[schema-design]: https://medium.com/@kimtnguyen/relational-database-schema-design-overview-70e447ff66f9

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Intro to Databases & PostgreSQL | [📺][db-lec] | [🖼️][db-slides] | - | - | - |

| Intro to SQL | [📺][sql-lec] | [🖼️][sql-slides] | - | - | - |

| Schema Design | [📺][schema-lec] | [🖼️][schema-slides] | - | [👾][schema-sol] | - |

| Morning Review | [📺][am-rev-2-2] | [🎟][am-rev-2-2-ticket] | [👾][am-rev-2-2-sol] | - | - |

[//]: # ( Paste in table above >> [📺][db-lec] )

[db-lec]: https://youtu.be/LYl27t43Ayc

[db-slides]: https://docs.google.com/presentation/d/1_lofGkCsKUjx7oJ7x3UNvgcfcl6S_T0DsrdHfzgoNpw/edit?usp=sharing

[//]: # ( Paste in table above >> [📺][sql-lec] )

[sql-lec]: https://youtu.be/rr31aMR7eio

[sql-slides]: https://docs.google.com/presentation/d/1aN10QfCA64zBROsPwDd3ZQkzyt_qdL9ny2eX8D7s1c0/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][sql-demo] )

[sql-demo]: #link-demo-here

[//]: # ( Paste in table above >> [📺][schema-lec] )

[schema-lec]: https://youtu.be/JcdB3VZUx7Y

[schema-slides]: https://docs.google.com/presentation/d/1As2mGl4QtmhkLy5G6WIsTyfvbu6h3cuTdJKwUB_SOZ8/edit?usp=sharing

[//]: # ( Paste in table above >> [👾][schema-sol] )

[schema-sol]: 01-junior-phase/07-dbs/twitter-example.pdf

[//]: # ( Paste in table above >> [📺][am-rev-2-2] )

[am-rev-2-2]: https://youtu.be/tPrNH35byp8

[//]: # ( Paste in table above >> [🎟][am-rev-2-2-ticket] )

[am-rev-2-2-ticket]: https://forms.gle/gSzG94VW9cL9opc89

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-2-2-demo] )

[am-rev-2-2-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-2-2-sol] )

[am-rev-2-2-sol]: 01-junior-phase/exit-ticket-solutions/07-sql-postgresql-schema.md

- **You should be able to:**

  - Explain what a database is, and why you would use one

  - Write SQL queries using some common keywords (`SELECT`, `FROM`, `WHERE`, `ORDER BY`, `JOIN`, etc)

  - Articulate what a primary key is

  - Articulate what a foreign key is, and why you would use one

  - Explain the differences between a 1-to-1, 1-to-many, and many-to-many relationship

**Extra Resources:**

  - [Normalization][normalization]

  - [SQL-Relationships][sql-relationships]

  - [SQLzoo][sql-zoo]

  - [SQL vs NoSQL][sql-nosql]

  - [📖 SQL W3schools][sql-w3]

  - [📖 What is a RDBMS anyway?][rdbms-what]

[normalization]: https://opentextbc.ca/dbdesign01/chapter/chapter-12-normalization/

[sql-relationships]: https://code.tutsplus.com/articles/sql-for-beginners-part-3-database-relationships--net-8561

[sql-zoo]: https://sqlzoo.net/

[sql-nosql]: https://medium.com/xplenty-blog/the-sql-vs-nosql-difference-mysql-vs-mongodb-32c9980e67b2

[sql-w3]: https://www.w3schools.com/sql/sql_intro.asp

[rdbms-what]: https://www.codecademy.com/articles/what-is-rdbms-sql

#### Day 3: Node-Postgres (`pg`), Express `Router()`

- Pre-Work:

  - [node-postgres (Sections: "Welcome" and "Queries")][pg-docs]

[pg-docs]: https://node-postgres.com/

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Node-Postgres (`pg`) (Wizard News Pt 2) | [📺][node-postgres-lec] | [🖼️][node-postgres-slides] | [🧑‍💻][node-postgres-demo] | [👾][wizard-news-2-sol] | [📺][wizard-news-2-rev] |

| RESTful Routing (Wizard News Pt 3) | [📺][restful-express-lec] | [🖼️][restful-express-slides] | [🧑‍💻][restful-express-demo] | [👾][wizard-news-3-sol] | [📺][wizard-news-3-rev] |

| Morning Review | [📺][am-rev-2-3] | [🎟][am-rev-2-3-ticket] | - | [👾][am-rev-2-3-sol] | - |

[//]: # ( Paste in table above >> [📺][node-postgres-lec] )

[node-postgres-lec]: https://youtu.be/z_dn64-NYd8

[node-postgres-slides]: https://docs.google.com/presentation/d/1oUojPIxCeJcGP0iPoX01XdBdJyBTI4sYuFPaMjRlPdE/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][node-postgres-demo] )

[node-postgres-demo]: 01-junior-phase/08-postgres-and-routing/pg-demo

[//]: # ( Paste in table above >> [👾][wizard-news-2-sol] )

[wizard-news-2-sol]: 01-junior-phase/08-postgres-and-routing/Solution.Wizard-news-Part2

[//]: # ( Paste in table above >> [📺][wizard-news-2-rev] )

[wizard-news-2-rev]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmmM-IVZfeksQqCXLGrKXCrl

[//]: # ( Paste in table above >> [📺][restful-express-lec] )

[restful-express-lec]: https://youtu.be/Ij5GSQRxnr4

[restful-express-slides]: https://docs.google.com/presentation/d/1O_hFzWApi9_mtLuCuvpkc4jna90JTOrfkNpJ5usmuVs/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][restful-express-demo] )

[restful-express-demo]: 01-junior-phase/08-postgres-and-routing/router-demo

[//]: # ( Paste in table above >> [👾][wizard-news-3-sol] )

[wizard-news-3-sol]: 01-junior-phase/08-postgres-and-routing/Solution.Wizard-news-Part3

[//]: # ( Paste in table above >> [📺][wizard-news-3-rev] )

[wizard-news-3-rev]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmlBAQOjZdHZ5EOZta0l9e2L

[//]: # ( Paste in table above >> [📺][am-rev-2-3] )

[am-rev-2-3]: https://youtu.be/O0UX-VBOrXI

[//]: # ( Paste in table above >> [🎟][am-rev-2-3-ticket] )

[am-rev-2-3-ticket]: https://forms.gle/scwcbhBKFXfqN3uK6

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-2-3-demo] )

[am-rev-2-3-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-2-3-sol] )

[am-rev-2-3-sol]: 01-junior-phase/exit-ticket-solutions/08-pg-express-routing-rest.md

- **You should be able to:**

  - Describe the role of `pg` in our stack

  - Define REST and its advantages

  - Create and mount Express Routers

  - Explain the role of body parsing middleware

**Extra Resources:**

- **PostgreSQL**

  - [Documentation][psql-docs]

  - [Tutorial][psql-tutorial]

- **[node-postgres (`pg`)](https://node-postgres.com/)**

  - [Features: Connecting](https://node-postgres.com/features/connecting)

  - [Features: Queries](https://node-postgres.com/features/queries)

  - [API: `pg.Client`](https://node-postgres.com/api/client)

- **Express & RESTful Routing**

  - [Gist: REST Anti-Patterns and Mistakes][rest-mistakes]

  - [RESTful API Resource Naming Convention][restful-api-naming]

  - Express has reincorporated body parsing starting with **v4.16**:

    - [Stackoverflow: `express.json` vs `bodyParser.json`][bparser-v-express]

  - [How bodyParser() works](https://medium.com/@adamzerner/how-bodyparser-works-247897a93b90)

[psql-docs]: https://www.postgresql.org/docs/8.0/tutorial.html

[psql-tutorial]: http://www.postgresqltutorial.com/

[rest-mistakes]: https://gist.github.com/omriBernstein/9f9c5f39afacc84faf44503fd64369cb

[restful-api-naming]: https://restfulapi.net/resource-naming/

[bparser-v-express]: https://stackoverflow.com/a/47232318

#### Day 4: ORM (Sequelize), WikiStack 1

- Pre-Work:

  - [Sequelize An Introduction][sequelize-intro]

  - [Sequelize: Getting Started][sequelize-guide]

    - **Disclaimer:** Some syntax in the FSA Sequelize Guides is **deprecated** (e.g. `findById`). ***Always*** check the version in your `package.json` file and use the appropriate syntax for that specific version.

[sequelize-intro]: https://youtu.be/qsDvJrGMSUY

[sequelize-guide]: https://sequelize-guides.netlify.app/getting-started/

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Intro to ORMs (Sequelize) | [📺][orm-lec-1] | [🖼️][orm-slides-1] | [🧑‍💻][orm-demo] | - | - |

| Sequelize Hooks | [📺][orm-lec-2] | [🖼️][orm-slides-2] | [🧑‍💻][orm-demo] | - | - |

| Wikistack 1 | - | - | - | [👾][wikistack-1-sol] | - |

| Morning Review | [📺][am-rev-2-4] | [🎟][am-rev-2-4-ticket] | - | - | - |

[//]: # ( Paste in table above >> [📺][orm-lec-1] )

[orm-lec-1]: https://youtu.be/9CMwxGUCAZw

[orm-slides-1]: https://docs.google.com/presentation/d/1VjqI_-UjXMmBjV013n2F8_rnuNMnHRyRykzHO7O1UNw/edit?usp=sharing

[//]: # ( Paste in table above >> [📺][orm-lec-2] )

[orm-lec-2]: https://youtu.be/ZwemG7lfbto

[orm-slides-2]: https://docs.google.com/presentation/d/1y86WmG5VObSeNNKR3FzEM0alyGPcII9qfOYinIs8MZM/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][orm-demo] )

[orm-demo]: https://github.com/orlandocaraballo/class-examples/blob/master/sequelize-examples/db.js

[//]: # ( Paste in table above >> [👾][orm-sol] )

[orm-sol]: ###link-sequelize-lab-solution-here

[//]: # ( Paste in table above >> [👾][wikistack-1-sol] )

[wikistack-1-sol]: 01-junior-phase/09-sequelize/Solution.Wikistack1-master

[//]: # ( Paste in table above >> [📺][wikistack-1-rev] )

[wikistack-1-rev]: ###

[//]: # ( Paste in table above >> [📺][am-rev-2-4] )

[am-rev-2-4]: https://youtu.be/YqsG-pDGRt4

[//]: # ( Paste in table above >> [🎟][am-rev-2-4-ticket] )

[am-rev-2-4-ticket]: https://forms.gle/srJq8ydNeAfCVZEh6

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-2-4-demo] )

[am-rev-2-4-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-2-4-sol] )

[am-rev-2-4-sol]: 01-junior-phase/exit-ticket-solutions/09-orms.md

- **You should be able to:**

  - Define an ORM, and explain its pros/cons

  - Define models in Sequelize

  - Associate models with each other

  - Hook into Sequelize lifecycle events

  - Query on models (`findAll`, `findOne`, `create`, "magic methods", etc)

**Extra Resources:**

  - [Official Sequelize Documentation](https://sequelize.org/master/)

  - [How to Locate Magic Methods](https://gist.github.com/jbracht/1778e93ced532b902fc49d70a743ffb8)

  - [Magic Methods Script](https://gist.github.com/b17z/916171a778c4ed7053d2052b0c6f7d55)

  - [Lifecycle Methods](https://gist.github.com/Julissa93/6a6d29874d34a801d603d2522645025f)

#### Day 5: WikiStack 2

- Pre-Work:

  - [Sequelize: Eager Loading][sequelize-eager]

  - [Sequelize: Instance & Class Methods][sequelize-methods]

  - [Express: Error Handling][express-error]

[sequelize-eager]: https://sequelize-guides.netlify.com/eager-loading/

[sequelize-methods]: https://sequelize-guides.netlify.com/instance-and-class-methods/

[express-error]: https://expressjs.com/en/guide/error-handling.html

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Rounding Out Express & Sequelize | [📺][rounding-out-lec] | [🖼️][rounding-out-slides] | [🧑‍💻][rounding-out-lec-demo] | - | - |

| Wikistack 2 | - | - | - | [👾][wikistack-2-sol] | - |

| Afternoon Review | [📺][afternoon-review-2-5] | - | - | [👾 finished project][review-demo-finished] | [👾 coded in-class][review-demo-wip]  |

| Morning Review | [📺][am-rev-2-5] | [🎟][am-rev-2-5-ticket] | - | [👾][am-rev-2-5-sol] | - |

[//]: # ( Paste in table above >> [📺][rounding-out-lec] )

[rounding-out-lec]: https://youtu.be/XwajsAY0rgU

[rounding-out-slides]: https://docs.google.com/presentation/d/1QrlyvcJmexEATyZRBDr3D5GaU5rAqN_v4h9EK8xwYF0/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][rounding-out-lec-demo] )

[rounding-out-lec-demo]: 01-junior-phase/10-rounding-out/express-sequelize-rounding-out-demo

[//]: # ( Paste in table above >> [👾][wikistack-2-sol] )

[wikistack-2-sol]: 01-junior-phase/10-rounding-out/Solution.Wikistack2-main

[//]: # ( Paste in table above >> [📺][afternoon-review-2-5] )

[afternoon-review-2-5]: https://youtu.be/CVCKXGusJIs

[//]: # ( Paste in table above >> [👾 ][review-demo-wip] )

[review-demo-wip]: 01-junior-phase/10-rounding-out/imdb-WIP

[//]: # ( Paste in table above >> [👾][review-demo-finished] )

[review-demo-finished]: 01-junior-phase/10-rounding-out/imdb-FINISHED

[//]: # ( Paste in table above >> [📺][am-rev-2-5] )

[am-rev-2-5]: https://youtu.be/g8xFdQ7YFrs

[//]: # ( Paste in table above >> [🎟][am-rev-2-5-ticket] )

[am-rev-2-5-ticket]: https://forms.gle/79UuJ4jrwH3uhg4u5

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-2-5-demo] )

[am-rev-2-5-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-2-5-sol] )

[am-rev-2-5-sol]: 01-junior-phase/exit-ticket-solutions/10-eager-loading-custom-error.md

- **You should be able to:**

  - Write custom error handlers in Express

  - Utilize eager loading in Sequelize queries

  - Write class and instance methods on Sequelize models

___

### **Week 3: Single-Page Applications, Pillars, React**

Click to view

#### Day 1: Single-Page Applications

[trip-planner-pre]: https://learn.fullstackacademy.com/workshop/5a709ec934f42b0004ded97f/content/5a709ec934f42b0004ded98a/text

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Front-End Modules | [📺][fe-modules-lec] | - | [🧑‍💻][fe-modules-demo] | [👾][fe-modules-lab] | - |

| SPA & AJAX (PuppyBowl) | [📺][spa-ajax-lec] | [🖼️][spa-ajax-slides] | - | [👾][puppybowl-sol] | - |

| Morning Review | - | [🎟][am-rev-3-1-ticket] | - | [👾][am-rev-3-1-sol] | - |

[//]: # ( Paste in table above >> [📺][fe-modules-lec] )

[fe-modules-lec]: https://youtu.be/kn7UBmb0x80

[fe-modules-slides]: https://docs.google.com/presentation/d/1DULROUIBXCIsPsiHHYH2SsFgvxjUqOGJf9o6qKN3SMw/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][fe-modules-demo] )

[fe-modules-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/webpack-practice

[//]: # ( Paste in table above >> [👾][fe-modules-lab] )

[fe-modules-lab]: 01-junior-phase/11-spa/Lab.Webpack-solution

[//]: # ( Paste in table above >> [📺][spa-ajax-lec] )

[spa-ajax-lec]: https://youtu.be/wt_NbLxmJmY

[spa-ajax-slides]: https://docs.google.com/presentation/d/1h14jJR1h3woz1F8S4iFXVS844PkFpEfXgNWdMi0eCBc/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][spa-ajax-demo] )

[spa-ajax-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][puppybowl-sol] )

[puppybowl-sol]: 01-junior-phase/11-spa/PairExercise.PuppyBowl.Solution-main

[//]: # ( Paste in table above >> [📺][am-rev-3-1] )

[am-rev-3-1]: #paste-YouTube-link-here

[//]: # ( Paste in table above >> [🎟][am-rev-3-1-ticket] )

[am-rev-3-1-ticket]: https://forms.gle/scRR4q466F6VAnak9

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-3-1-demo] )

[am-rev-3-1-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-3-1-sol] )

[am-rev-3-1-sol]: 01-junior-phase/exit-ticket-solutions/11-spa-ajax-webpack.md

- **You should be able to:**

  - Define a single page application (SPA)

  - Implement an AJAX request using fetch in a client-side application

  - Import and export objects using ES6 module syntax

  - Identify Webpack’s role as a module bundler

  - Bundle, modularize their front-end code using Webpack

**Extra Resources:**

  - **Client Server Architecture**

    - [MDN: What is a web server?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server)

    - [MDN: HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)

    - [HTTP Status Dogs](https://httpstatusdogs.com/)

    - [TCP/IP, Simplified.](https://whatismyipaddress.com/tcpip-simplified)

    - [TCP/IP Protocol Fundamentals Explained with a Diagram](https://www.thegeekstuff.com/2011/11/tcp-ip-fundamentals/)

  - Front End Modules (Webpack)

    - [Webpack documentation](https://webpack.js.org/concepts/)

    - [Everything I Know About The Script Tag](https://eager.io/blog/everything-I-know-about-the-script-tag)

    - [JavaScript Immediately-invoked Function Expressions (IIFE)](https://flaviocopes.com/javascript-iife/)

  - **SPA & AJAX**

    - [Microsoft invented Ajax: Let's give credit where it's due](https://garrettsmith.net/blog/archives/2006/01/microsoft_inven_1.html)

    - [MDN: AJAX](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX)

    - [MDN: JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)

    - [MDN: JSON.parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)

    - [MDN: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)

    - [Google Developers: Introduction to fetch()](https://developers.google.com/web/updates/2015/03/introduction-to-fetch)

    - [JavaScript.info: Fetch](https://javascript.info/fetch)

    - [dev.to: JavaScript Fetch API and using Async/Await](https://dev.to/shoupn/javascript-fetch-api-and-using-asyncawait-47mp)

  - **ES Modules**

    - [MDN: JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)

#### Day 2: Pillars

- To prepare, see the "📚 Supplemental Study Materials" section at the top of this repo.

- _Thoroughly_ read the [Academic Integrity Policy](01-junior-phase/academic-integrity-policy.md), which includes allowed resources.

#### Day 3: Intro to React

- Pre-Work:

  - [freeCodeCamp: React’s Five Fingers of Death. Master these five concepts, then master React.][react-five]

[react-five]: https://medium.freecodecamp.org/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Intro to React | [📺][intro-react-lec] | [🖼️][intro-react-slides] | [🧑‍💻][intro-react-demo] | [👾][intro-react-sol] | - |

| State & Props | [📺][state-props-lec] | [🖼️][state-props-slides] | - | [👾][state-props-sol] | - |

| Morning Review | [📺][am-rev-3-3] | [🎟][am-rev-3-3-ticket] | - | [👾][am-rev-3-3-sol] | - |

[//]: # ( Paste in table above >> [📺][intro-react-lec] )

[intro-react-lec]: https://youtu.be/gzFxdTL20yI

[intro-react-slides]: https://docs.google.com/presentation/d/1V2xtYaPdcxSnzpFlKzSBErkj_svWXiLKptLhuP0Pb3o/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][intro-react-demo] )

[intro-react-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/react/example

[//]: # ( Paste in table above >> [👾][intro-react-sol] )

[intro-react-sol]: 01-junior-phase/13-react/Lab.FirstComponent.Solution-main

[//]: # ( Paste in table above >> [📺][state-props-lec] )

[state-props-lec]: https://youtu.be/vco7NOvBXPg

[state-props-slides]: https://docs.google.com/presentation/d/17MP47tlpw0zCYSBI2V-l9CyPNtW_UaB0lIcrc075fwQ/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][state-props-demo] )

[state-props-demo]: ###

[//]: # ( Paste in table above >> [👾][state-props-sol] )

[state-props-sol]: 01-junior-phase/13-react/Lab.PropsAndState.Solution-master

[//]: # ( Paste in table above >> [📺][am-rev-3-3] )

[am-rev-3-3]: https://youtu.be/wYPdrswRjFQ

[//]: # ( Paste in table above >> [🎟][am-rev-3-3-ticket] )

[am-rev-3-3-ticket]: https://forms.gle/cLPKCdhbzVKtTrbT9

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-3-3-demo] )

[am-rev-3-3-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-3-3-sol] )

[am-rev-3-3-sol]: 01-junior-phase/exit-ticket-solutions/13-react-intro.md

- **You should be able to:**

  - Write a class or functional component in React

  - Pass, receive, and render props in a React component

  - Render lists of data in JSX

- **Homework:**

  - [React Concepts Video Series][react-concepts]

[react-concepts]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmlkkod59nXwkN4iB04beamn

**Extra Resources:**

  - [React: All the Fundamental React Concepts Jammed Into This Single Medium Article](https://medium.freecodecamp.org/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2)

  - [A Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/)

  - **React documentation**

    - [Components and Props](https://reactjs.org/docs/components-and-props.html)

      - Includes section on "Function and Class Components"

    - [Conditional Rendering](https://reactjs.org/docs/conditional-rendering.html)

      - [MDN: Logical AND (&&)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND)

    - [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html)

      - An in-depth explanation about why keys are necessary if you’re interested in learning more – [Recursing On Children](https://reactjs.org/docs/reconciliation.html#recursing-on-children)

  - [codeburst.io: A quick intro to React’s props.children](https://codeburst.io/a-quick-intro-to-reacts-props-children-cb3d2fce4891)

  - [React Patterns](https://reactpatterns.com/)

  - [Overreacted: Why Do We Write super(props)?](https://overreacted.io/why-do-we-write-super-props/)

  - [Index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)

  - **The Virtual DOM**

    - [Codecademy: React The Virtual DOM](https://www.codecademy.com/articles/react-virtual-dom)

    - [Pluralsight: Virtual DOM - the Difference Maker in React JS](https://www.pluralsight.com/guides/virtual-dom-difference-maker-react-js)

    - [bitsofcode: Understanding the Virtual DOM](https://bitsofco.de/understanding-the-virtual-dom/)

#### Day 4: React Component Lifecycle

- Pre-Work:

  - [React: State and Lifecycle][react-state-and-lifecycle]

[react-state-and-lifecycle]: https://reactjs.org/docs/state-and-lifecycle.html

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Component Lifecycle (Contact List) | [📺][react-lifecycle-lec] | [🖼️][react-lifecycle-slides] | [🧑‍💻][react-lifecycle-demo]
[🧑‍💻 extra demo][react-lifecycle-demo] | [👾][react-lifecycle-sol] | - |

| Morning Review | [📺][am-rev-3-4] | [🎟][am-rev-3-4-ticket] ) | - | [👾][am-rev-3-4-sol] | - |

[//]: # ( Paste in table above >> [📺][react-lifecycle-lec] )

[react-lifecycle-lec]: https://youtu.be/MjHLIOBnerI

[react-lifecycle-slides]: https://docs.google.com/presentation/d/1tA5RcZsdLVFBehh27C6TsDIafCHSMKytwgcybo3fz20/edit?usp=sharing

[//]: # ( Paste in table above >> [👾][react-lifecycle-sol] )

[react-lifecycle-sol]: 01-junior-phase/14-lifecycle/PairExercise.ContactList.Solution

[//]: # ( Paste in table above >> [🧑‍💻] Extra demo[react-lifecycle-extra-demo] )

[react-lifecycle-extra-demo]: 01-junior-phase/14-lifecycle/React-Lifecycle-Extra-Demo

[//]: # ( Paste in table above >> [🧑‍💻][react-lifecycle-demo] )

[react-lifecycle-demo]: 01-junior-phase/14-lifecycle/React-Lifecycle-demo

[//]: # ( Paste in table above >> [📺][am-rev-3-4] )

[am-rev-3-4]: https://youtu.be/zq-zVncdids

[//]: # ( Paste in table above >> [🎟][am-rev-3-4-ticket] )

[am-rev-3-4-ticket]: https://forms.gle/GrgJhgML1itZ9sEeA

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-3-4-demo] )

[am-rev-3-4-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-3-4-sol] )

[am-rev-3-4-sol]: 01-junior-phase/exit-ticket-solutions/14-react-component-lifecycle.md

- **You should be able to:**

  - Hook into React lifecycle events (i.e. `componentDidMount`)

  - Define and update state in a component

  - Handle state changes in response to AJAX, user events, etc

**Extra Resources:**

  - **React documentation**

    - [`setState()`](https://reactjs.org/docs/react-component.html#setstate)

    - [State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)

      - Includes sections on "Using State Correctly" and "The Data Flows Down"

    - [Handling Events](https://reactjs.org/docs/handling-events.html)

      - Includes section on "Passing Arguments to Event Handlers"

      - [Why is my function being called every time the component renders?](https://reactjs.org/docs/faq-functions.html#why-is-my-function-being-called-every-time-the-component-renders)

      - [How do I pass a parameter to an event handler or callback?](https://reactjs.org/docs/faq-functions.html#how-do-i-pass-a-parameter-to-an-event-handler-or-callback)

    - [Composition vs Inheritance](https://reactjs.org/docs/composition-vs-inheritance.html)

    - [Design Principles](https://reactjs.org/docs/design-principles.html)

    - [Virtual DOM and Internals](https://reactjs.org/docs/faq-internals.html)

      - [Optimizing Performance](https://reactjs.org/docs/optimizing-performance.html)

      - [Reconciliation](https://reactjs.org/docs/reconciliation.html)

  - [React Lifecycle Methods Diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

  - [freeCodeCamp: This is why we need to bind event handlers in Class Components in React](https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/)

  - [Overreacted: Why Do We Write super(props)?](https://overreacted.io/why-do-we-write-super-props/)

  - **Interested in learning _React Hooks_? Check out the following resources...**

    - [Fun Fun Function: Trying React Hooks for the first time with Dan Abramov](https://youtu.be/G-aO5hzo1aw)

    - [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)

    - [Wattenberger: Thinking in React Hooks](https://wattenberger.com/blog/react-hooks)

    - [Daily JS: Comparison of state management solutions for React](https://medium.com/dailyjs/comparison-of-state-management-solutions-for-react-2161a0b4af7b#4ce5)

#### Day 5: Juke

- Pre-Work: None!

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Intro to Juke | [📺][intro-juke-lec] | [🖼️][intro-juke-slides] | - | - | - |

| Morning Review | [📺][am-rev-3-5] | [🎟][am-rev-3-5-ticket] |  | [👾 Juke][juke-sol]
[👾 exit ticket][am-rev-3-5-sol] | [📺][juke-review] |

[//]: # ( Paste in table above >> [📺][intro-juke-lec] )

[intro-juke-lec]: https://youtu.be/lEXMW4LGFJU

[intro-juke-slides]: https://docs.google.com/presentation/d/1kg2IfIk1GaGzqXxXCA_GrZehDsXutF0gpAZqCvzt3Mo/edit?usp=sharing

[juke-sol]: 01-junior-phase/15-juke/PairProject.Juke.Solution-master

[juke-review]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmlDnS91P6zf3LrIu-ZPs2pG

[//]: # ( Paste in table above >> [📺][am-rev-3-5] )

[am-rev-3-5]: https://youtu.be/oQHCgzpl-5I

[//]: # ( Paste in table above >> [🎟][am-rev-3-5-ticket] )

[am-rev-3-5-ticket]: https://forms.gle/WWb31AMgnPGwsSev5

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-3-5-demo] )

[am-rev-3-5-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-3-5-sol] )

[am-rev-3-5-sol]: 01-junior-phase/exit-ticket-solutions/15-fullstack-data-flow.md

- **You should be able to:**

  - Describe how data flows between the client and server in a fullstack application

  - Organize a reasonable file structure for a fullstack application

**Extra Resources:**

  - [📺 React Behind the Scenes](https://youtu.be/P6JmkT27awk)

  - [👾 React Behind the Scenes Code](01-junior-phase/react-behind-the-scenes)

  - [Can you `console.log` in JSX?](https://medium.com/javascript-in-plain-english/can-you-console-log-in-jsx-732f2ad46fe1)

  - [Intro to Debugging React Applications](https://medium.com/@baphemot/intro-to-debugging-reactjs-applications-67cf7a50b3dd)

___

### **Week 4: Redux, React Router, Forms**

Click to view

#### Day 1: Redux

- Pre-Work:

  - [Redux: Core Concepts][redux-core-concepts]

  - [Redux: Three Principles][redux-three-principles]

  - [egghead.io: Getting Started with Redux][egghead-redux]

  - [gitconnected: An Unforgettable Way to Learn Redux - The Visual Guide][unforgettable-redux]

[redux-core-concepts]: https://redux.js.org/introduction/core-concepts

[redux-three-principles]: https://redux.js.org/introduction/three-principles

[egghead-redux]: https://egghead.io/lessons/react-redux-the-single-immutable-state-tree

[unforgettable-redux]: https://levelup.gitconnected.com/an-unforgettable-way-to-learn-redux-f36afd38c966

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Intro to Redux (Redux Bank) | [📺][intro-redux-lec] | [🖼️][intro-redux-slides] | - | [👾][redux-bank-sol] | - |

| Action Types and Action Creators | [📺][action-types-creators-lec] | - | [🧑‍💻][action-types-creators-demo] | - | - |

| Pixelate-Redux | - | - | - | [👾][pixelate-redux-sol] | - |

| React-Redux `connect` | [📺][connect-lec] | [🖼️][connect-slides] | [🧑‍💻][connect-demo] | - | - |

| Morning Review | [📺][am-rev-4-1] | [🎟][am-rev-4-1-ticket] | - | [👾][am-rev-4-1-sol] | - |

[//]: # ( Paste in table above >> [📺][intro-redux-lec] )

[intro-redux-lec]: https://youtu.be/UZFd8SyoUgI

[intro-redux-slides]: https://docs.google.com/presentation/d/1GRN3chkUUxoWm94DgPy_T6MtvDRhOGYMnA8Djdo3rmA/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][intro-redux-demo] )

[intro-redux-demo]: ###

[//]: # ( Paste in table above >> [👾][redux-bank-sol] )

[redux-bank-sol]: 01-junior-phase/16-redux/Lab.ReduxBank-solution

[//]: # ( Paste in table above >> [📺][action-types-creators-lec] )

[action-types-creators-lec]: https://youtu.be/Hd6ghiT3l_Q

[//]: # ( Paste in table above >> [🧑‍💻][action-types-creators-demo] )

[action-types-creators-demo]: 01-junior-phase/16-redux/redux-modularization-demo

[//]: # ( Paste in table above >> [👾][pixelate-redux-sol] )

[pixelate-redux-sol]: 01-junior-phase/16-redux/PairExercise.Pixelate-Redux.Solution-main

[//]: # ( Paste in table above >> [📺][connect-lec] )

[connect-lec]: https://youtu.be/MTaMo2SFWUk

[connect-slides]: https://docs.google.com/presentation/d/16wYjdImk0qyF3PCZYb2hm8ynLaRfkeWx9i-SlLmpnLs/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][connect-demo] )

[connect-demo]: 01-junior-phase/16-redux/ReactReduxConnect-demo

[//]: # ( Paste in table above >> [👾][connect-sol] )

[connect-sol]: ###

[//]: # ( Paste in table above >> [📺][am-rev-4-1] )

[am-rev-4-1]: https://youtu.be/-GLwaDKm3AQ

[//]: # ( Paste in table above >> [🎟][am-rev-4-1-ticket] )

[am-rev-4-1-ticket]: https://forms.gle/yzXxBG2u5oJFzvsp9

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-4-1-demo] )

[am-rev-4-1-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-4-1-sol] )

[am-rev-4-1-sol]: 01-junior-phase/exit-ticket-solutions/16-redux.md

- **You should be able to:**

  - Create a Redux store (with a proper reducer)

  - Write action types and creators corresponding to your store

  - Subscribe to store changes

  - Dispatch state-changing actions to the store

#### Day 2: React-Redux, Thunks, `combineReducers`

- Pre-Work:

  - [React-redux "connect" explained][connect-explained]

  - [Thunks in Redux: The Basics][thunks-the-basics]

[connect-explained]: https://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/

[thunks-the-basics]: https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| React-Redux `connect` review | [📺][connect-review-lec] | - | [🧑‍💻][connect-review-demo] | [👾][connect-sol] | - |

| Redux Groceries | - | - | - | [👾][redux-groceries-sol] | - |

| Redux Thunks | [📺][thunks-lec] | - | [🧑‍💻][thunks-demo] | [👾][thunks-sol] | - |

| Redux `combineReducers` | [📺][combinereducers-lec] | - | [🧑‍💻][combineReducers-demo] | [👾][combinereducers-sol] | - |

| Morning Review | [📺][am-rev-4-2] | [🎟][am-rev-4-2-ticket] | [🧑‍💻][am-rev-4-2-demo] | [👾][am-rev-4-2-sol] | - |

[//]: # ( Paste in table above >> [📺][connect-review-lec] )

[connect-review-lec]: https://youtu.be/XEnxApHk9DQ

[//]: # ( Paste in table above >> [🧑‍💻][connect-review-demo] )

[connect-review-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/connect/app

[//]: # ( Paste in table above >> [👾][connect-sol] )

[connect-sol]: 01-junior-phase/17-connect/Lab.ReactAndRedux-solution-connect-lab

[//]: # ( Paste in table above >> [👾][redux-groceries-sol] )

[redux-groceries-sol]: 01-junior-phase/17-connect/PairExercise.ReduxGroceries-Solution

[//]: # ( Paste in table above >> [📺][thunks-lec] )

[thunks-lec]: https://youtu.be/oA_hKNNetjE

[thunks-slides]: https://docs.google.com/presentation/d/1fnISsDpLf-uG5vhGMwTzERSv0BHxg_fysz-dMsIhhWo/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][thunks-demo] )

[thunks-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/connect/app

[//]: # ( Paste in table above >> [👾][thunks-sol] )

[thunks-sol]: 01-junior-phase/17-connect/Lab.Thunk-solution

[//]: # ( Paste in table above >> [📺][combinereducers-lec] )

[combinereducers-lec]: https://youtu.be/y5DG2WGKbrc

[//]: # ( Paste in table above >> [🧑‍💻][combineReducers-demo] )

[combineReducers-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/connect/app

[//]: # ( Paste in table above >> [👾][combinereducers-sol] )

[combinereducers-sol]: 01-junior-phase/17-connect/Lab.CombineReducers-solution

[//]: # ( Paste in table above >> [📺][am-rev-4-2] )

[am-rev-4-2]: https://youtu.be/-mISnbxIMt0

[//]: # ( Paste in table above >> [🎟][am-rev-4-2-ticket] )

[am-rev-4-2-ticket]: https://forms.gle/MykudAKGdpmX9pxFA

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-4-2-demo] )

[am-rev-4-2-demo]: https://excalidraw.com/#json=6150202817773568,vgPZ3umE9ySYzgFS5XCuCg

[//]: # ( Paste in table above >> [👾][am-rev-4-2-sol] )

[am-rev-4-2-sol]: 01-junior-phase/exit-ticket-solutions/17-thunks-combine-reducers-connect.md

- **You should be able to:**

  - `connect` a React component to the Redux store, mapping necessary state/dispatch to props

  - Create a Redux store (with a proper reducer and any necessary middleware)

  - Use thunks to perform AJAX requests with a React/Redux application

  - Use `combineReducers` to split your reducer function into separate functions, each managing independent slices of your store's state

**Extra Resources:**

  - [Redux Essentials, Part 5: Async Logic and Data Fetching](https://redux.js.org/tutorials/essentials/part-5-async-logic)

    - [Loading State for Requests](https://redux.js.org/tutorials/essentials/part-5-async-logic#loading-state-for-requests)

  - [egghead.io's Redux: Displaying Loading Indicators](https://egghead.io/lessons/javascript-redux-displaying-loading-indicators) – Taught by Dan Abramov!

#### Day 3: React Router, Readium

- Pre-Work:

  - [A Simple React Router v4 Tutorial][react-router-tutorial]

  - [React Router: Quick Start][react-router-quick-start]

[react-router-tutorial]: https://blog.pshrmn.com/simple-react-router-v4-tutorial/

[react-router-quick-start]: https://reacttraining.com/react-router/web/guides/quick-start

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| React Router 101 | [📺][router-101-lec] | [🖼️][router-101-slides] | - | [👾][router-lab-sol] | - |

| React Router 201 | [📺][router-201-lec] | [🖼️][router-201-slides] | [🧑‍💻][router-demo]  | - | - |

| Readium | - | - | - | [👾][readium-sol] | - |

| Morning Review | - | [🎟][am-rev-4-3-ticket] | - | [👾][am-rev-4-3-sol] | - |

[//]: # ( Paste in table above >> [📺][router-101-lec] )

[router-101-lec]: https://youtu.be/XMpkswl0wwo

[router-101-slides]: https://docs.google.com/presentation/d/1lfxgExnD_gjI97Dalwk_Gskefk49AFMm3YL4g-hsljc/edit?usp=sharing

[//]: # ( Paste in table above >> [👾][router-lab-sol] )

[router-lab-sol]: 01-junior-phase/18-react-router/Lab.ReactRouter.Solution-master

[//]: # ( Paste in table above >> [📺][router-201-lec] )

[router-201-lec]: https://youtu.be/B1H3bS4_eAQ

[router-201-slides]: https://docs.google.com/presentation/d/18aYozkFFmBQ1BNQCznw2T6tkF8O9dONFPPtrRnxSf28/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][router-demo] )

[router-demo]: 01-junior-phase/18-react-router/router-nalgene-demo-start

[//]: # ( Paste in table above >> [👾][readium-sol] )

[readium-sol]: 01-junior-phase/18-react-router/PairExercise.Readium-with-Redux.Solution-master

[//]: # ( Paste in table above >> [📺][readium-rev] )

[readium-rev]: ###

[//]: # ( Paste in table above >> [📺][am-rev-4-3] )

[am-rev-4-3]: https://youtu.be/k0zh-Bm9FNY

[//]: # ( Paste in table above >> [🎟][am-rev-4-3-ticket] )

[am-rev-4-3-ticket]: https://forms.gle/cdhnhkZyVUD94Cco8

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-4-3-demo] )

[am-rev-4-3-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-4-3-sol] )

[am-rev-4-3-sol]: 01-junior-phase/exit-ticket-solutions/18-react-router.md

- **You should be able to:**

  - Use the URL bar to manage state and control navigation within a SPA using the `react-router-dom` library

  - Set up `HashRouter`/`BrowserRouter` in a parents component to handle routing

  - Swap views using `Route` components

  - Navigate to specific routes using `Link` components

**Extra Resources:**

  - [MDN: id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)

  - [MDN: Document fragment identifier](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment)

  - [MDN: History.back()](https://developer.mozilla.org/en-US/docs/Web/API/History/back)

  - [MDN: History.forward()](https://developer.mozilla.org/en-US/docs/Web/API/History/forward)

  - [MDN: Window.location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location)

  - [React Router documentation](https://reacttraining.com/react-router/web/guides/quick-start)

#### Day 4: React Forms

- Pre-Work:

  - [React: Forms][react-forms-docs]

[react-forms-docs]: https://reactjs.org/docs/forms.html

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| React Forms 101 + 201 | [📺][forms-lec] | [🖼️][forms-slides] | [🧑‍💻][forms-demo] | [👾][forms-lab-sol] | - |

| Todo List | - | - | - | [👾][todo-list-sol] | - |

| Morning Review | [📺][am-rev-4-4] | [🎟][am-rev-4-4-ticket] | - | [👾][am-rev-4-4-sol] | - |

[//]: # ( Paste in table above >> [📺][forms-lec] )

[forms-lec]: https://youtu.be/IsgaHyrGJiw

[forms-slides]: https://docs.google.com/presentation/d/1rMPRpf5jAaznQlqagvHfM74l4CWBWods2IfmmMlcDKM/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][forms-demo] )

[forms-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/react-forms

[//]: # ( Paste in table above >> [👾][forms-lab-sol] )

[forms-lab-sol]: 01-junior-phase/19-react-forms/Solution.ReactForms-main

[//]: # ( Paste in table above >> [👾][todo-list-sol] )

[todo-list-sol]: 01-junior-phase/19-react-forms/PairExercise.TodoList.V2.Solution-main

[//]: # ( Paste in table above >> [📺][todo-list-rev] )

[todo-list-rev]: ###

[//]: # ( Paste in table above >> [📺][am-rev-4-4] )

[am-rev-4-4]: https://youtu.be/F-o-qYE7a2s

[//]: # ( Paste in table above >> [🎟][am-rev-4-4-ticket] )

[am-rev-4-4-ticket]: https://forms.gle/VFviarmVVCtXGMjM9

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-4-4-demo] )

[am-rev-4-4-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-4-4-sol] )

[am-rev-4-4-sol]: 01-junior-phase/exit-ticket-solutions/19-react-forms.md

- **You should be able to:**

  - Explain the difference between a controlled and uncontrolled form

  - Build a form using React

  - Explain the difference between local state and application state

**Extra Resources:**

  - **React Forms**

    - [React-Champ: Part I: Controlled vs Uncontrolled Components][controlled-uncontrolled-1]

    - [React-Champ: Part II: When and how to use uncontrolled components][controlled-uncontrolled-2]

    - [Building forms using React - everything you need to know][codementor-react-forms]

  - **MDN Documentation: HTML Forms**

    - [Your first form](https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form)

    - [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)

    - [``: The Input (Form Input) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)

    - [``: The Button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)

    - [HTMLFormElement: submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event)

  [controlled-uncontrolled-1]: https://medium.com/@adarshsingh1407/react-champ-part-i-controlled-vs-uncontrolled-components-9af452277d79

  [controlled-uncontrolled-2]: https://medium.com/@adarshsingh1407/react-champ-part-ii-when-to-use-controlled-uncontrolled-components-870f42cf398

  [codementor-react-forms]: https://www.codementor.io/blizzerand/building-forms-using-react-everything-you-need-to-know-iz3eyoq4y

#### Day 5: Sockets

- Pre-Work:

  - [Pusher: What are WebSockets?][pusher-sockets]

  - [treehouse: An Introduction to WebSockets][treehouse-sockets]

[pusher-sockets]: https://pusher.com/websockets

[treehouse-sockets]: https://blog.teamtreehouse.com/an-introduction-to-websockets

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| TCP, WebSockets & Socket.IO | [📺][sockets-lec] | [🖼️][sockets-slides] | [🧑‍💻][sockets-demo] | [👾][sockets-sol] | - |

| StackChat | - | - | - | [👾][stackchat-sol] | [📺][stackchat-rev] |

[//]: # ( Paste in table above >> [📺][sockets-lec] )

[sockets-lec]: https://youtu.be/4hoTF0YtzkI

[sockets-slides]: https://docs.google.com/presentation/d/1-IVJ6SVkx6Ds2pSJogB44bEZp1Z8OTtrMFiaQD7er_w/edit?usp=sharing

[//]: # ( Paste in table above >> [🧑‍💻][sockets-demo] )

[sockets-demo]: 01-junior-phase/20-sockets/bookshelf-demo

[//]: # ( Paste in table above >> [👾][sockets-sol] )

[sockets-sol]: 01-junior-phase/20-sockets/Lab.Sockets-solution

[//]: # ( Paste in table above >> [👾][stackchat-sol] )

[stackchat-sol]: 01-junior-phase/20-sockets/PairProject.StackChat-solution

[//]: # ( Paste in table above >> [📺][stackchat-rev] )

[stackchat-rev]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmk_yzrwLejLCOBaC5kkRsIm

[//]: # ( No Exit Ticket or Morning Review for Sockets )

- **You should be able to:**

  - Define the networking layers IP, TCP, and HTTP

  - Describe how TCP establishes a connection with a server

  - Define websockets and event emitters

  - Implement websockets using socket.io

**Extra Resources:**

  - [Socket.IO cheatsheet](https://socket.io/docs/emit-cheatsheet/)

  - [Socket.IO documentation](https://socket.io/docs/)

___

### Week 6: Node / Databases Review

Click to view

#### Day 1: Node

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| Node 1 | [📺][node-1-lec] | - | [🧑‍💻][node-1-demo] |

| Node 2 | [📺][node-2-lec] | - | -  |

| Morning Review | [📺][am-replay-rev-1-1] | - | - |

[//]: # ( Paste in table above >> [📺][node-1-lec] )

[node-1-lec]: https://youtu.be/Ak9gKtxNVns

[//]: # ( Paste in table above >> [🧑‍💻][node-1-demo] )

[node-1-demo]: 01-junior-phase/21-node-replay

[//]: # ( Paste in table above >> [📺][node-2-lec] )

[node-2-lec]: https://youtu.be/K6XXGrOJWOg

[//]: # ( Paste in table above >> [📺][node-rev] )

[node-rev]: ###

[//]: # ( Paste in table above >> [📺][am-replay-rev-1-1] )

[am-replay-rev-1-1]: https://youtu.be/BmnTtLdhJEQ

##### Prior Content:

[Intro to Node](#day-5-intro-to-node)

#### Day 2: Express and Async / Await

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| Express 1 | [📺][replay-express-1-lec] | - | [🧑‍💻][replay-express-1-demo] |

| Express 2 | [📺][replay-express-2-lec] | - | [🧑‍💻][replay-express-2-demo]  |

| Async / Await | [📺][replay-async_await-lec] | - | [🧑‍💻][replay-async_await-demo] |

| Morning Review | [📺][replay-am-rev-1-2] | - | - |

[//]: # ( Paste in table above >> [📺][replay-express-1-lec] )

[replay-express-1-lec]: https://youtu.be/2qGYP0LmV0g

[//]: # ( Paste in table above >> [🧑‍💻][replay-express-1-demo] )

[replay-express-1-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/express-examples

[//]: # ( Paste in table above >> [📺][replay-express-2-lec] )

[replay-express-2-lec]: https://github.com/orlandocaraballo/class-examples/tree/master/express-examples

[//]: # ( Paste in table above >> [🧑‍💻][replay-express-2-demo] )

[replay-express-2-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/express-examples

[//]: # ( Paste in table above >> [🧑‍💻][replay-async_await-lec] )

[replay-async_await-lec]: https://youtu.be/TDiZ2OIn8hk

[//]: # ( Paste in table above >> [🧑‍💻][replay-async_await-demo] )

[replay-async_await-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/promises

[//]: # ( Paste in table above >> [📺][replay-am-replay-rev-1-2] )

[replay-am-rev-1-2]: https://youtu.be/yYCcC09Ywuw

##### Prior Content:

[Intro to Express + Async / Await](#day-1-express-handling-asynchronous-operations-asyncawait)

#### Day 3: Databases

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| SQL | [📺][replay-sql-lec] | - | [🧑‍💻][replay-sql-demo] |

| Schema Design | [📺][replay-schema-lec] | - | [🧑‍💻][replay-schema-demo] |

| Morning Review | [📺][replay-am-rev-1-3] | - | - |

[//]: # ( Paste in table above >> [📺][replay-sql-lec] )

[replay-sql-lec]: https://youtu.be/ipFZQvAWXMU

[//]: # ( Paste in table above >> [🧑‍💻][replay-sql-demo] )

[replay-sql-demo]: 01-junior-phase/23-dbs-replay/sql-demo

[//]: # ( Paste in table above >> [📺][replay-schema-lec] )

[replay-schema-lec]: https://youtu.be/vB8h3lItcgg

[//]: # ( Paste in table above >> [🧑‍💻][replay-schema-demo] )

[replay-schema-demo]: https://excalidraw.com/#json=5184912139223040,BSWBon7ywmyuYDrcl1ohuw

[//]: # ( Paste in table above >> [📺][replay-am-rev-1-3] )

[replay-am-rev-1-3]: https://youtu.be/c0K_ceGhQmQ

##### Prior Content:

[Intro to Databases](#day-2-databases-sql-schema-design)

#### Day 4: `pg`

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| `pg` | [📺][replay-pg-lec] | - | [🧑‍💻][replay-pg-demo] |

| Express + `pg` | [📺][replay-express-pg-lec] | - | [🧑‍💻][replay-express-pg-demo] |

| Morning Review | [📺][replay-am-rev-1-4] | - | - |

[//]: # ( Paste in table above >> [📺][replay-pg-lec] )

[replay-pg-lec]: https://youtu.be/DR-cq3Ux-fM

[//]: # ( Paste in table above >> [🧑‍💻][replay-pg-demo] )

[replay-pg-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/pg

[//]: # ( Paste in table above >> [📺][replay-express-pg-lec] )

[replay-express-pg-lec]: https://youtu.be/fqXTGfJR6fU

[//]: # ( Paste in table above >> [🧑‍💻][replay-express-pg-demo] )

[replay-express-pg-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/express-router

[//]: # ( Paste in table above >> [📺][replay-am-rev-1-4] )

[replay-am-rev-1-4]: https://youtu.be/MkKVffmxgsg

##### Prior Content:

[Intro to pg](#day-3-node-postgres-pg-express-router)

#### Day 5: `Sequelize`

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| `Sequelize` | [📺][replay-orm-lec] | - | [🧑‍💻][replay-orm-demo] |

| Morning Review | [📺][replay-am-rev-1-5] | - | - |

[//]: # ( Paste in table above >> [📺][replay-orm-lec] )

[replay-orm-lec]: https://youtu.be/97QEzSuaW18https://youtu.be/MkKVffmxgsg

[//]: # ( Paste in table above >> [🧑‍💻][replay-orm-demo] )

[replay-orm-demo]: 01-junior-phase/25-orms-replay

[//]: # ( Paste in table above >> [📺][replay-am-rev-1-5] )

[replay-am-rev-1-5]: https://youtu.be/jwCRBKyeNPc

##### Prior Content:

[Intro to ORMs](#day-4-orm-sequelize-wikistack-1)

___

### Week 7: From Sequelize to React Review

Click to view

#### Day 1: Express + Sequelize

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| Express / Sequelize | [📺][express-sequelize-lec] | - | [🧑‍💻][express-sequelize-demo] |

| Morning Review | [📺][am-replay-rev-2-1] | - | - |

[//]: # ( Paste in table above >> [📺][express-sequelize-lec] )

[express-sequelize-lec]: https://youtu.be/WGgGiBXBdlw

[//]: # ( Paste in table above >> [🧑‍💻][express-sequelize-demo] )

[express-sequelize-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/express-sequelize

[//]: # ( Paste in table above >> [📺][am-replay-rev-2-1] )

[am-replay-rev-2-1]: https://youtu.be/BscQpsnYwpc

##### Prior Content:

[WikiStack 2](#day-5-wikistack-2)

#### Day 2: Intro to the Client Side

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| Front-end Modules | [📺][front-end-modules-lec-replay] | - | [🧑‍💻][front-end-modules-demo-replay] Front-end modules
 [🧑‍💻][webpack-demo-replay] Webpack 
[🧑‍💻][front-end-modules-diagram] |

| Intro to SPA / AJAX | [📺][spa-ajax-lec-replay] | - | [🧑‍💻][spa-ajax-demo-replay] |

| Morning Review | [📺][am-replay-rev-2-2] | - | - |

[//]: # ( Paste in table above >> [📺][front-end-modules-lec-replay] )

[front-end-modules-lec-replay]: https://youtu.be/2PjXwU98MYE

[//]: # ( Paste in table above >> [🧑‍💻][front-end-modules-demo-replay] )

[front-end-modules-demo-replay]: 01-junior-phase/27-spa-replay/modules-demo

[//]: # ( Paste in table above >> [🧑‍💻][front-end-modules-diagram] )

[front-end-modules-diagram]:

https://excalidraw.com/#json=5745940631650304,RdU4Ym5uPCM3tvrFKnY7oA

[//]: # ( Paste in table above >> [🧑‍💻][webpack-demo-replay] )

[webpack-demo-replay]: 01-junior-phase/27-spa-replay/webpack-demo

[//]: # ( Paste in table above >> [📺][spa-ajax-lec-replay] )

[spa-ajax-lec-replay]: https://youtu.be/8SFGyvaiVZ8

[//]: # ( Paste in table above >> [🧑‍💻][spa-ajax-demo-replay] )

[spa-ajax-demo-replay]: 01-junior-phase/27-spa-replay/ajax-demo

[//]: # ( Paste in table above >> [📺][am-replay-rev-2-2] )

[am-replay-rev-2-2]: https://youtu.be/o16gHiI1Jdk

##### Prior Content:

[Single-Page Applications](#day-1-single-page-applications)

#### Day 3: React

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| Intro to React | [📺][react-replay-lec] | - | [🧑‍💻][react-demo-replay] |

| State and Props | [📺][state-props-replay-lec] | - | [🧑‍💻][state-props-demo-replay] |

| Morning Review | [📺][am-replay-rev-2-3] | - | - |

[//]: # ( Paste in table above >> [📺][react-replay-lec] )

[react-replay-lec]: https://youtu.be/MLa03jjmerE

[//]: # ( Paste in table above >> [🧑‍💻][react-demo-replay] )

[react-demo-replay]: 01-junior-phase/28-react-replay/magic-8-ball-demo

[//]: # ( Paste in table above >> [📺][state-props-replay-lec] )

[state-props-replay-lec]: https://youtu.be/tY48QY9GjC4

[//]: # ( Paste in table above >> [🧑‍💻][state-props-demo-replay] )

[state-props-demo-replay]: 01-junior-phase/28-react-replay/pizza-demo

[//]: # ( Paste in table above >> [📺][am-replay-rev-2-3] )

[am-replay-rev-2-3]: https://youtu.be/fwf6iQCB9eM

##### Prior Content:

[Intro to React](#day-3-intro-to-react)

#### Day 4: React Component Lifecycle

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| Component Lifecycle | [📺][component-lifecycle-lec] | - | [🧑‍💻][component-lifecycle-demo] |

| Morning Review | [📺][am-replay-rev-2-4] | - | - |

[//]: # ( Paste in table above >> [📺][component-lifecycle-lec] )

[component-lifecycle-lec]: https://youtu.be/dFUjZ5Cdrl8

[//]: # ( Paste in table above >> [🧑‍💻][component-lifecycle-demo] )

[component-lifecycle-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/react-lifecycle

[//]: # ( Paste in table above >> [📺][am-replay-rev-2-4] )

[am-replay-rev-2-4]: https://youtu.be/aHgRSkOCXOc

##### Prior Content:

[React Component Lifecycle](#day-4-react-component-lifecycle)

#### Day 5: Fullstack Data Flow / Juke

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| Fullstack Data Flow | [📺][fullstack-data-flow-lec] | - | [🧑‍💻][fullstack-data-flow-demo] |

| Morning Review | [📺][am-replay-rev-2-5] | - | - |

[//]: # ( Paste in table above >> [📺][fullstack-data-flow-lec] )

[fullstack-data-flow-lec]: https://youtu.be/ayV7flphI1I

[//]: # ( Paste in table above >> [🧑‍💻][fullstack-data-flow-demo] )

[fullstack-data-flow-demo]:https://excalidraw.com/#json=5070617204228096,5qj4vXbJzxJ84FB8KVdxtg

[//]: # ( Paste in table above >> [📺][am-replay-rev-2-5] )

[am-replay-rev-2-5]: https://youtu.be/ZpXBPo0wO7g

##### Prior Content:

[Juke](#day-5-react-forms)

___

### Week 8: From Redux to React Forms Review

Click to view

#### Day 1: Redux

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| Functional Programming | [📺][fp-replay-lec] | - | [🧑‍💻][fp-replay-demo] |

| Redux | [📺][redux-replay-lec] | - | [🧑‍💻][redux-replay-demo] |

| React-Redux `connect` | [📺][connect-lec] | - |[🧑‍💻][connect-demo] |

| Morning Review | [📺][am-replay-rev-3-1] | - | - |

[//]: # ( Paste in table above >> [📺][fp-replay-lec] )

[fp-replay-lec]: https://youtu.be/jw1yGHa5t3k

[//]: # ( Paste in table above >> [📺][redux-replay-lec] )

[redux-replay-lec]: https://youtu.be/aFtlMW3qXxA

[//]: # ( Paste in table above >> [🧑‍💻][fp-replay-demo] )

[fp-replay-demo]: https://github.com/orlandocaraballo/class-examples/blob/master/redux/simple

[//]: # ( Paste in table above >> [🧑‍💻][redux-replay-demo] )

[redux-replay-demo]: https://github.com/orlandocaraballo/class-examples/blob/master/redux/simple/main.js

[//]: # ( Paste in table above >> [📺][connect-lec] )

[connect-lec]: https://youtu.be/kCAaSAUDk2M

[//]: # ( Paste in table above >> [🧑‍💻][connect-demo] )

[connect-demo]: https://github.com/orlandocaraballo/class-examples/tree/master/connect/app

[//]: # ( Paste in table above >> [📺][am-replay-rev-3-1] )

[am-replay-rev-3-1]: https://youtu.be/-uljUfBcj_I

##### Prior Content:

[Redux](#day-1-redux)

#### Day 2: React-Redux, Thunks, `combineReducers`

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| React-Redux `connect` review | [📺][react-redux-lec-replay] | - | [🧑‍💻][react-redux-demo-replay] |

| Redux Thunks  | [📺][thunks-lec-replay] | - | [🧑‍💻][thunks-demo-replay] |

| Redux `combineReducers`  | [📺][combine-reducers-lec-replay] | - | [🧑‍💻][combine-reducers-demo-replay] |

| Morning Review | [📺][am-replay-rev-3-2] | - | - |

[//]: # ( Paste in table above >> [📺][react-redux-lec-replay] )

[react-redux-lec-replay]: https://youtu.be/-uljUfBcj_I

[//]: # ( Paste in table above >> [🧑‍💻][react-redux-demo-replay] )

[react-redux-demo-replay]: https://excalidraw.com/#json=uG3f21z1j2kfA9lEAYVc2,zAEuUq97NItmgFzM37wg6w

[//]: # ( Paste in table above >> [📺][thunks-lec-replay] )

[thunks-lec-replay]: https://youtu.be/E39xvmR0BO8

[//]: # ( Paste in table above >> [🧑‍💻][thunks-demo-replay] )

[thunks-demo-replay]: 01-junior-phase/30-redux-thunks-replay/thunk-demo-end

[//]: # ( Paste in table above >> [📺][combine-reducers-lec-replay] )

[combine-reducers-lec-replay]: https://youtu.be/VXmXFmh9BnQ

[//]: # ( Paste in table above >> [🧑‍💻][combine-reducers-demo-replay] )

[combine-reducers-demo-replay]: 01-junior-phase/30-redux-thunks-replay/combine-reducers-end

[//]: # ( Paste in table above >> [📺][am-replay-rev-3-2] )

[am-replay-rev-3-2]: https://youtu.be/vJrJdhPv4rM

##### Prior Content:

[React-Redux Connect](#day-2-react-redux)

#### Day 3: React Router, Readium

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| React Router 101 | [📺][router-101-replay-lec] | - | [🧑‍💻][router-101-demo-replay] |

| React Router 201 | [📺][router-201-replay-lec] | - | [🧑‍💻][router-201-demo-replay] |

| Morning Review | [📺][am-replay-rev-3-3] | - | - |

[//]: # ( Paste in table above >> [📺][router-101-replay-lec] )

[router-101-replay-lec]: https://youtu.be/On4FSHB-Z3w

[//]: # ( Paste in table above >> [🧑‍💻][router-101-demo-replay] )

[router-101-demo-replay]: https://github.com/orlandocaraballo/class-examples/tree/master/react-router-webpack

[//]: # ( Paste in table above >> [📺][router-201-replay-lec] )

[router-201-replay-lec]: https://youtu.be/cgOVXccgYYY

[//]: # ( Paste in table above >> [🧑‍💻][router-201-demo-replay] )

[router-201-demo-replay]: https://github.com/orlandocaraballo/class-examples/tree/master/react-router-webpack

[//]: # ( Paste in table above >> [📺][am-replay-rev-3-3] )

[am-replay-rev-3-3]: https://youtu.be/Ck4r-zTI5WM

##### Prior Content:

[React Router](#day-3-react-router)

#### Day 4: Veterans Day

#### Day 5: React Forms

| Topic | Lecture | Slides | Demo |

| ----- | ------- | ------ | ---- |

| React Forms 101 + 201 | [📺][forms-replay-lec] | - | - |

| Morning Review | [📺][am-replay-rev-2-5] | - | - |

[//]: # ( Paste in table above >> [📺][forms-replay-lec] )

[forms-replay-lec]: https://youtu.be/RFsU7vX5PT8

[//]: # ( Paste in table above >> [🧑‍💻][forms-replay-demo] )

[forms-replay-demo]:/01-junior-phase/32-react-forms

[//]: # ( Paste in table above >> [📺][am-replay-rev-2-5] )

[am-replay-rev-3-5]: https://youtu.be/pVsM1YC0ZbU

##### Prior Content:

[React Forms](#day-4-react-forms)

___

### **Week 9: Course Review, Junior Phase Final Project (JPFP), Senior Checkpoint**

Click to view

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Goodie Bag | - | - | - | - | - |

| Draw the Stack | - | - | - | - | - |

| Intro to JPFP | - | - | - | - | - |

[//]: # ( Paste in table above >> [📺][goodie-bag-lec] )

[goodie-bag-lec]: #paste-YouTube-link-here

[//]: # ( Paste in table above >> [🔗][goodie-bag] >> ALREADY LINKED AT TOP IN SUPPLEMENTAL STUDY MATERIALS )

[//]: # ( Paste in table above >> [👾][goodie-bag-sol] )

[//]: # ( Paste in table above >> [📺][draw-the-stack-lec] )

[draw-the-stack-lec]: #paste-YouTube-link-here

[//]: # ( Paste in table above >> [🔗][draw-the-stack] >> ALREADY LINKED AT TOP IN SUPPLEMENTAL STUDY MATERIALS )

[//]: # ( Paste in table above >> [👾][draw-the-stack-sol] )

[draw-the-stack-sol]: ###link-to-img-of-end-point

[//]: # ( Paste in table above >> [📺][jpfp-lec] )

[jpfp-lec]: #paste-YouTube-link-here

[//]: # ( Paste in table above, already linked at top in Checkpoints section >> [🔗][jpfp] )

___

### **Week 10: Async Week Workshops and Materials**

Click to view

Below are the **mandatory** topics to complete ***before*** Senior Phase starts!

| Topic | Link | Solution | Review |

| ----- | ------------ | -------- | ------ |

| ⭐️ Boilermaker | [🔗][boilermaker-workshop] | [👾][boilermaker-sol] | [📺- Security][security-playlist] [📺- Testing][Intro to testing playlist]  |

| 🛫 Deployment | [📺][heroku-video] | - | - |

| 🔍 Project (AWP) | [🔗][awp-overview] | - | - |

| AGILE Development| [📺][agile-lec] | - | - |

| Giving Feedback| [📺][feedback-lec] | - | - |

| 🚨 Security - Optional! | See below! | - | - |

[boilermaker-workshop]: https://learn.fullstackacademy.com/workshop/589f3d5b12f93c00045c27fd/landing

[boilermaker-sol]: https://github.com/FullstackAcademy/fs-app-template

[boilermaker-rev]: https://www.youtube.com/playlist?list=PLx0iOsdUOUmn7D5XL4mRUftn8hvAJGs8H

[deployment-workshop]: https://learn.fullstackacademy.com/workshop/5bad3ec1ecb5e7000452b2d6/landing

[deployment-rev]: https://youtu.be/JuZEOv2X2o0

[awp-overview]: 02-async-week/AWP.md

[agile-lec]: https://www.youtube.com/watch?v=Z82ns5d8uFI&feature=emb_logo

[feedback-lec]: https://www.youtube.com/watch?v=RWmkqX_3fX0&feature=emb_logo

[Intro to testing playlist]: https://www.youtube.com/playlist?list=PL_yPiP-ZZLhIA7zPzYMTSQOnmQevX2Ivt

[security-playlist]: https://www.youtube.com/playlist?list=PL_yPiP-ZZLhJfnvYtJGkzJObGHKdINpQF

[heroku-video]: https://www.youtube.com/watch?v=Iz23rO7LvbE

**A few notes:**

- It's _best_ if you do Boilermaker ***before*** doing Deployment. Each will build upon concepts in the the previous topic.

- We've also included video links to talks on Agile Software Development, and Giving Feedback, two invaluable soft skills to aid you on your Senior Phase Journey! The videos are optional but encouraged!

**Security resources**

Feel free to read as much as you can, but there is _a lot_ to cover so **don't worry if you cannot get through it all**.

- **High Priority:**

  - Take a look at [OWASP’s top 10][owasp-top] and for a different perspective [this article][common-vulnerabilities] for some reading about common web security vulnerabilities.

- **Details:**

  - Look into these vulnerabilities more in depth

    - [Injection](https://www.owasp.org/index.php/Top_10_2013-A1-Injection)

    - [Poor Authentication][poor-auth]

    - [Cross-Site Scripting][xss]

    - [Data Exposure][data-exposure]

    - [Missing Access Control][missing-access-control]

    - [Cross-Site Request Forgery][csrf]

  - Check out these articles on

    - [What HTTPS is/does][https-intro]

    - [Public-key cryptography][public-key-crypto]

[owasp-top]: https://www.owasp.org/index.php/Top_10_2013-Top_10

[common-vulnerabilities]: https://www.toptal.com/security/10-most-common-web-security-vulnerabilities

[poor-auth]: https://www.owasp.org/index.php/Top_10_2013-A2-Broken_Authentication_and_Session_Management

[data-exposure]: https://www.owasp.org/index.php/Top_10_2013-A6-Sensitive_Data_Exposure

[xss]: https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)

[csrf]: https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)

[missing-access-control]: https://www.owasp.org/index.php/Top_10_2013-A7-Missing_Function_Level_Access_Control

[https-intro]: http://robertheaton.com/2014/03/27/how-does-https-actually-work/

[public-key-crypto]: https://medium.com/@vrypan/explaining-public-key-cryptography-to-non-geeks-f0994b3c2d5

___

### **Week 11: Data Structures, Algorithms, Advanced Content**

Click to view

#### Day 1: JWT Authentication

- Pre-Work:

  - [Getting started with JSON web tokens](https://auth0.com/learn/json-web-tokens/)

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| JWT | [📺][jwt-lec] | [🖼️][jwt-slides] | - | - | - |

| Authentication | - | - | - | [👾][authentication-sol] | - |

| Morning Review | [📺][am-rev-6-4] | [🎟][am-rev-6-4-ticket] | - | [👾][am-rev-6-4-sol] | - |

[//]: # ( Paste in table above >> [📺][jwt-lec] )

[jwt-lec]: https://youtu.be/t_3GjJHjZow

[jwt-slides]: https://docs.google.com/presentation/d/10xFSLjUGROHLZM1HtMsKzWKZh04UPf-UpHCu7582tsQ/edit?usp=sharing

[//]: # ( Paste in table above >> [👾][authentication-sol] )

[authentication-sol]: 01-junior-phase/33-authentication

[//]: # ( Paste in table above >> [📺][am-rev-6-4] )

[am-rev-6-4]: https://youtu.be/Ey6oq_kKxUo

[//]: # ( Paste in table above >> [🎟][am-rev-6-4-ticket] )

[am-rev-6-4-ticket]: https://forms.gle/1qHWCdDjfM5msrQ68

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-6-4-demo] )

[am-rev-6-4-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-6-4-sol] )

[am-rev-6-4-sol]: 01-junior-phase/exit-ticket-solutions/26-authentication.md

- **You should be able to:**

  - Explain the motivation for token-based authentication

  - Describe the various parts of a JSON web token

  - Implement JWT authentication in a full stack application using the jsonwebtoken library

  - Explain the motivation for encrypting passwords

  - Use the bcrypt library to encrypt passwords before you store them in your database

#### Day 2: Algorithms & Analysis, Sorting

- Pre-Work:

  - [Big-O notation in 5 minutes - The basics][big-o-basics]

  - [Visualization of Quick sort][quick-sort-viz]

  - [Merge Sort vs Quick Sort][merge-vs-quick]

[big-o-basics]: https://youtu.be/__vX2sjlpXU

[quick-sort-viz]: https://youtu.be/aXXWXz5rF64

[merge-vs-quick]: https://youtu.be/es2T6KY45cA

| Topic | Lecture | Slides | Demo | Solution | Review |

| ----- | ------- | ------ | ---- | -------- | ------ |

| Algorithms & Analysis | [📺][big-o-lec] | [🖼️][big-o-slides] | - | - | - |

| Bubble Sort | [📺][bubble-sort-lec] | [🖼️][bubble-sort-slides] | [🧑‍💻][bubble-sort-demo] | [👾][bubble-sort-sol] | - |

| Merge Sort | [📺][merge-sort-lec] | [🖼️][merge-sort-slides] | [🧑‍💻][merge-sort-demo] | [👾][merge-sort-sol] | - |

| Morning Review | [📺][am-rev-6-2] | [🎟][am-rev-6-2-ticket] | - | [👾][am-rev-6-2-sol] | - |

[//]: # ( Paste in table above >> [📺][big-o-lec] )

[big-o-lec]: https://youtu.be/JozVsx6q-wE

[big-o-slides]: https://docs.google.com/presentation/d/1la5IAb1s2NZZDySKmsZgLDbwh_wk9HymUH4yE6rtUNg/edit?usp=sharing

[//]: # ( Paste in table above >> [📺][bubble-sort-lec] )

[bubble-sort-lec]: https://youtu.be/3RIezoAakVw

[bubble-sort-slides]: https://docs.google.com/presentation/d/1CHnYo3N-PExYnqwKVKsvBPjEimgVejMfAEJN-M4XLBM/edit?usp=sharing

[//]: # ( Paste in table above >> [👾][bubble-sort-sol] )

[bubble-sort-sol]: 01-junior-phase/34-algos/PairExercise.BubbleSort.Solution-main

[//]: # ( Paste in table above >> [🧑‍💻][bubble-sort-demo] )

[bubble-sort-demo]: https://github.com/orlandocaraballo/class-examples/blob/master/sorting/bubbleSort.js

[//]: # ( Paste in table above >> [📺][bubble-sort-rev] )

[bubble-sort-rev]: ###

[//]: # ( Paste in table above >> [📺][merge-sort-lec] )

[merge-sort-lec]: https://youtu.be/916p_snMGQ0

[merge-sort-slides]: https://docs.google.com/presentation/d/1bzAOKas12vcGvCuh_GdhfCoW1JHouFWoGj1n8K5DjrY/edit?usp=sharing

[//]: # ( Paste in table above >> [👾][merge-sort-sol] )

[merge-sort-sol]: 01-junior-phase/34-algos/PairExercise.MergeSort.Solution-main

[//]: # ( Paste in table above >> [🧑‍💻][merge-sort-demo] )

[merge-sort-demo]: https://github.com/orlandocaraballo/class-examples/blob/master/sorting/mergeSort.js

[//]: # ( Paste in table above >> [📺][merge-sort-rev] )

[merge-sort-rev]: ###

[//]: # ( Paste in table above >> [📺][am-rev-6-2] )

[am-rev-6-2]: https://youtu.be/dumuvKrx9Ng

[//]: # ( Paste in table above >> [🎟][am-rev-6-2-ticket] )

[am-rev-6-2-ticket]: https://forms.gle/Qm5znNbaV3ghRj4T6

[//]: # ( Paste in table above >> [🧑‍💻][am-rev-6-2-demo] )

[am-rev-6-2-demo]: #link-demo-here

[//]: # ( Paste in table above >> [👾][am-rev-6-2-sol] )

[am-rev-6-2-sol]: 01-junior-phase/exit-ticket-solutions/28-sorting-algo-analysis.md

- **You should be able to:**

  - Articulate the difference between an algorithm and a heuristic

  - Explain Big O in terms of both time and space (when/how is it useful, what does it measure, etc)

  - Describe how both Bubble Sort and Merge Sort operate, as well as discuss their time/space complexities

**Extra Resources:**

  - [Sorting Algorithms][sorting-algos]

  - [Khan Academy Big-O vs Big-Theta][big-o-big-theta]

  - Interview Cake:

    - [Big O Notation](https://www.interviewcake.com/article/javascript/big-o-notation-time-and-space-complexity)

    - [Logarithms](https://www.interviewcake.com/article/javascript/logarithms)

  - Visualizations:

    - [Toptal: Sorting Algorithms Animations](https://www.toptal.com/developers/sorting-algorithms)

    - [Visualization: Bubble Sort vs. Quick Sort](https://youtu.be/aXXWXz5rF64)

    - [Visualization: Merge Sort vs. Quick Sort](https://youtu.be/es2T6KY45cA)

    - [VisuAlgo: Visualising data structures and algoroithms through animation](https://visualgo.net/en)

[sorting-algos]: https://brilliant.org/wiki/sorting-algorithms/

[big-o-big-theta]: https://www.khanacademy.org/computing/computer-science/algorithms/asymptotic-notation/a/asymptotic-notation

#### Day 3: Data Structures (Stacks, Queues & Linked Lists)

- Pre-Work:

  - [Stacks and queues: the basics