ApiBlaze: Development Phases



  • Backend: Parse API spec and provide an optimized, internal datamodel for searching
  • Frontend: Dispatch and process WebSocket requests for searching in the internal datamodel
  • Frontend: Display search results in a popup
  • Frontend: Display description and referenced request/response datastructure of the selected element
  • Backend: Introduce the concept of clients, store client ID and currently selected API
  • Frontend and Backend: Search and select different OpenAP specification
  • Frontend: Switch search mode between properties, objects and endpoints, and render search results visually different
<section class="search-wrapper">
<div class="input-wrapper">
<input type="text" id="query" value="" spellcheck="false" />
$query.focus()function addCollapses($container) {
$query.addEventListener('input', event => {
let value = event.target.value
socket.on('results', results => {
function copy(text) {
$query.addEventListener('keyup', resultsKeyControl)
$query.addEventListener('focus', resultsFocusCheck)
$query.addEventListener('blur', resultsFocusCheck)


import { handleApiSearch } from '../controller.js'let state = {}
let _$root = undefined
function updateState (newState) {
state = { ...state, ...newState }
function getState () {
return state
function render (args) {
const html = `
<h2>Load an API</h2>
<input type="text" class="api-search-bar" id="api-search-bar" value="" spellcheck="false">
<div id="api-search-results" class="api-search-results"></div>
return html
function mount ($root, ...args) {
_$root = $root
$root.innerHTML = render(args)
.addEventListener('keyup', e => handleKeyup(e))
function refresh (args) {
mount(_$root, args)
function handleKeyup (e) {
const keyword = e.target.value
handleApiSearch(keyword, updateState)
export { mount, getState, refresh }

Framework-Based Design

import { Component } from 'spac'import SearchApiAction from '../actions/SearchApiAction.js'export default class SearchBarComponent extends Component {
render = () => {
return `
<input type="text" id="api-search-query" value="${this.getState()
.apiSearchQuery || 'Kubernetes'}" spellcheck="false">
mount () {
.addEventListener('keyup', e => this.handleKeyUp(e, this))
handleKeyUp (e) {
this.updateState({ apiSearchQuery: e.target.value })
async triggerSearch (e) {
const apiList = await new SearchApiAction().run()
this.updateState({ apiList })





IT Project Manager & Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

5 Module Gems For The NPM Junkie

The Internals of Node.js

Why there is a difference in behavior for copying contents in primitive and non primitive type?

Featherlite Vision Unveiled — V 0.1.22 — Codenamed TNT

SEO in Angular with SSR — Part I

Conditional Rendering In React

Flux and Redux

Airbnb Coding Interview Questions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


IT Project Manager & Developer

More from Medium

NodeJS: What and Why?

Start Unit Testing Your Javascript with Jest

< Lets Git to it >_

Have you heard of Application Frameworks…?