Web Developer Technical Exercise

Overview

Welcome! This exercise is designed to assess your ability to work with our core tech stack: .NET, TypeScript, and React. You will build a small Analytics Dashboard in React that pulls together data from two pre-built APIs.

Time expectation: 2-3 hours

---

What's Provided

This repository contains a .NET solution with two microservice APIs which should be regarded as internal backend APIs orchestrated using .NET Aspire. Both APIs return mock data and are ready to run.

Important: These APIs represent internal, non-public services that already exist within the organisation and should not be called from a client browser. At the moment, they have endpoints that return all data. You can change the logic or add endpoints in these APIs if necessary to complete the task.

Reads API (internal)

Returns a list of content read events.

Endpoint: GET /api/reads

Response shape:

[
  {
    "contentId": "content-001",
    "userName": "alice.johnson",
    "readDateTime": "2025-11-03T14:32:00"
  },
  {
    "contentId": "content-003",
    "userName": "bob.smith",
    "readDateTime": "2025-12-18T09:15:00"
  }
]

Field	Type	Description
contentId	string	Identifier linking to a content item
userName	string	The user who read the content
readDateTime	string	When the read occurred (ISO 8601 date-time)

Content API (internal)

Returns a catalogue of content items.

Endpoint: GET /api/content

Response shape:

[
  {
    "contentId": "content-001",
    "contentDate": "2025-09-15",
    "title": "Getting Started with React Hooks"
  }
]

Field	Type	Description
contentId	string	Unique identifier for the content item
contentDate	string	Publication date (ISO 8601 date)
title	string	Title of the content item

The contentId field is the shared key between the two datasets.

---

Prerequisites

• .NET 10 SDK
• Node.js (LTS recommended)
• A package manager of your choice (npm, yarn, pnpm)
• The .NET Aspire workload installed:

dotnet workload update
dotnet workload install aspire

---

Running the APIs

1. Clone this repository and open a terminal in the root directory.

2. Start both APIs using Aspire:

dotnet run --project src/Interview.AppHost

3. The Aspire dashboard will open in your browser. From there you can see both services and their assigned URLs. Click through to find the endpoints for each API:

   • reads-api → {base-url}/api/reads
   • content-api → {base-url}/api/content

4. Verify the APIs are working by navigating to the endpoints above in your browser or using a tool like curl.

API Documentation

Each API exposes interactive documentation via Scalar. Once the services are running, navigate to /scalar/v1 on each service to browse and test the endpoints:

• reads-api → {base-url}/scalar/v1
• content-api → {base-url}/scalar/v1

The raw OpenAPI document is also available at {base-url}/openapi/v1.json if you prefer to use your own tooling.

---

Your Task

Build a React application with a .NET backend that serves as an Analytics Dashboard by consuming data from both internal APIs. The dashboard should join the two datasets on contentId to present meaningful insights.

Requirements

1. Fetch data from both internal API endpoints via the backend.
2. Whilst mocked data is minimal, in the scenario of real production data containing thousands of reads and content data points and with limited memory resources, your solution must be performant. You can change all code in the solution to meet this requirement.
3. Combine the datasets on contentId to create unified data in the backend and pass to the frontend.
4. Display at least three distinct visualisations or views of the data.
   • A table or chart showing the most-read content (read count per content item, with title).
   • A view of reads over time (using readDateTime as a time axis).
   • A breakdown of the most active readers (read count per user).
5. Provide a way to filter or interact with the data (e.g. filter by user, sort by read count, date range picker).
6. Provide a SOLUTION.md file that contains: a: A brief explanation of any architectural decisions you made. b: Describes any use of AI tooling you used. c: Provide insights into what you would do if you had more time with your submission.

Technical Guidelines

• Use React with TypeScript and .NET core for the backend.
• You may use any charting library or build visualisations from scratch.
• You may use any UI framework or plain CSS.
• You may use any state management approach you prefer.
• Provide appropriate unit tests for key components or data transformation logic.

---

Submitting Your Work

1. Ensure your React application runs with a simple npm install && npm start (or equivalent) with all .NET backend APIs being run by Aspire.
2. Commit your work to a branch and push it.
3. Include any setup notes if your solution requires additional steps beyond the above.

---

Project Structure

├── InterviewExercise.sln
├── global.json
├── nuget.config
├── README.md
├── src/
│   ├── Interview.AppHost/          # Aspire host -- starts both APIs
│   ├── Interview.ServiceDefaults/  # Shared service configuration
│   ├── Interview.ReadsApi/         # GET /api/reads
│   └── Interview.ContentApi/       # GET /api/content
└── frontend/                       # Your React application goes here

Good luck! We look forward to reviewing your solution.