Code Challenge

Overview

You’re building a basic React app to display blog posts from a WordPress site. Each post should show the title, date, author, and a custom color field. You will need to expose the color field to the WPGraphQL API and make it available in the React app. You have creative freedom to enhance the UI and can add optional features like filtering by color or author.

Goal

Starting with the basic React app in this repo, render a list of all posts from a WordPress site. Each post should contain the following:

• title
• date
• author
• color (custom field)

The color field needs to be exposed in the WPGraphQL API by adding it as a post meta field and then surfacing it in the GraphQL schema.

Feel free to enhance the UI however you see fit. Consider how the custom color can influence the display (e.g., background color, text color).

Bonus (Optional)

• Allow the user to filter posts by author or color in the UI.

Prerequisites

• Local
• Node (v20+)

Using Local, create a new WordPress site with WPGraphQL active. Set up a blank WordPress plugin where you can write your custom code for exposing the color field (and any other customizations that might be needed).

Evaluation

We are looking for:

• Correctness: Does the app work as expected?
• Code quality: Is the code well-structured and easy to understand?
• Creativity: How did you choose to enhance the UI or handle additional features?
• Problem-solving: Did you approach the GraphQL API customization effectively?

Good luck, and have fun!