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

davidystephenson

export function format(value, formatter) {
  const formatted = formatter(value);
  return formatted;
}

function formatString (value) {
  return value.toUpperCase()
}

function formatNumber(value) {

davidystephenson

const departments = {
  engineering: {
    budget: 500000,
    headcount: 45,
    location: "Building A",
  },
  marketing: {
    budget: 300000,
    headcount: 20,
    location: "Building B",