TLDR

What is an API?

APIs (Application Programming Interface) is a set of rules(technically called as "protocols") that allow different software programs to talk to each other and share information. The world runs on APIs, they act as the bedrock for all that we see in software and the seamless with which our programs interact with each other.

Why should I care?

If you're building an application that connects to an actual real-world use-case, you will either need external APIs (like weather or stocks) to analyse, visualise or value-add on top of it, or if you're building something independently(for example, a social network app), your application will need to internally 'talk' with different parts of the organisation, or backend data servers for extrcting user related information(your profile name, gender etc), all done by APIs

Integrating APIs in your application: step-by-step

Dualite Alpha has a unique way of integrating REST APIs. There are essentially two ways:

• OpenAPI spec: You can directly copy-paste your API Swagger doc or OpenAPI spec and it'll automatically understand which API endpoint needs to be connected to which design element
  
  

• Infer API automatically: Dualite builds out a 'dummy' API for you based on inferring the frontend structure to get you an idea of how the API needs to be developed

  
  

Let's understand how you can leverage Alpha to integrate with your setup

Defining the task for Alpha

Prompting or instructing clearly to Alpha is very important for a great result. To truly test out how well Alpha is capable of handling APIs, instead of one, let's give it a single prompt with multiple endpoints like this:

"build me a user list application, which fetches user list from my api (/users endpoint), and can search users (server side search, use the /search api), open profile of a single user (use /users/:id endpoint)"

The above application uses React and Tailwind with TypeScript fetches a list of users and their details from the dummy JSON page here. We've defined Alpha with the above prompt that there are three APIs and you have to use each endpoint in a particular way. By default Alpha does a client-side search, but here we have specifically mentioned to search server side so that it searches in the databases located on the dummy JSON website.

Integrating APIs

Now you can click on the code-like icon ( "</>") in the chatbot and copy-paste the OpenAPI specification there and click "Continue".

Let Alpha handle the rest!

Now, relax and chill with a lemon iced tea 🍹

As it loads, you can see it has created separate functions under api.ts and has created separate SearchBar.tsx, UserCard.tsx, and UserList.tsx based reusable components and two pages: HomePage.tsx and UserDetailPage.tsx

You can also check in the user.ts file that how well Alpha has inferred each type based of the API open specification

Note: It is SUPER important for you to provide the correct schema and havinga ll edge-cases mentioned and defined in it for Alpha to work flawlessly!

Final result

Finally you'll be able to see it working. You can check the deployed output we were able to create here

Concluding thoughts

You can see how well Dualite Alpha is able to handle all kinds of complex cases with multiple API endpoints. Join the waitlist here