Coding Challenge - Frontend

This is a Next.js project bootstrapped with create-next-app.

🚀 Getting Started

Welcome to the &why Coding Challenge 👋 To get started:

• Install the packages with pnpm install or npm install
• Run the development server with pnpm run dev or npm run dev
• Open http://localhost:3000 with your browser to see the result.
• You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
• Create a feature branch where you work and commit your changes.

(You can also use other package manager if you like)

📋 Overview

Goal of this challenge is to get an impression of how you approach interaction and user experience.

• The task is open-ended and there's no need to finish everything. Just show us what you achieved within the given time.

• Usage of AI coding assistants is okay, but make sure to have an understanding of all code you commit.

• After the coding time there will be a technical interview where we'll ask questions about the code. Being able to understand and explain your code is just as important as the visible result.

💡 Less code that you can explain is better than a lot of code where you are unsure how it works in detail.

When you are done, please create a PR in the repository including a short description

🎯 Task

Display a grid of music search results (artists, albums, songs) with the name and an image if available. Feel free to also display other information returned in the API response.

Here is a Figma file with a basic mockup: https://www.figma.com/design/QaAUTjri39HPaSUTEoMfWQ/Cat-Grid?node-id=282-53

The mockup serves as a basic idea of the grid. Feel free to style it in a way that you think makes sense.

✅ Base steps

• Fetch data from the iTunes Search API

  • Example request: https://itunes.apple.com/search?media=music&entity=musicArtist,album,song&term={your+search+term}
  • Fetching should be done in a Next.js server component
  • As a first step, you can set the search term to a fixed string, e.g. &term="focus%20for%20work"

• Render the items as cards in a grid layout. The layout should be responsive and work on desktop and mobile screen sizes.

• Style the card and the grid in a way that feels delightful, fun, and useful.

• For animations, you can use Motion or plain tailwind.

• Be creative! In this task, we'd like to see flair and creativity rather than extensive functionality.

⭐ Additional steps

Pick tasks from the following list that you consider relevant or interesting to you:

• Clicking on a card opens a detail page or detail view with more information. For example, clicking an album shows a page with all its songs. You could render different things depending on the entity type. Think about routing for the detail view.

🛠️ Technologies to use

• This is a next.js/react app, so please write react components and rely on next.js features
• Styling is preferably done in tailwind. If necessary you can fall back to css approaches.
• Feel free to use anything else that helps you. (Maybe shadcn or motion)
• Your code should respect eslint and prettier.
• Commit your changes with git and provide meaningful commit messages.