Derek's Galactic Translator

My capstone project incorporates HTML, CSS and uses the Vue.js framework to help use JavaScript to import third party API data into a single page webapp.
Capstone Project Homepage

Project Background

This project was designed to display all the web development skills I had learned throughout the program, with no prescribed way as to what project or how I could satisfy the requirements.

Challenges

I was required to write a Dev Diary to track progress and obstacles over a ten week quarter that later proved valuable, since I am writing this reflection more than 2 months after finishing the program. I encountered a few major problems while working on this project, primarily the API restricted data calls to a maximum of 5 per hour, and this made troubleshooting while adding JavaScript code tedious and difficult. I also was attempting various methods for how to add a specific image for a corresponding Vue file whenever a user visited it.

Requirements

As mentioned above, the overall goal for this project was to create something that encompassed all of the material I had learned throughout the program. Those requirements are listed below:

Research

I looked over a list of free to use third-party APIs that were made available to all classmates as well as Googling various other APIs to find one that interested me. I selected the Fun Translations API as it incorporated elements that I felt were make the project intesting and fun to a diverse audience. My research consisted mostly of using the API documentation in addition to referencing the Vue CLI documentation since there was an upgrade between quarters.

Design Comp Page One
Design Comp Page Two
Information Architecture
Wireframe Page One
Wireframe Page Two

Actions & Outcomes

In summary, what I built was an online webapp that a user can use to select one of five available API text translators to translate any user submitted text.

Technologies Used