Build a Web Page and Finish the App

Complete the API rate-limiting project by adding an HTML web page to make the application more accessible.

This is the last step in finishing our API rate-limiting project. We’ll implement a minimalistic UI where the user will get four buttons to hit four different APIs. Each of the APIs will be configured with a rate limit.

Implement the four APIs with middleware

Let’s now implement four APIs with our middleware function we implemented earlier. Our APIs will be kept simple by implementing a middleware function that verifies if the IP address is permitted to access the API, among other checks and processes. While implementing the middleware function, if the IP address is not allowed to hit the API, we’ll return a response with a status code of 503; moreover, we’ll add two attributes to the request object and call the next() function. This will pass the control to our next middleware function in the pipeline, which is our route handler function. In every route handler function, we can execute any business logic (which we can implement as per our requirements) and return the response containing the status text, an API message, the number of calls made in the window, and the time left for the limit to be reset.

We’ll have the following files from our earlier lessons:

  • RedisHandler.js: This file handles the Redis client instance that we discussed earlier. We’ll keep this file in the common folder.

  • RateLimiter.js: This file handles the rate-limiting middleware function implemented in the previous lesson. We’ll keep this file in the middleware folder.

Let’s now move to the code.

Get hands-on with 1200+ tech skills courses.