API Explorer

Hi there! this is a story about a new app, API Explorer, built on top of Flutter and Firebase.

Overview

API Explorer’s target is to provide a tool somewhere between low and high level to view the data in an API.

Think about a data API that provides a few URLs to get a sample of raw data that interests you:

Eg: https://www.theaudiodb.com, “TheAudioDB is a community run database of Music Artwork, Metadata, Charts, Events, Music Videos and File Hashes, with free access via our front-end Website or back-end JSON API”.
TheAudioDB provides several ‘URLs’ to retrieve info about an artist (https://www.theaudiodb.com/api/v1/json/1/search.php?s=the%20beatles), albums by an artist (https://www.theaudiodb.com/api/v1/json/1/searchalbum.php?s=the%20beatles)

Well, API Explorer allows anyone to go from raw data to beautiful data, from {LEFT} to {RIGHT}:

From raw data to beautiful data

The same idea is applicable to more APIs of diverse type of information:

APIs everywhere

Can you see the pattern? All the samples follow the same design!


Wait: but what if data doesn’t follow this structure?
Well, the template is flexible, did you notice that Mars’ screenshot doesn’t have a description? what about the tags?
Also, there are a few templates more, each one suitable for a different use case, and it’s even possible to link several templates to one data API.

Templates

Enter the template model

Right now API Explorers provides 4 basic templates for the listing and 4 templates for the detail window. Every template is just a starting point, they all contain several customizable features.

  • detail window: suitable for… pretty much everything. Contains a hero section, a header section with poster, title, stats and chips, description, key/value listing, images widget, related widget…
  • compare: suitable for item compare screens
  • hero: large, background image, with a few texts
  • match: suitable for competitions, like a football league.
Template model

Listing model

There are also, several models to list the items in the data API:

  • list
  • image grid (without name)
  • image grid with name
  • match
Listing model

What’s next

In future releases I plan to allow everyone to add new data APIs. You will also be able to test your own APIs. I also want to add new templates for new use cases. Time will tell.


Note: API Explorer is not affiliated with, or in any way associated with any of the APIs described here

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade