Coding

Build Todo API handlers

Category: Coding
Platform: Windows
Length: 24 min
Resolution: 1920 × 1080
Software: Visual Studio Code, Postman, Google Chrome

Samples play on a computer

24min

309clicks

2Kkeys

Visual Studio Code, Postman, Google Chrome · Windows

00:00 / 23:37

Events1,486

00:00.138Click691, 257

00:00.603Move689, 257 → 640, 242

00:01.691Click640, 242

00:01.901Drag650, 243 → 769, 258

00:03.207Drag769, 257 → 769, 247

00:04.470KeyCtrl+C

00:04.714Move799, 274 → 1091, 668

00:05.012Click1091, 668

00:05.356Move1156, 713 → 1396, 1052

00:06.351Click1396, 1052

00:06.355AppWindows Explorer

00:06.577AppPostman

00:06.862Move1389, 1043 → 859, 205

00:07.750Click859, 205

00:08.049Drag858, 205 → 795, 198

00:09.223KeyCtrl+V

00:09.767Move804, 204 → 921, 209

00:10.927Click921, 209

00:11.412Move928, 217 → 1483, 210

00:12.446Click1483, 210

00:13.686Move1473, 223 → 617, 726

00:15.230Click617, 726

00:15.476ClickDouble click 617, 726

00:15.563Drag622, 726 → 797, 752

00:16.212Click797, 752

00:16.469ClickDouble click 797, 752

00:16.836Move786, 731 → 612, 372

00:17.273Click612, 372

00:17.651Move634, 354 → 713, 162

00:18.460Click713, 162

00:18.690ClickDouble click 713, 162

00:18.927KeyBackspace

00:20.503Typed"GetData"

00:24.209Move715, 162 → 1378, 147

00:25.040Click1378, 147

00:25.477Move1385, 151 → 119, 444

00:26.094Move119, 441 → 244, 380

00:26.604Move246, 380 → 746, 229

00:27.101Move747, 227 → 580, 153

00:28.442Click580, 153

Loading events

Narration128

