#BlackLivesMatter Support An Initiative

[Fun Builds] – hooks.dev – A Developer Tool For Testing And Debugging HTTP Requests

Javascript has become the programming language to learn for both front and backend engineering, and even game development. With many powerful frameworks leveraging the growing language, I had some experience with frontend development using Reactjs and the good old jQuery, and became interested in diving into the backend world of JS. The most common environment being nodejs, I set out to find a simple backend framework and from my research, expressjs was right for my needs.

I wanted to build a simple API to perform CRUD operations. Expressjs is lightweight and stripped down to the core, so I only had to install the packages I needed.

Picking up expressjs was quite straightforward and so I decided to build an application to process HTTP requests. The idea and execution was simple enough as a weekend project, which could be improved over time. With that, hookz.dev was born.

hookz.dev is a free and open source web tool that helps developers quickly test webhooks or catch and inspect all kinds of http requests.

REST API Design

The API design follows the REST principles and allows for creating hookz and posting request data.

The main entity is the webhook, which can be created or deleted via an API call to the routes as defined below;

Hookz data is received and processed by webhookDataRoutes.js

The above routes handle processing of HTTP requests to the webhook, deleting webhook data and returning data to the user. Future improvements here will be to add a level of security so webhook data is limited to those who create it. This will mean, creating either a public or private webhook with some kind of identification.

Database Design

The database system I used was plain old mysql, leveraging the mysql package for expressjs. Below is an overview of the database design. There are two tables; one for hookz and one for hookz_data.

Column Datatype Description
id INT primary key (auto increment)
name NVARCHAR UUID of the hook
created_at Timestamp
updated_at Timestamp

Column Datatype Description
id INT primary key (auto increment)
webhook NVARCHAR name of the webhook – primary key (hookz.name)
data TEXT payload of webhook request
created_at Timestamp
updated_at Timestamp

Database Migration Script

The init migration script to create the tables can be found in /docker_compose/mysql/init.sql.

Frontend

The frontend is built with ReactJS and uses the API service to request and load data. The frontend code can be found in the client folder.

Development Tools

The application is containerised using docker and can be setup in no time. To execute the application using docker, follow the steps below;

  • Make sure you have docker installed
  • Clone hookz.dev repository
  • CD into the project root directory
  • Run docker-compose build to build the container. This might take a while as it downloads and builds the images.
    • You could take a look at the docker-compose file and make adjustments, such as mysql passwords, port mapping, etc.
  • Once your build is complete. Run docker-compose up to run the application
    • You could also run only the docker-compose up command for first time setup which will build and bring up the container.
  • Run docker ps to get a list of available containers. You should see something like this (removed container ids to avoid confusion):

API (backend) can be accessed on port 5000 (http://localhost:5000) and client (frontend) on port 3000 or whichever port you defined or mapped to in the docker-compose file.

The project is open sourced with The MIT License, which means you are free to use without restriction :).

Future Developments

This is ideally the first version of hookz.dev, and I plan on adding more features with time. I currently get around to it over the weekends and during late nights, so if you have any suggestions or find bugs and issues you’d like to report or help with, feel free to open a ticket (issue) on GitHub or send me an email: hello@mandeeya.io

Code contributions are also very highly welcomed! You can email to let me know if you are interested in learning more about the roadmap for the project. I’d be happy to share some docs.

Here’s the link to the project on GitHub -> https://github.com/rasheeda/hookz.dev

Leave a Comment

Your email address will not be published. Required fields are marked *