Skip to main content

Class 26: Selected Topics


  • Selected Topics
  • Q & A

Selected Topics

Student Provided Topic Suggestions

  • Prop Drilling / Context
  • Tailwind CSS
  • MERN from Scratch
  • Deploying MERN
  • Design Activity
  • Design Portfolio
  • Review API Design
  • Review Most Missed Questions from Past Exams
  • Q & A for Final Exam
  • The meaning of life
  • Is the moon made of cheese?

Prop Drilling / Context

Typically, we pass data from parent to child components via props.

For deep component trees, this can lead to "prop drilling": passing props through many intermediate components that do not need the data, just to get it to a deeply nested component that does.

Context is a React feature that allows us to share data across the component tree without having to pass props down manually at every level.

Deploying MERN

Client​

  1. npm run build

  2. Deploy client/dist folder to static hosting service (e.g. GitHub Pages)

Server​

  1. Create Express server configuration (i.e. Dockerfile)

  2. MongoDB server configuration + initialization (i.e. Dockerfile or Docker compose)

  3. Deploy server to hosting service (e.g. Hostinger, Fly.io, Render, Heroku, etc.)

MERN from Scratch

  1. Create a new Git repo
  2. Add "devcontainer" configuration files.
  3. Use vite to create a new React app in the client folder.
  4. Set up Express server in the server folder.
  5. Configure MongoDB (e.g. using Docker).

Portfolio Design

Demonstrate your ability through verifiable proof of work + UX process.

It is no longer sufficient to have a bunch pictures of your Figma projects in your portfolio -- that can all be "faked" with AI.

Document your UX process (i.e. user interviews, user testing, etc.) including your failure cases (e.g. what did you learn from user testing that led to a pivot in your design?).

#1 Missed Question from Exam I

  1. (2 points) A component is defined in JSX as a function. Yet, when we use a component in JSX, we write it as an HTML element. For example: <Logo />. Explain what <Logo /> does in terms of JavaScript code. Your answer should include the JavaScript code that is equivalent to <Logo /> and an explanation of how that code works. (~2 sentences)

#1 Missed Question from Exam II

  1. Answer the following questions using the MongoDB shell command below. (You may assume the produce collection exists in the test database and a document with the specified _id exists.)

    db.produce.find({ _id: "69c3d6d488562e515a8ce5be" })

    b. (2 points) Describe the result of running the above command. Explain your answer. (1-2 sentences)

API Design

  • What do the developers need? Collections or Documents?
  • What operations do the developers need? CRUD or just Read?
  • Do any resources have a hierarchical relationship? If so, how should the API reflect that?

Q & A

What's Next

Friday: no sections; no practice problem workshop

Monday: Semester wrap-up + final exam Q & A

Last updated on