Resource-based URL design in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a GET route for retrieving all books.

Express

app.[1]('/books', (req, res) => {
  res.send('List of books');
});

Drag options to blanks, or click blank then click option'

Aget

Bpost

Cput

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of GET for retrieving data.

The get method defines a route to retrieve resources, matching the HTTP GET method.

2fill in blank

medium

Complete the code to define a route for retrieving a single book by its ID.

Express

app.get('/books/[1]', (req, res) => {
  const bookId = req.params.id;
  res.send(`Book with ID: ${bookId}`);
});

Drag options to blanks, or click blank then click option'

A*id

Bid

C:id

D?id

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the colon before the parameter name.

Using :id defines a route parameter named id to capture the book's ID from the URL.

3fill in blank

hard

Fix the error in the route to update a book by its ID using the correct HTTP method.

Express

app.[1]('/books/:id', (req, res) => {
  res.send(`Updated book with ID: ${req.params.id}`);
});

Drag options to blanks, or click blank then click option'

Aput

Bpost

Cget

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET or POST instead of PUT for updates.

The put method is used to update an existing resource, matching the HTTP PUT method.

4fill in blank

hard

Fill both blanks to define a route that deletes a book by its ID and sends a confirmation message.

Express

app.[1]('/books/[2]', (req, res) => {
  res.send(`Deleted book with ID: ${req.params.id}`);
});

Drag options to blanks, or click blank then click option'

Adelete

Bpost

C:id

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET or POST instead of DELETE.

Missing colon before the parameter name.

The delete method handles HTTP DELETE requests, and :id captures the book ID from the URL.

5fill in blank

hard

Fill all three blanks to create a route that adds a new book and sends a success message.

Express

app.[1]('/books', (req, res) => {
  const newBook = req.body;
  // Code to save newBook would go here
  res.status([2]).send('[3]');
});

Drag options to blanks, or click blank then click option'

Apost

B201

CBook added successfully

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST.

Using wrong status code like 200 instead of 201.

POST is used to create new resources. Status code 201 means 'Created'. The message confirms success.

Practice

1. What is the main idea behind resource-based URL design in Express?

easy

A. Combine all actions into one URL

B. Use random URLs for each action

C. Avoid using HTTP methods in URLs

D. Organize URLs around data items like users or books

Solution

1. Step 1: Understand resource-based URL design

   This design organizes URLs by resources such as users or books, making them clear and meaningful.

2. Step 2: Compare options

   Options B, C, and D do not follow this clear organization principle.

3. Final Answer:

   Organize URLs around data items like users or books -> Option D

4. Quick Check:

   Resource-based URLs = Organize by data items [OK]

Hint: Think: URLs should name data items clearly [OK]

Common Mistakes:

• Thinking URLs should be random or unclear
• Ignoring HTTP methods in design
• Putting all actions under one URL

2. Which Express route correctly follows resource-based URL design to get a user by ID?

easy

A. app.get('/user/:id', handler)

B. app.get('/getUser', handler)

C. app.post('/user/:id', handler)

D. app.delete('/user', handler)

Solution

1. Step 1: Identify correct HTTP method and URL pattern

   To get a user by ID, use GET method and URL with resource and ID: '/user/:id'.

2. Step 2: Check options

   app.get('/user/:id', handler) uses GET and '/user/:id' which is correct. Others use wrong methods or URLs.

3. Final Answer:

   app.get('/user/:id', handler) -> Option A

4. Quick Check:

   GET + /resource/:id = correct get route [OK]

Hint: GET method + resource path with :id for fetching [OK]

Common Mistakes:

• Using POST instead of GET for fetching
• Using generic paths like '/getUser'
• Missing :id parameter in URL

3. What will be the response if the following Express route is called with DELETE /books/123?

app.delete('/books/:bookId', (req, res) => {
  res.send(`Deleted book ${req.params.bookId}`);
});

medium

A. 404 Not Found error

B. "Deleted book :bookId"

C. "Deleted book 123"

D. SyntaxError

Solution

1. Step 1: Understand route and HTTP method

   The route listens for DELETE requests on '/books/:bookId'. The parameter bookId will be '123' from the URL.

2. Step 2: Check response behavior

   The handler sends a string with the bookId inserted, so response is 'Deleted book 123'.

3. Final Answer:

   "Deleted book 123" -> Option C

4. Quick Check:

   DELETE /books/:id returns message with id [OK]

Hint: Route param replaces :bookId in response [OK]

Common Mistakes:

• Confusing parameter name with literal string
• Expecting 404 if route exists
• Thinking syntax error occurs

4. Identify the error in this Express route for updating a user:

app.put('/users', (req, res) => {
  const id = req.params.id;
  res.send(`Updated user ${id}`);
});

medium

A. req.params.id should be req.body.id

B. Missing :id parameter in URL path

C. res.send should be res.json

D. Using PUT instead of POST

Solution

1. Step 1: Check URL path and parameter usage

   The route URL is '/users' but code tries to read req.params.id which requires ':id' in path.

2. Step 2: Identify mismatch

   Since ':id' is missing in URL, req.params.id will be undefined causing error or wrong behavior.

3. Final Answer:

   Missing :id parameter in URL path -> Option B

4. Quick Check:

   URL must include :id to access req.params.id [OK]

Hint: Check if URL path matches params used in code [OK]

Common Mistakes:

• Ignoring missing :id in URL
• Confusing req.params with req.body
• Thinking PUT is wrong method here

5. You want to design Express routes for a blog API with posts and comments. Which URL design best follows resource-based principles for updating a comment with ID 45 on post with ID 10?

hard

A. app.put('/posts/10/comments/45', handler)

B. app.put('/updateComment', handler)

C. app.put('/comments/45', handler)

D. app.put('/posts/comments', handler)

Solution

1. Step 1: Understand nested resource URLs

   Comments belong to posts, so URL should reflect this hierarchy: '/posts/:postId/comments/:commentId'.

2. Step 2: Check options for correct pattern

   app.put('/posts/10/comments/45', handler) uses full nested path with IDs, matching resource-based design. Others miss nesting or IDs.

3. Final Answer:

   app.put('/posts/10/comments/45', handler) -> Option A

4. Quick Check:

   Nested resource URLs = /posts/:postId/comments/:commentId [OK]

Hint: Nest related resources in URL with IDs [OK]

Common Mistakes:

• Using generic action names in URL
• Omitting parent resource ID
• Ignoring resource hierarchy