Gallery
Share
Explore

Next.js Developer Test Assignment

Technical Task: Country Explorer Dashboard

🎯 Objective

Build a simple web application using Next.js, Apollo Client, and Material UI (MUI) that displays and interacts with a list of countries fetched from a public GraphQL API.
⁠

📋 Requirements

1. Project Setup

Use Next.js with TypeScript
Use Material UI (MUI) for styling and components
Use Apollo Client to interact with a GraphQL API

2. Public GraphQL API

Connect your application to this public API: ​
https://countries.trevorblades.com/
⁠
⁠
Query example:
graphql
ZkopírovatUpravit
query {
countries {
code
name
capital
emoji
currency
continent {
name
}
}
}

3. /countries Page

Implement a page at /countries that fetches and displays the list of countries in a table.
Each row should include:
Country flag (emoji)
Country name
Capital
Continent name
Currency

4. User Interactions

Filter by continent using a dropdown
Search by country name using a text input
Sort countries by name (ascending/descending)
Show details when clicking on a country row (either in a modal or on a dedicated detail page)

5. Bonus Features (Optional but Encouraged)

Show a loading indicator while fetching data
Display an error message when something goes wrong
Implement a light/dark mode toggle using MUI’s ThemeProvider
Make the UI responsive: use a table on desktop and card/grid view on mobile
Deploy your app to Vercel / AWS Amplify / Firebase Hosting and provide the live URL
⁠

✅ Evaluation Criteria

Proper use of Apollo Client for querying and caching
Clean and responsive UI using Material UI components
Functionality of filtering, searching, and sorting
Code structure, modularity, and readability
UX polish and error/loading handling
Bonus: Deployment, responsiveness, and optional features
⁠

📦 Submission Guidelines

Push your code to a public GitHub repository
Include a README.md with setup and run instructions
If deployed, include the live URL
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.