Skip to content
DIG 345 Radical Software

Week 3 - Node / Express

2/2

3-1 Reactivity

Section titled “3-1 Reactivity”
Homework

Cory Doctorow - Rescuing the Internet From “Enshittification”

React VS Svelte…10 Examples (8:34)

Heydon Pickering What Is React.JS? (5:01)

In-class
  1. Class: Share progress, discussion of videos, final project.
  2. Instructor: Discuss Reactivity, show an Astro + Svelte demo. Give hw for week.

3-2 Node/Express

Section titled “3-2 Node/Express”
Homework
  • Read 📚 “0.2.3 Why Not React, Angular, or Taco?” (below)
  • Read 📚 Chapter 9 of Critical Web Design (posted in Slack).
  • Follow the exercises in Modules 9.2 and 9.3.

Why Not React, Angular, or Taco?

Section titled “Why Not React, Angular, or Taco?”

We haven’t mentioned any (currently) popular front-end frameworks. Many tutorials on YouTube and Google focus on using tools like React, Angular, and Taco. These projects are built by big tech companies to maintain complex websites, packed with bells and whistles, and appear to make creating websites almost effortless, even magical. But you should know:

  • We advise you to be suspicious any time you see people flocking to the “next big thing.” Why? By definition, trends come and go. The recent billionaire-ego-inspired Twitter disaster is proof that these tools are only as stable as the companies that support them. For example, ever heard of an NFT (non-fungible token)? How about Beanie Babies? The fanciful names of today’s fashionable framework (like the “Taco” framework we fabricated in the section title) will eventually fade.
  • The open technologies that power the web are intended to let you choose how you want to create websites. Projects like Facebook’s React create vendor lock-in, confining you to a proprietary ecosystem that requires you to do everything their way. This teaches you not to code using the best tool, but to create using their tool. And this dependency ultimately manifests loyalty to companies that you may or may not want to support. Throughout the book we show when there are good alternatives to help readers internalize this consideration.
  • These tools are complex to use—they are built to power enormous applications (e.g., Google Docs), involve a lengthy setup, and have a complicated build process—even though many output plain HTML/CSS/JS. Referencing documentation is confusing because they can be vastly different across releases. Publishing is also murky, often costly, and can cause your entire project to fail because of a single misplaced comma.
  • React, Angular, Shiny, and other frameworks hide and abstract the underlying code so much that when you get stuck, you are seriously stuck unless you know the fundamentals of HTML/CSS/JS.
  • We do introduce several technologies on which the so-called modern web is built. The command line, DevTools, ES6, Node/NPM, JavaScript object notation (JSON), Leaflet, APIs, and databases are just some of the tools that we discuss.
  • Perhaps the most important reason this book is focused on the foundations of designing and coding for the web is because we want readers to come away with a solid understanding of how the web works. A firm grounding in the lasting technologies and principles can be applied to nearly any tool, computer language, or technology field. For example, e-books are coded in HTML/CSS, most cross platform desktop and mobile apps use HTML/CSS/JS, and the principles of responsive design and usability apply to interfaces across the web, game development, and screens in cars, household appliances, and electronic billboards.

xtine burrough and Owen Mundy, Critical Web Design (p.15-16), 2026

Codecademy Front-End vs Back-End (1:14)

In-class
  1. Discussion: Share examples (1, 2, 3) - What has been unclear in the assignments so far? What should change in the order / instructions / etc to improve it?
  2. Discussion: Share a hot take on the React videos and Taco writing above. Elaborate in class.
  3. Instructor: Create a test API from scratch to learn Express basics](https://omundy.github.io/learn-javascript/topics/node-express/slides.html). Show examples (below)
  4. Class: Continue this tutorial to work with a more complete project in DevLog 3-3, continue in-class/at home.
Express API Examples

Node / Express Examples

Section titled “Node / Express Examples”

3-3 Node/Express/Vercel

Section titled “3-3 Node/Express/Vercel”
Homework
  • ✅ Complete steps (at least) 1-5 from DevLog 3-3
  • ✅ Complete the Git Milestones and post the link on Moodle.
  • Review 📚 this longer description of front end / back end at the Odin Project
In-class
  1. Instructor: Introduce Vercel dashboard and examples
  2. Class: Complete DevLog in-class/at home.

DevLog 3-3

Section titled “DevLog 3-3”

Create a full stack application using Node and Express

Section titled “Create a full stack application using Node and Express”

Create a full stack application following Chapter 9 of Critical Web Design and the Bad Password API Node/Express tutorial. Copy and paste then complete the following objectives in devlog-3-3.mdx in your DevLog (Instructions).

  1. Read 📚 Chapter 9 in Critical Web Design. ✏️ Write a reflection about the Context for this chapter.
  2. Fork an existing Github project (criticalwebdesign/bad-password-api-starter) (CWD 9.3)
  3. Connect to a remote API and use JSON data in a frontend (CWD 9.3)
  4. Modify the project structure, install dependencies, and run the project. (CWD 9.4)
  5. Add static and dynamic API routes using Express. (CWD 9.4)
  6. Create a free Vercel account (CWD 9.4)
  7. Deploy your project on Vercel. (CWD 9.4) Paste the link ✏️ here
  8. Read 📚 Hacktivist deletes white supremacist websites live onstage during hacker conference, TechCrunch 2026. Post a reading response in your DevLog per information in the Assignments.
  9. Write a reflection explaining what you learned in your DevLog. Link to sources. ✏️
  10. Publish it and turn it in by posting the direct link to this DevLog on Moodle.

Hacktivist deletes white supremacist websites live onstage during hacker conference