Case Study: Newspaper API

I developed a dynamic news app using Node.js, EJS, HTML, and CSS. It fetches and displays live articles through API calls, demonstrating asynchronous data handling. The app smoothly renders up-to-date content in real time.

Go to Live Version

Go to GitHub Repo

Figma

CSS

HTML

Node.js

EJS

Goals

  • Use basic Figma design to implement website characteristics
  • Utilize API calls to query and return information from external sources
  • Leverage asynchronous queries using axios to improve website performance

Challenges and Skills developed:

Refining API calls and returns

Using REST API calls, the syntax and error reading became essential. As each API service varies from server to server, it was essential to review and leverage the documentation of the API server

Leveraging EJS to loop-render returned API values

Using EJS to loop render HTML components became essential for the page. It provided a clear and easy way to take the API response and quickly and effectively rendering the results in a styled and structured manner.

Implement unified CSS categories for loop-rendering

Using broad classes for loop rendering allowed for a unified way for the API results to be displayed. This required a great deal of focus and pre-planning. Utilizing the Figma mock-ups for the page assisted greatly in creating broad classes which styled the loop rendered components.

Future project development:

Should the page be utilized, increase API capabilities with a paid API subscription. As seen in its current form, there are notably limited API calls that can be made and limited values which can be returned

For a full page, the restrictions on the number of API calls and the number of returned results w is required. This would allow for a more comprehensive and full page. A paid subscription would also allow for other categories to be queried. This would allow for the page to have more refined functionality.

Refined CSS and UI/UX interface for an improved user experience

The current page has a very simple, clear layout and style. The page could be expanded to have a more interesting style with a more interactive layout. While simplicity is certainly a value in the UX, this page focuses far more on the functionality than the style