Explore

Next.js Developer Test Assignment

Technical Task: Sports Results Dashboard

Objective

Your task is to create a simple Next.js application using Material UI (MUI) that displays a list of sports match results.

⁠

Requirements

1. Project Setup

Create a new Next.js project with TypeScript.

Use MUI for styling components.

2. Components & UI

Implement a page at /results that displays a table of sports match results.

Each row should contain:

Team 1 Name

Team 1 Score

Team 2 Score

Team 2 Name

Match Date

Allow sorting by match date.

3. Mock API

Create a server-side endpoint at /api/results that returns mock sports match results.

Use getServerSideProps to fetch and display data on the /results page.

4. Filtering Matches

Add a dropdown filter that allows users to display only matches of a selected team.

Filtering should be implemented on the client-side.

5. Bonus (Optional)

Implement a loading indicator when fetching data.

Add a light/dark mode switch using MUI Theme Provider.

Deployment Bonus: Deploy your app to Vercel, AWS Amplify, or Firebase Hosting and provide the live link.

⁠

Evaluation Criteria

Candidates will be evaluated based on: ✅ Proper use of Next.js features ✅ Effective use of MUI components and styling ✅ Correct handling of server-side data fetching ✅ Implementation of filtering and sorting ✅ Code cleanliness and readability

⁠

Submission Guidelines

Push your solution to a public GitHub repository.

Include clear setup instructions in a README.md file.

If deployed, provide 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.