davidystephenson

- Global: "Every page shows the navbar at the top.
  The navbar is a horizontal bar that stretches all the way across the top of the page.
  On mobile is collapses with a menu button that shows the navigatioin items in a popover.
  The navbar includes links to the Shows page, Channels page, and Prizes page. Blah blah blah..."
- Routes
  - Shows
  - Channels
  - Prizes
  - Account: "The account route group includes various pages that let you control your user data.
    There is no /account page, but all pages in the account route group share design elements.

davidystephenson

- Components
  - Navbar:
    "The navbar is a horizontal bar that stretches all the way across the top of the page. On mobile is collapses with a menu button that shows the navigatioin items in a popover. Te navbar includes links to the Shows page, Channels page, and Prizes page. Blah blah blah..."
  - Account Sidebar:
    "The account sidebar is a vertical bar that stretches all the way across the left side of the page. On mobile the design is not responsive. The account sidebar includes links to the Wallet page, Orders page, Messages page, blah blah blah..."
- Global:
  "Every page shows the navbar at the top"
- Routes
  - Shows
  - Channels

davidystephenson

One-Time Secret Link

Build a small app where a user can create a secret message and get a link to share. When someone opens the link, they can read the message once, and then it’s gone.

Data Storage

store data in memory using an array.

• Create a file like lib/store.ts

davidystephenson

import { useEffect, useState, useMemo } from "react";

function ProductList({ message }) {
    const [allProducts, setAllProducts] = useState([]);
    const [category, setCategory] = useState('all')
    const [value, setValue] = useState(message)
    useEffect(() => {
        setValue(message)
    }, [message])
    useEffect(() => {

davidystephenson

1. Create a TypeScript/React app with Vite.
2. Define a CounterList component: 
    1. Define a state variable that initializes with an empty array.
    2. Render a button that adds a new number to the array that matches the current length of the array.
    3. Render the list of numbers in a bulleted list.

Bonus: Inside CounterList, render another button that adds 1 to the last element of the array.

davidystephenson

const bakeryVan = {
  destination: 'bakery',
  cargo: 5
}

const schoolVan = {
  destination: 'school',
  cargo: ['Dorothy', 'Zelda', 'Tallulah']
}

davidystephenson

/*
type Input <T> = {
  data: T | string
}

type PremiumInput <T> = Input<T> & {
  price: number
}
*/

davidystephenson

# Sections

1. JavaScript

2. TypeScript

3. Asynchronous Programming

4. Express.js

davidystephenson

# Questions

## JavaScript (Core)

### Language fundamentals

1. What is the difference between passing a primitive value and passing an object as a function argument in JavaScript? What happens in each case when you modify the parameter inside the function?

### Execution model (call stack, event loop, task queues)

davidystephenson

# Socket.io Chat App

## 1. Connection & Identity Registration

- Client connects with a username
- Server accepts or rejects the connection
- Server assigns a socket ID
- User is removed from state on disconnect

### Topics