web api workshop 🦭

intro: what is an api, why would u create an api, how are they used in the web, why node/express, how will we design our api (crud)

resources:

• express docs
• workshop slides

prereqs:

• vscode
• node + npm

post workshop exploration:

• deno - an alternative to node, created by the same people :0
• hono - a new, performant, alternative to express
• create an endpoint to retrieve a specific note
• create an endpoint to edit a note
• connect a database

setting up the project with node

create a new folder and in it run

npm init

create index.js

// index.js
console.log('hi this is a test');

to start run node index.js

should output "hi this is a test" to terminal.

using express

npm install express

writing boilerplate

// this imports express
const express = require('express');
const app = express();
const port = 3000;

// imports an express package to host static files, ie our web page
app.use(express.static('public'));
// imports an express package to use json
app.use(express.json());

// this starts the server
app.listen(port, () => {
  console.log(`server is now running http://localhost:${port}`);
});

if try making a change, hit roadblock

everytime you make a change, you need to restart the server.

adding hot reloading

for hot reloads, download nodemon, npm i nodemon

// package.json
"scripts": {
    ...
    + "start": "nodemon index.js"
}

so now you can run npm start

creating a mock db

ideally, your backend should have a database like postgresql; however, for this demonstration we'll just do it locally. for some homework, you can figure out how to do this 🌱

var notes = [
  { id: 1, content: 'this is a sample note :)' },
  { id: 2, content: 'read chapter 5 of dsa textbook' },
  { id: 3, content: 'physics lecture is cancelled' },
];

creating api methods

return notes (get)

app.get('/notes', (req, res) => {
  res.send(notes);
});

create new note (post)

app.post('/notes', (req, res) => {
  const content = req.body.content;
  if (content == '' || content == undefined) {
    res.status(400);
  }
  const newNote = { content: content, id: crypto.randomUUID() };
  notes.push(newNote);
  console.log('new note created: ');
  console.log(newNote);
  res.json(newNote);
});

delete a post (delete)

app.delete('/notes/:id', (req, res) => {
  if (req.params.id == '') {
    res.status(400);
  }
  notes = notes.filter((note) => note.id != req.params.id);
  console.log('removed note with id ' + req.params.id);
  res.status(200).send('removed note with id' + req.params.id);
});

simple logging

if this was a production environment you should add these to a .txt file for record keeping

// index.js

app.all(/.*/, (req, res, next) => {
  console.log(req.method + ' ' + req.path + ' ' + new Date().toISOString());
  next();
});

// console
server is now running http://localhost:3000
GET /notes 2025-10-09T17:34:52.706Z
DELETE /notes/3 2025-10-09T17:34:53.621Z
removed note with id 3
GET /notes 2025-10-09T17:34:53.627Z
POST /notes 2025-10-09T17:34:59.138Z
new note created:
{
  content: 'this is a new note',
  id: 'e0ba4ec2-d5e1-4545-ac08-55de95cdbff7'
}
GET /notes 2025-10-09T17:34:59.173Z

created with 🫶 by jan rebolledo, for software engineering association @ california state polytechnic university, pomona