Here is the link to run the program: https://profound-axolotl-0b0163.netlify.app/ OR: https://app.netlify.com/projects/profound-axolotl-0b0163/overview
The app’s main state lives in App.jsx, which stores all the posts and saves them to localStorage so they stay after refreshing. The App component passes this data down to its child components: Navbar, Composer, and Feed. The Composer lets users add new posts, updating the state in App when they submit. The Feed displays all posts by mapping through them, and each PostCard shows one post’s image, caption, and like button. When the like button is clicked, it updates the main post data in App. In short, App manages all the data, and the other components handle displaying it and sending updates back.
Screenshot A: The app showing the centered layout (visible margins), with the browser DevTools Styles panel open highlighting:
body’s font-family stack including system-ui,
the .container rules applied to main.
Screenshot B: A hovered button (e.g., Like) demonstrating the hover style difference.
Hovering over like:
Vs not hovering:
Screenshot C: DevTools Elements view of:
a Like with aria-pressed="true" (after clicking), set to true:
a post image’s img with a meaningful alt attribute.
And other screen shots:
