G Squared Challenge

Local Development

1. Run npm install
2. Run npm run dev

Approach

I've built a simple React app using Vite for local development. The project structure separates components, CSS, and assets into dedicated folders to reflect a more real-world setup.

Note: The app runs in StrictMode, so the useEffect hooks include logic to prevent duplicate fetches.

Posts are loaded via a useEffect hook and stored in both useState and sessionStorage. If the requested page of posts is already in sessionStorage, the app serves them from cache instead of making a network request. I chose sessionStorage over localStorage because it's less persistent and more ideal for a blog where new articles are regularly published.

A skeleton loading state and a simple error state are included. The error state can be triggered by removing the if (!response.ok) check in Posts.tsx (line 107). If an error occurs, a "Try Again" button allows users to retry the request.

Styling is handled with Tailwind CSS v4 but could be easily swapped out for CSS-in-JS or another styling approach.

Pagination is implemented via a "Load More" button, and appropriate ARIA attributes have been added to improve accessibility.

Improvements

1. Use TanStack Query - Replacing the hand-rolled data fetching with TanStack Query would simplify caching, retries, and data fetching, but I’ve followed the test instructions for this implementation.
2. Enhance CSS structure - Improve scalability by refining the CSS setup to handle nested selectors and breaking styles into separate files.
3. Optimize API responses - The WordPress API currently returns full posts, including raw HTML. On the backend, we should sanitise the data, prevent unwanted HTML, and consider GraphQL to fetch only the necessary fields, reducing network payload size.