00:00
Selected the route code in VS Code, moved the selection/caret within `route.js`, then switched away from the editor as another app launched.
Review or adjust the backend route code before moving to API testing.
00:06
Switched to Postman and edited the URL field of a new GET request, changing it from `http://localhost:5000/data/` to `http://localhost:5000/data/getdata`.
Configure a GET request to the backend data endpoint.
00:16
Sent the configured GET request and reviewed the response, then renamed and saved the request as `GetData` in the collection list.
Test the data endpoint and keep the request organized in Postman.
00:26
Opened a new collection, replaced its default name with `TODO_APP`, and selected the newly named collection.
Create a Postman collection to organize the API request.
00:36
Scrolled through the collection sidebar, then selected `TODO_APP` to bring it into view and expand it.
Locate and inspect the newly created collection and its request.
00:46
Opened a new request under `TODO_APP`, then entered `ADD_DATA` in the request name field.
Create and name another request in the collection.
00:56
Clicked through the request controls, changed the method from POST to GET, and edited the URL field to enter `/data/adddata` after the existing localhost base.
Set up the ADD_DATA request endpoint.
01:08
Selected the Body tab and switched the request body from none to raw JSON, opening the blank body editor.
Prepare a JSON payload for the ADD_DATA request.
01:15
Typed an opening JSON object and began a `title` key in the raw body editor, then entered `Book` as the start of its value.
Add the book title field to the request payload.
01:25
Continued editing the title value to read `Book library`, then added a comma and moved to a new line in the JSON body.
Complete the title field and begin another payload field.
01:34
Typed a new JSON key, correcting the spelling as it was entered, and left the key reading `discriptions` on the next line.
Add a description field to the request payload.
01:45
Corrected the description key to `description`, entered the value `It is very good library`, and pressed Enter in the editor.
Fill in the book description in the request payload.
01:57
Clicked within the Postman request and response panes and made several drag and scroll gestures; the POST request to `/data/adddata` remained visible with a `201 Created` response containing the created “Book library” record. Switched away from Postman at the end of the span.
Review the result of the add-data request.
02:14
Switched to Visual Studio Code, reviewed `route.js`, then opened `controller.js` and scrolled through its handlers.
Inspect the Todo_app route and controller code.
02:25
Clicked in `controller.js` and typed at the end of the file, correcting the initial text before entering `export default`.
Begin adding an export statement to the controller file.
02:35
Continued typing in `controller.js`, completing the name `updateData` and starting an assignment with `Data = {`.
Start defining an update-data handler.
02:45
Edited the incomplete declaration, changing it to an async arrow-function start with `req` and `res` parameters, then opened the function body on a new line.
Create the initial structure for the update-data handler.
02:55
Typed a `try` block inside `updateData`, added its braces, and saved changes that caused nodemon to restart the server; continued editing the block afterward.
Add error-handling structure to the update-data handler.
03:08
Clicked around the blank `try` block and lower editor area in `controller.js`; the code remained unchanged.
Position the editor cursor while working on the update controller.
03:18
Moved the cursor into the `catch` block and began typing a response statement, entering `return res` and continuing with `.st` and a status argument.
Add error handling to the update controller.
03:29
Continued the error response code, typing a 500 status and a JSON object with a message beginning “Some thing wen…”. The terminal showed that nodemon had crashed and was waiting for file changes.
Define the error response returned by the update controller.
03:46
Backspaced through and replaced the message text with `Server error!`; the terminal restarted the server and displayed its startup output. Right-clicked in the editor to open the context menu.
Correct the error message and inspect editor commands.
03:57
Dismissed the editor context menu, clicked within the code, and moved the caret into the `try` block.
Resume editing the update controller implementation.
04:06
Typed a `const` declaration in the `try` block, adding a destructuring assignment for `title` and `discription` from `req`; autocomplete suggestions appeared while entering `req`. The terminal again showed nodemon waiting after an app crash.
Begin extracting fields from the request for the update handler.
04:21
Typed a short edit in `controller.js`, opened and dismissed the editor context menu, then selected the `title, discription` portion of the request-body destructuring line.
Edit the update controller’s request-body fields.
04:31
Edited the destructuring line to add a comma and `_id` alongside the existing fields, then opened the editor context menu.
Include the record ID in the update controller’s request-body fields.
04:42
Continued editing inside the `try` block, adding a new line and typing `con` followed by `const findData`; the terminal reported that the app crashed while waiting for file changes.
Start adding a data lookup in the update controller.
05:01
Continued the new declaration by typing `= await` and then `Data.find`, triggering the development server to restart and subsequently report an app crash.
Build a database query for the record being updated.
05:11
Completed the method call as `Data.findById(_id)` using the editor suggestion, then moved to the request-body line and added a semicolon; nodemon restarted after the edits.
Look up the record by its ID in the update controller.
05:21
Added a new line beneath the lookup and began typing an `if` condition, making several corrections; the code remained incomplete and the terminal showed the app had crashed.
Begin adding conditional handling to the record update logic.
05:33
Typed into the updateData function, extending the validation condition and beginning a Data.findById lookup; the code remained incomplete and underlined as an error.
Add validation and retrieve the record for the update handler.
05:39
Continued editing the validation condition to check the ID and title, added a block, and began a response statement inside it.
Validate required update fields before proceeding.
05:51
Typed `res.status()` inside the validation block, leaving the response call unfinished.
Build the validation error response for the update handler.
05:55
Completed the response as a 403 JSON reply with the message “All feild is required,” including a semicolon.
Return an error response when required update fields are missing.
06:13
Typed a partial `return` before the existing response call, then scrolled slightly and opened the editor context menu.
Adjust the validation response code.
06:23
Dismissed the context menu, clicked back into the code, and began an `if` condition beneath the Data.findById lookup, adding braces and starting a response statement.
Continue implementing the update handler’s record-check logic.
06:32
Typed and corrected the not-found response in the `updateData` controller, building the `res.status(404).json({ message: ... })` expression and starting its message text.
Add a 404 response for an update request when the requested record is missing.
06:46
Continued editing the 404 JSON response message, completing it as `Data not found!` and pressing Enter to finish the statement.
Complete the missing-record error response in `updateData`.
06:58
Inserted blank lines and scrolled the editor slightly, then began typing `cons` on a new line below the not-found check.
Continue writing the update controller logic.
07:05
Continued the partial declaration, typing `updateDt` after `cons` and leaving the line as `const updateDt =`; clicked around the line without completing it.
Start a declaration for the update operation.
07:15
Clicked and edited the incomplete identifier, correcting it to `updateData` while leaving the assignment unfinished; continued typing and pressing Enter on nearby lines.
Correct the update-operation variable name and continue the controller implementation.
07:25
Typed `await Data.fin` and opened the autocomplete list, then completed the suggestion to `Data.findByIdAndUpdate()`.
Begin the database update call for the controller.
07:32
Continued typing the arguments for `findByIdAndUpdate`, entering the update object fields for `title` and `discription` in `controller.js`.
Build the database update call for the todo update handler.
07:43
Pressed Enter and added the `new` option to the `findByIdAndUpdate` call, then began typing its `true` value; the terminal showed the app had crashed while waiting for file changes.
Set the update call to return the updated document and continue correcting the handler.
07:53
Completed the `new:true` option and made brief edits with backspaces around the code.
Correct the options passed to the update query.
08:03
Backspaced through the `new:true` option, then clicked around the editor and pressed Enter to leave the cursor on a new line. The terminal restarted the server and reported that it was running on port 5000.
Remove the problematic option and resume writing the update handler.
08:13
Typed `return` on the line below the update query, then began a `res.status()` response expression.
Add a success response to the update handler.
08:24
Entered `202` as the argument to `res.status()`, correcting the partial digits while typing.
Set the status code for the update response.
08:38
Edited the updateData response in controller.js, replacing an incomplete response object with a message property and beginning the success text.
Set the success response message for the update endpoint.
08:46
Corrected the response text to “Data succesefully!” and clicked within the line to reposition the caret.
Complete the update endpoint’s success message.

