We built an API Builder for our API-based automation platform
Tags: webdev, showdev
Published: 2021-06-03 07:27:48

[Pathfix Automation](https://pathfix.com/automation) runs on APIs only **(think: if Zapier and Postman had a baby)**, so it made sense for us to spend a lot of time to build out a slick and easy to use API builder.

With Automation, we want to give our users the ability to:


- build complex workflows (both internal and user-facing)
- call any API
- enrich the data
- transform data
- send to the next API

……..and essentially, work the way they wanted – without any limitations!

This made the API builder a very cruicial feature in our platform.

(But first, a little introduction)


## What is Pathfix Automation?
Automation is an API based automation platform that allows users to build flows using only APIs. Users can add multiple APIs and then stitch them all together to build out any automation they want.


![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622283420126/EzLd7oyo5.png)

The Automation platform came from the idea that existing tools are a bit too restrictive and doesn’t allow you to **simply work with APIs.**

So, based on many (many!) user requests, we decided to build a platform that ran purely on APIs, this meant that you can automate any process with any provider that has an API available.

**Not just internal automation** – More exciting is that you would be able to add user facing automation (integration) to your platform.



![Pathfix Automation.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1622283463282/5Q4E409n1.jpeg)

  
## The API Builder
We needed to start by answering the basic questions:

- How many APIs will our users have
- Should we have one dedicated page for APIs built (or, have it accessible from a popup)
- Allow for Search by multiple methods (keywords, url etc.)

We knew our users will have multiple APIs (I mean, ours is an API ONLY automation platform) but, we did not want them to lose context by leaving their design environment.

Enter – **Single Page App**

We added Design, Connections, Constants and the most important APIs as a quick popup – all without the user ever leaving their design environment.

*Et Voila!*


![api1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622283542614/xjhTv06qn.png)


**Design With Function**
We just had one goal – **make adding APIs effortless!**

To achieve this, we started to look at other API builders and connectors. Read reviews, researched on forums to understand what users wanted and what caused them the most pain while adding APIs.

Here’s where we settled:

- It needed to be **nocode** (read: no nonsense)
- Postman was the standard when it came to working with APIs. It’s ease of use and general ‘known’ feel was unmatched of course
- Bubble.io’s API Connector was simple, to the point and had a few elements we knew we could use (yes, the API Connector is a bit complex and has wayyy too many options that complicate makers. But we’re not gonna go there 🙂 )
- With this in mind, we started building out the API Builder. We knew we had to have the basic functionality including calling multiple methods, endpoint, Body, Headers and Query Params

Here’s what the builder looks like:


![api3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622283595067/DDgErDgO5.png)


Apart from these, we added a few features that checked the ‘convenience factor’ box.

- Import configuration from library (ours and yours)
- Import from CURL
- Import from JSON
- Export to JSON

This just made it super easy to work with APIs. So if you are not familiar with working with APIs, simply import a curl and we will get you all sorted!


![API5.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1622283669951/JxWpDjmFd.jpeg)



**Dynamic Values**
The power of Pathfix Automation was in the fact that we allowed users to play with the data received, handle the transformation and push dynamic data to another API.

Since Dynamic Values was pretty important, we added the easiest way for users to add this – add <> brackets to any dynamic field.

Once added, users can simply select the dynamic values for these fields from any API calls made in the flow.


![dynamic.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622283728003/GKI1rQnnD.png)

See what we did there? Our 4th task used data pulled from our 2nd and 3rd task. Just select the API and select the field.

Automation takes care of the rest!


**API Builder Video**
We created a video that details how you can use the API builder and walks through how it works.

<a href="http://www.youtube.com/watch?feature=player_embedded&v=Jl5mOPkRF1o
" target="_blank"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1d0rnestrnnhclnnpu0m.png" alt="API Builder" width="240" height="180" border="10" /></a>



**Conclusion**
Building the API Builder was definitely a challenge. The team at Pathfix took on the challenge head-on and fun along the way!

Sign up free for our  [Automation platform](https://automation.pathfix.com/)  and take the Builder for a spin.