Sonovate Code Test

The following exercise is designed to test your ability to:

• Implement a brief
• Work with React, Next.js and GraphQL
• Fetch and display data from a GraphQL API
• Handle loading, error and success states
• Implement dynamic SPA routing
• Deliver an A11Y compliant user interface
• Implement a user interface from designs

Getting Started

First, make sure you have nvm or nvm windows installed. Then clone the repo and run the following commands to start the Next.js server:

nvm use
npm install
npm run dev

Everything you need should be setup in this repo (Next.js, React, Apollo, Styled Components) and a Contentful GraphQL endpoint has been configured so you can start using the Apollo useQuery hook immediately. Feel free to use alternative technologies though!

Instructions

Please spend no more than 2-3 hours on this exercise.

1. On the home route /:
   • Query the Contentful GraphQL API for the first 10 blog entries (sorted by title)
   • Implement a loading state while data is being fetched
   • Handle potential Apollo errors appropriately (un-styled)
   • Implement a UI matching the designs to display the results
   • Ensure the UI is A11Y compliant
2. Create a dynamic route /[id] to handle individual blog posts then:
   • Link each item on the home route to the blog post route
   • Use the Next.js Link component to avoid page refreshing
3. On the blog post route /[id]:
   • Query the Contentful GraphQL API for the blog post by ID
   • Display the post title and body on the page (un-styled)

Discussion Points

We will use your test as a basis for discussion points in the first interview. Be prepared to discuss how you would add server-side rendering for the home route, and static rendering for individual blog pages.