My First App

https://phase-1-project-with-public-api-word-search.netlify.app/

how I built my phase 1 project

In the beginning I was nervous about whether I would be able to successfully complete the project because I had never built an app before. So as soon as I learned about where to look for public APIs to work with, I explored them one by one. Many of them are not easy to work with, some gave unclear instructions while others are dead end, meaning that you followed the instructions given in the API but turned out that the data could not be fetched. When I finally found a public API that I could work with, I reviewed my project requirements and started planning. Since I chose a dictionary API, it was pretty clear what I wanted my app to do. I wanted it to serve as an interface for a dictionary of sorts. So I defined the function to display short-definitions of a word as the minimum viable product for my app.

how I brought the project from the idea stage to the production stage

I began by studying what information about a word was provided by the API and how that information was organized. The API specified that: data about a word can be searched by headword or by stems. For example, when I queried the API for the word “mint”, it returned an array of three objects. Each object had a key for short-definitions, a key for full-definitions, a key for headword and a key for functional labels. In addition to these core categories which are specified by the keys, some objects, not every object did, had a key for run-on phrases, or idiomatic expressions. Since I wanted to be able to show more than just short-definitions, I had to be able to access those phrases in objects that did contain them, while skipping over those objects that did not contain a list of phrases related to the searched word. Also, the information that I needed was not directly available as a value of the “dros” [=defined run-on phrases] key because the value of this key is another array of objects.

The three objects contained in the array that is returned by the promise

Each object encapsulated a unique phrase. However, my code had to traverse several more layers before getting to the strings that I needed in order to display the phrase definition and its verbal illustrations. So, to continue. Within this phrase object, there were two keys, one key opened the definition of the phrase, the other opened the specific phrase, which was a string. The key that opened the definition did not lead to a string of definition directly, it led to another array of object. This object had one key, “sseq”, short for sense-sequence. This key led to another array. This array in turn contained another array which had two elements, one of which interested me. The first element was a descriptive string, the second element was an object which had the “dt” key, short for defining text. This key led to an array that contained another array, which contained two elements, the first element was a descriptive string while the second was another array, which contained two arrays. Finally, I’d reached the end. The first array contained the text definition of the phrase, the second array contained one or more verbal illustrations of the phrase.

challenges I faced and how I overcame those challenges

The challenges that I faced in the process of building my app were related to the fact that the API that I chose to work with had a rich collection of various categories of information related to a word, but these various categories existed at different levels in the hierarchy of the data. The information that I needed to access was deeply nested in the data structure. Sometimes, the information was contained in an object, sometimes it was contained in an array. The data was structured like a tree. A word could have several different meanings, and each object encapsulated the nuances related to that specific meaning. When I opened the object, it revealed many branches. So, picture the object as a seed. When that seed revealed what it contained, I saw a root with many branches. Each key/property of the object is a branch. To make a long story short, I had to write a deeply nested for loop in order to traverse the different levels in the structure, and since not every level had what I was looking for, I also had to test the type of data in each level in order to keep my code from erroring out.

the function that traversed four layers deep into the data just to get to the layer that had the defining text

Once inside the dt layer, some phrase definitions were four layer deep, some three, some two, and others immediately followed the dt layer. Furthermore, sometimes the verbal illustrations were found three layers deep, sometimes four layers deep and sometimes five layers deep. Each of these layers had to be checked and traversed because different words had different categories of information relevant to it that the structure had to make room for the potential existence of such information.

Because of this project, I learned how to work with an API, how to structure my DOM manipulation, and how to traverse a deeply nested objects that contained a mix of more objects and arrays.