Build a Postman Clone: Adding PUT, PATCH, and DELETE

Updating the Dropdown and Options in the App

Tim begins by showing the setup of the app. Currently, the dropdown menu allows selecting GET and POST. To build a fully functional Postman clone, we need to add PUT, PATCH, and DELETE to the options list.

In properties, Tim updates the dropdown items so that all five HTTP verbs appear as choices: GET, POST, PUT, PATCH, DELETE. He emphasizes that the dropdown selection must match the Enum used in the backend, which defines valid HTTP actions for the API client. This ensures that when a user selects an option from the dropdown, the process correctly maps it to the underlying code logic.

Mapping User Selection to HTTP Actions

Tim explains how the app converts the user’s selection in the dropdown into a specific HTTP request method. The system first validates the URL entered in the form HTML input, then parses the selected choice as an HTTP action in plain JavaScript.

This setup allows the app to pass three key pieces of information to the CallApiAsync method:

1. The URL from the form HTML input.

2. The body content, usually in JSON, entered through a form JavaScript area or JSON text editor.

3. The selected action corresponding to the HTTP verb.

This ensures the Postman clone can process different types of requests and return the correct response JavaScript to display in the response HTML section.

Implementing PUT, PATCH, and DELETE Methods

Tim demonstrates the code needed to handle PUT, PATCH, and DELETE:

• PUT: Updates a complete record. The API client sends a full JSON object, overwriting all fields for the given ID.

• PATCH: Updates only specific fields. This is useful when you want to modify part of a record without affecting other data.

• DELETE: Removes a record entirely. It requires only the URL and ID; no content is sent.

Tim notes that DELETE is slightly different because it doesn’t return content—just a success confirmation. These changes are implemented entirely in plain JavaScript, modifying the CallApiAsync method to handle all choices and actions.

Testing the Features

Tim emphasizes the importance of verifying that each HTTP method works as expected.

1. GET: Tim selects GET in the dropdown and fetches posts. The API client returns the correct response JavaScript, displaying data in the response HTML section.

2. PUT (5:01): For PUT, Tim updates a full record with ID, title, body, and user ID. He shows that the returned JSON matches the data submitted, confirming the process works correctly.

3. PATCH (6:10): Tim demonstrates PATCH by updating only the title of a record. The Postman clone leaves other fields intact, proving it can handle partial updates effectively.

4. DELETE (7:32): DELETE requires only the record ID. Tim runs the request and confirms success via empty brackets, indicating the record was removed without returning unnecessary data.

Through this process, Tim illustrates how a Postman clone can perform all CRUD operations: Create (POST), Read (GET), Update (PUT/PATCH), and Delete (DELETE).

Summary of Changes and Setup

Tim summarizes the key steps and code changes needed to enhance the API client:

• Update the dropdown menu to include all HTTP verbs (options).

• Ensure the Enum in the backend matches each verb so the selection correctly maps to a method.

• Modify the CallApiAsync method in JavaScript to handle the additional verbs and process data appropriately.

He notes an optional enhancement: for DELETE, you could return a simple success message instead of serialized output, streamlining the user experience.

Current Status and Features of the Postman Clone

At this point, the Postman clone is fully functional with all five HTTP verbs. Users can enter a URL, submit JSON data through a form JavaScript editor, and receive responses in the response HTML display.

However, Tim points out some additional features that could enhance the application:

• Support for XML requests.

• Handling authentication.

• Adding custom headers.

These are opportunities for developers to extend the clone and make it more versatile.

Tim’s Advice for Enhancing Your Own Postman

Tim challenges viewers to continue building and improving their Postman clone:

• Add web user interfaces using frameworks like WPF, Blazor, or plain HTML/JavaScript.

• Include additional APIs and handle different data formats.

• Test different options in the dropdown and expand the features for richer functionality.

• Share your project on GitHub to show off the repo, code, and process to potential employers.

He stresses that practice is key: building, testing, and iterating on your project helps you understand APIs and programming concepts deeply.

Conclusion

Tim wraps up the video by encouraging experimentation. He enjoys tinkering with test applications and emphasizes that developers improve through repeated iteration.

While the GitHub code for the series is not immediately provided, it may become available in the Dev Pass in the future. For now, the goal is to let learners build their own Postman clone from scratch, practicing setup, process, and code implementation while making the project uniquely theirs.

By following Tim’s approach, developers can create a functional API client, understand HTTP methods, and produce a portfolio-ready project that demonstrates practical skills with form HTML, response JavaScript, and JSON processing.