Dynamic Data and Third-Party API's

Project type
project year

Understanding API endpoints using Insomnia and coding using Replit.

Dynamic web apps fetch data on-demand to create rich and relevant user experiences. Most third-party APIs implement an architecture called REST (Representational State Transfer) to deliver data via URLs called endpoints in a format called JSON (JavaScript Object Notation) over the internet via HTTP (Hypertext Transfer Protocol). For this project, the chosen API is the POKI API. Using JavaScript, JSON, HTML, and CSS a webpage was created that connects the API to the website to display dynamic data. All the process is documented in this document.

Process Sketches

The first cover is an illustration of a dragon, which ties into the symbolism of the dragon in ancient Chinese culture.

The second cover is Chinese soldier holding his sword with the text of the book in the background. Can be further expanded by adding symbolism like dragons cranes, tigers.

Other Research

Research Into Ancient Chinese Symbolism

Some extra research I did to help me progress with this project. The research was largely on ancient Chinese symbolism and how I can relate that to The Art of War. Out of this research, the symbolism of the Crane became the most useful in helping me develop a cover that the meaning behind it and also was visually appealing. I also reviewed the ideas of semiotics and dis-course analysis on this page.

Refined Sketch

Illustrated in an ancient Chinese looking style continue being connected to the author of the book who was Chinese 2500 years ago. The water color was used because it mimics the style used in ancient Chinese art. The cranes symbolize the passing of life to the afterlife which is one of the aspects of war.

Type Exploration

Final Chosen Type

For the final design, I used the symbolism of the crane’s life in the refined concept but now I also how to extend the design to make a back cover and the flaps for the front and back. For the front cover, I refined the watercolor painting. Leading to the back cover I painted a blood moon which symbolizes war and death. Fits nicely with the themes in the book. I also explored three different typefaces to work with the book, two serifs and one sans serif typeface.

I also added the synopsis of the book. Created a barcode for the back cover and added type for the front flap. The front flap contains a quote from Sun Tzu. The measurements for the front and back cover pages are 4.25 x 7 inches and for the !aps, it is 2.5 x 7 inches.


Lo-fi Wireframes

Before starting any code I created wireframes using Adobe XD. These lo-fi wireframes allowed me to visualize a potential layout for the Pokédex. I wanted a simple layout with an emphasis on the Pokémon images and their names in order from the first Pokémon ID to the last.

Insomnia Endpoints

The PokéAPI offers a wide range of endpoints that a user can gather data from. I used a program called Insomnia to access those endpoints and display the JSON data in a manner that is easier to read.

For example, these are endpoints I accessed to gather data to create the Pokédex.


Replit Coding

No items found.
In the beginning, I had the biggest difficulty getting the API to work. Since the POKIAPI stores its data in an array that is within an array it took some time to figure out the correct code that would fetch the corresponding endpoints. However, after getting the JavaScript to correctly fetch the API I was able to get the names of the Pokémon to display. The next step was to display GIF’s. For this, I uploaded 151 gifs into a GitHub folder. Lines 6-14 display the code that completes the visual elements on the page. Specifically, line 8 calls upon the GIF files in the GitHub, and line 14 is what displays the GIFs on the webpage.
For the finishing touches, I decided to findthe Pokemon font online and use it for thetitle text. There are two variations to thisfont and those are the hollow and solidversions. I also found a background thatdisplays all 151 Pokemon together fromPokemon Fire Red. The following link will take you to viewthe webpage online.

Procreate Layers

Working off the book redesign for the Art of War by Sun Tzu I took the time to split the illustrations into individual layers and also create new layers that would be used to add hidden meaning to this augmented reality project. The concept behind the first book cover was to illustrate a different meaning to war. With this augmented reality expansion of the first project I wanted to add a new hidden layer of meaning.

Vectary Modeling 01

After individually creating new illustrations for the layers my next step was to then start adding everything to the online software, Vectary. Vectary is a 3D modeling software that you can use in your browser. This is where I created the initial 3D model of my book cover.

Vectary Modeling 02

In Vectary I also created the blood spills. This was the layer of hidden layer that you would only see if you had the QR code for the Augmented reality. To create these models of the blood spills I used the tools:
           - Draw Lines
           - Hand Draw

These two tools allowed me to draw lines to create unique and organic shapes which aided the process of created the blood drips and spills.

Vectary Modeling 03

In the last stage of this project I put all the visuals together. After a user scans the QR code he new illustration  and the 3D modeled blood pool and drips bring this book to life.

For future reference I will not use Vectary again to create Augmented Reality models. Although Vectary is a strong software I had problems troubleshooting why when viewing the AR using a phone camera the 3D model would be desaturated and some elements would clip through each other.

Scan this code with your smartphoneto view the book cover in your environment.
After scanning with your camera roll the default browser will open, next click on the “open with AR” button on the center bottom of the screen. Wait5-10 seconds and the book will appear in your environment viewed by your camera. When viewing you can resize the book by clicking on the screen with two fingers and dragging. Likewise, you can also move the book around and rotate it. Enjoy!

Concept Sketch

Cassini Huygen

Cassini Huygen was a sophisticated robotic spacecraft that was sent to study Saturn and its complex system of rings and moons in unprecedented detail. This sketch captures the spacecraft, Saturn and its rings.


Five Steps

Before tackling the animation I planed out a five-step storyboard. This  helped me with visualizing how the scene would develop with a narrative in mind. The first storyboard is just a scene of space. In the second Saturn and its rings starts to appear up from the bottom of the screen. In the third Saturn is in place. The fourth storyboard is when the Google Logo is introduced. Lastly, in the fifth storyboard Cassini Huygen flies in and knocks a letter from Google out.


Another exercise that I did to help myself develop the scene was practicing illustrating layouts in different grids, balances, etc. The main three I practiced were, grid, radial, and random.

Background Illustration

Step by Step

First I sketched out the background of my scene. To begin the watercolor I started with adding in the base layers with light tones. When I was finished I put an alpha lock on the layer The next step was to add in more details with a different watercolor brush. I then merged the two layers when I was happy with the result. Since watercolor is somewhat transparent I added a layer with a black fill into the background of the combined layers. Lastly, for the background, I drew in my starts. To dot his I used a sketching brush rather than watercolor. I made big stars that would flicker and smaller dots acting as starts in the distance.

Saturn Illustration

Step by Step

With the background done I sketched out Saturn with its rings.  I started with the base layer of watercolor and then started working to define the painting with a thinner brush and blending. This was the finished product with Saturn and the background together in one layer.

Procreate Animation Process

After finishing the Illustration I started with the animation. The photos these next three pages document my journey of creating my first animation. To being I started with animating Saturn popping up on the scene. This took a total of 10 frames.


The drone I drew whacks out the first “o” out of google. The drones appears  on a curve to mimic the effect of gravity. Then once it knocks the “o” out of the frame it stays put with the Google logo almost as if the Google logo trapped it within Saturn's gravity.

Final Animation

This is the final GIF put together in low quality to not impact browser performance.

Other Projects