Web_Developer_Chronicles_3_first_capStone_Project

To say this week has been a more challenging one would be an understatement.

I undertook my first milestone project with the requirement of integrating an API in my project with the Fetch method. This was difficult due to the challenges I faced at several points in the development of my project. I had a lot of issues in the development of my JavaScript and jQuery with handling my JSON response. Then my issues continued with my CSS due to learning new ways of using CSS while working on my Media Queries, which I go into more detail below.

The premise of my project was to create a resource that someone could visit in order to get relevant and easy to understand information regarding the Coronavirus. With API usage in mind, I had planned on having statistical data in an easy to understand format, as well as to have relevant news articles based on the country in which the user had chosen to pull up data within the statistics. In addition to this, I planned on having links to official sires as well as helpful information.

The problem came with the API that I found for my News feature, NewsAPI.org. When reviewing its documentation initially I found that it checked all of the boxes that I needed to adhere to, and more importantly for me, was that it was free using their Developer account option(this was problematic later on). I toiled away on my project and really struggled to get my JavaScript just right in order to successfully pass all the information into a variable that ultimately was used for the Fetch. I found that there was a lot that goes into making a request Fetch just right, that previous assignments had not made me truly aware of. The complexities or simplicities of each API request that you make vary from one to another, the ones that I had been exposed to up till this point though we're more simplistic. There wasn’t a whole lot to think about or, account for with these prior lessons. After spending several hours longer then I intended to on my all of this, I was able to finally make a successful request. Now, mind you up until this point I had been using Postman to make test requests using my API key thus allowing me to know what JSON response I could expect. Upon finally achieving my first successful fetch using my site, I was greeted with an error message that it was unsuccessful because of the Developer plan and that with this plan I could only make requests on the localhost. Upon inspecting the plan options again, hovering on one of the ‘?’ on the Developer plan revealed this exact message. So this ended up being a really important lesson I learned in the importance of truly taking in all of the documentation of the API, starting with the pricing page. 

At this point, I had a meeting with my mentor, who said that based on my statistical API alone from about-corona.net, I should be able to proceed with my site as-is. So I scrapped the news idea altogether and proceeded. I put my site in the hands of users both in my family and out, both near and far, and received a lot of good feedback. I found that it was helpful for a lot of people and that it was easy to use as I had intended. I proceeded to submit this early stage of my assignment and was able to successfully pass this checkpoint before proceeding on to a more completed version with details made in CSS. 

However, I was realizing based on feedback from a peer Casey, that my website seemed rather bland, and that even after styling was still lacking. So I began to look more online at resources regarding CSS and found just how much is truly available out there. The degree to which you can manipulate in CSS I am still finding to be astounding. You truly are just limited to your imagination in tandem with your skill. Because of this learning of new CSS capabilities, while also working on my site, I ended up redoing my mobile, tablet, and desktop media queries several times over. I honestly felt dazed and confused at the end because I constantly reiterated sections immediately after one another given that I was learning at the same time as working which is ok in some professions, but here was ineffective. It was probably the worst possible way of handling CSS, but the end result was one that I was proud of and that I could call my own. In my searches for CSS info, I saw CSS generators appear but knew that I would not learn anything by making use of such quick options. Also, I felt like it would be morally wrong of me to do so given that this is going to end up in my portfolio. Now I know frameworks are a normal thing to use, but of my three capstones, I can only use a framework like Bootstrap on one of them. So I felt like using one of these CSS button or menu bar generator was deceitful.

Moving back to my API challenges, I received one point of feedback from the grading team and that was 

While your app works very well from a technical perspective (great job!), currently your it works with only one API and displays the data directly to the page. I recommend consulting with your mentor and/or PM to consider how you might integrate another API or add a feature or two which will do more than display the data you retrieve directly to the UI. This would make your application into a stronger portfolio piece.

With this in mind I met with my mentor again, and after discussing what I could really do given the purpose of this project realize the really only logical option was a news API. With the use of the website rapidapi.com, I was able to find a new API to make use of and began again to work away again from the ground up. Luckily this was a truly usable and free API and it works!

At this point, I am truly happy to say that I have finished, and that I have a live version of my site available to visit, and that I will be submitting it later today once finishing my readme.md.