08:57
Typed “update” and moved through the controller code, scrolling the editor and clicking around the catch block and response line; a refactoring suggestion briefly appeared.
Continue editing and inspect the update response code.
09:06
Clicked in the response object and added a data property after the success message, then began entering its value.
Include the updated record in the successful response.
09:16
Continued editing the data field to reference updateData and pressed Enter; the terminal showed the server restarting and starting again.
Return the updated record in the endpoint response.
09:25
Revised the response field by deleting and retyping part of the expression, leaving it as updateData: {id:} in the visible code.
Continue shaping the returned data object in the update response.
09:37
Edited the update response object in `controller.js`, entering and correcting text around the returned data fields. The terminal showed nodemon restart the server after the changes.
Adjust the update controller response and check whether the server restarts.
09:48
Continued editing the update response line, adding text around the `title` field. The terminal alternated between showing the server running and nodemon reporting a crash and restart.
Continue refining the update controller response and monitor the server.
10:02
Switched focus back to Visual Studio Code, used undo repeatedly, and scrolled horizontally through the long response line before pressing Backspace several times. The line remained visibly marked with problems while the terminal showed the server running and MongoDB connected.
Revert or correct recent controller edits.
10:13
Scrolled and clicked in the controller editor, moving the view upward to show the `updateData` function and its response statement. The code remained open for inspection.
Review the update controller code and position the editor around the function.
10:23
Clicked the `route.js` file in the Explorer to open it, then clicked within the file near the existing route definitions.
Open the routes file to inspect or edit API endpoints.
10:28
Typed a new `router.post` route in `route.js`, using Enter to continue the statement and entering the beginning of the `/data/update` path.
Add an update endpoint to the Express router.
10:39
Edited the `route.js` file around the `/data/updatedata` route, completing its handler reference as `updateData`; then opened the editor context menu.
Configure the update-data route in the backend router.
10:50
Dismissed the context menu and clicked around the route editor, moving the caret through the file without making a visible code change. Switched to Postman at the end of the span.
Review the router code before testing the API.
11:02
Opened a new request in Postman and focused its URL field, where the saved `http://localhost:5000/profile` address appeared selected.
Prepare a Postman request for an API endpoint.
11:13
Edited the request URL to `http://localhost:5000/data/updatedata`, opened the HTTP method menu, and changed the method from GET to PUT.
Set up a PUT request for the update-data endpoint.
11:26
Switched briefly through the taskbar to Visual Studio Code, clicked and edited the `/data/updatedata` route line, then returned to Postman.
Adjust the update route while preparing its Postman request.
11:43
Returned to the unsent PUT request in Postman and edited its request name, typing `UpdateData` into the small name field.
Name the prepared update-data request.
11:53
Opened the UpdateData request and switched its Body tab from no body to raw JSON, then began entering an object with an `_id` field.
Prepare the update request body with a record identifier.
12:02
Continued editing the raw JSON body, adding the `_id` property with an empty quoted value, then selected the GetData request in the collection.
Set up the update request's identifier and navigate to the GET request for reference.
12:13
Viewed the GetData request and its successful JSON response, which shows a book record and its `_id`, title, and description; then returned to UpdateData.
Reference the existing record's identifier and fields while preparing an update.
12:23
Entered the displayed record identifier into the UpdateData JSON body, then began adding a `title` field with the value `tea`.
Populate the update request with a record identifier and revised title.
12:37
Continued editing the JSON body, completing the title value as `tea` and adding a description value of `jkhnj`.
Add replacement title and description values to the update request.
12:47
Switched between GetData and UpdateData, sent the UpdateData request, and received a 200 OK response confirming the update; then returned to GetData to inspect the record and switched to Windows Explorer.
Submit the record update and verify the resulting data.
13:05
Switched to Visual Studio Code, opened model.js and controller.js from the Explorer, and scrolled through the controller’s update handler.
Review the Todo app’s routes, model, and update-controller implementation.
13:16
Edited the findByIdAndUpdate call in controller.js, adding an options object with `new: true`; the terminal then showed that nodemon had crashed while waiting for file changes.
Configure the update handler to return the updated document.
13:31
Opened a new Chrome tab and typed a search query in the address bar, correcting the partial text as the query was entered.
Look up how to update a document by ID in MongoDB.
13:41
Searched Google for `updatebyid mongodb` and scrolled through results to review the Mongoose findByIdAndUpdate example and its options.
Check the correct Mongoose update syntax and options.
13:56
Returned to controller.js and corrected the findByIdAndUpdate options to `{ new: true }`; the terminal then showed nodemon restarting and starting the server.
Fix the update-handler options and restart the app after the edit.
14:07
Switched to Postman, opened the UpdateData request, and reviewed its PUT endpoint, JSON body, and successful 200 OK response; then returned to the GetData request.
Verify the API update request and inspect the returned data.
14:20
Reviewed the successful GET response in Postman, scrolled slightly, and selected the TODO_APP collection to view its overview.
Review the TODO_APP collection and its existing GET result.
14:29
Opened a new request from the TODO_APP collection, then clicked and typed in the request name area, making brief edits while the request remained otherwise blank.
Create and name a new request in the collection.
14:41
Continued editing the request name and changed the saved request to deleteData with the DELETE method; left the URL and parameters blank, then switched to Visual Studio Code.
Set up a delete-data API request.
14:52
In controller.js, scrolled to the end of the existing updateData handler and began typing new code below it, entering an incomplete export statement and then partial text on subsequent lines.
Start adding a delete-data controller function.
15:02
Continued editing the unfinished code at the bottom of controller.js, typing a deleteData identifier and an incomplete export/const declaration; the editor showed syntax errors and the app remained crashed.
Build the deleteData controller declaration.
15:16
Completed the declaration into an async deleteData function with an empty body, using Enter and brace/arrow characters while adjusting the cursor in the editor.
Create the basic async deleteData handler structure.
15:26
Clicked within the `deleteData` function and began typing its body, adding a `try` block and opening braces; the backend process restarted as the file changed.
Start implementing error handling in the delete controller function.
15:36
Continued editing the function by adding a `catch(err)` block and beginning a response statement inside it. The terminal showed the Node app crashing while the incomplete code was being saved.
Add a catch handler for errors in `deleteData`.
15:45
Typed a 500-status JSON response in the catch block, including a server-error message; the terminal returned to showing the server running and MongoDB connected.
Return an error response from the delete handler's catch block.
16:05
Continued typing and correcting the server-error message in the JSON response.
Complete the error message in the catch response.
16:12
Added an `error` field to the JSON response and typed `err.message` as its value.
Include the caught error message in the server error response.
16:23
Clicked in the editor and scrolled through `controller.js`, moving from the lower `deleteData` handler up to the imports and earlier controller functions; briefly invoked a keyboard shortcut while reviewing the code.
Review the controller code after editing the error handler.
16:32
Typed and edited a new statement inside the `deleteData` function, beginning a declaration with `const` and then adding an incomplete identifier.
Begin implementing the delete-data controller logic.
16:42
Continued the line by typing `= req` and opening code-completion suggestions, then added more text and opened the editor context menu.
Build the request-body declaration for the delete handler.
16:52
Dismissed the context menu and continued editing the function, completing `const { _id } = req.body;` and beginning another statement on the next line.
Extract the record ID from the request body and continue the delete handler.
17:02
Corrected the partial identifier to `dataDelete`, typed `=`, and began an `await` expression.
Prepare an awaited database deletion operation.
17:12
Continued the awaited expression by entering `Data.dele` and viewing the database method suggestions.
Choose a deletion method for the database model.
17:22
Navigated the autocomplete suggestions and completed the method name as `Data.findByIdAndDelete`, then pressed Enter.
Select a database method to delete the record by ID.
17:32
Edited the `deleteData` controller, completing the `Data.findByIdAndDelete(_id)` call and adding a semicolon; then began a return statement on the next line.
Implement the delete controller's database operation and response.
17:43
Continued the return statement, typing `return res.deleteData` beneath the database call, then clicked within the code line.
Add a response using the result of the delete operation.
17:53
Repeatedly clicked around the return line and used keyboard editing and undo while adjusting the code; the line remained `return res.deleteData`.
Correct or revise the delete controller's return statement.
18:02
Typed `st` after `res.` and pressed Enter, then opened parentheses after the resulting `res.status` completion.
Begin constructing an HTTP status response for the delete operation.

Implement and test the Todo_app API’s update and delete routes and controller handlers.

Built and tested GET, add, update, and delete endpoints for a MongoDB-backed data app using Postman and VS Code. Implemented the update and delete controllers and routes, verified successful add and update requests, and investigated a delete request failure caused by `res is not defined`.

clip.mp4The screen recording45 MB events.jsonEvery input logged, synced to the video clock9 MB frame_events.jsonEvery input logged, synced per frame21 MB narration.jsonDescriptions of what happened, and why58 KB metadata.jsonThe session's facts1 KB

More from this set

All 21 samples →

Productivity · Windows34 min

Construct Hub Presentation

34 minWPS Presentation

WPS Presentation

Video editing · Windows30 min

Edit travel montage

30 minAdobe Premiere Pro

Premiere Pro

CAD · Windows22 min

Model the crankshaft

22 minSiemens NX

Siemens NX

All 21 samples→