Narrative:

Using a previous Term Project focused on building for mobile web, I recreated the site using ReactJs. The site contains card styled content, with monkey jokes generated by GPT-4.

Steps:

Transfer Vanilla HTML site to React

Load Card data from JSON

Fetch API data with prompt

UseEffect Response and mapping results

Vanilla to React:

The layout of the single page app is simple, I build a Header and Footer component that could be reused if the app was expanded. Then, I created a banner component for the largest image and text block. A Card Component was created that took inputs title and description, reused in the postGrid component.