Frontend Coding Challenge

This project is a basic Nuxt 3 app which uses some free API data to fetch a list of users and display their information in a list.

By clicking on one of the elements in the list, you are redirected to the user's profile, which currently misses the call to get the user information.

The website is not well-designed on purpose, but you don't have to work on this part.

Tasks

1. Responsiveness

   Change the current layout to bring some responsive behaviour. Only implement a single solution, but try to think of different solutions that could be used to achieve responsiveness.

2. SSR vs SPA

   Implement the call to get the user information when navigating to their profile using a Nuxt built-in hook. Use the following endpoint: https://jsonplaceholder.typicode.com/users/{id}
   Display some information, but do not add too much styling.
   • Change the Nuxt configuration to behave in SPA (single-page-application) mode, and compare the behavior when previously using the SSR (server-side-rendering) mode.

3. Page loading performance

   Navigate to the /gallery page which contains a list of photos. This page is meant to be publicly accessible.

   • What would be your 2-3 recommendations or approaches to guide a small team of developers to improve the loading performance of the Gallery page?
     Try to suggest something that the team can easily align on and let them find their own solutions to implement it.
     Optionally, include a brief code draft or example to illustrate how to begin applying your recommendation.
   • What would be your own top recommendations (max. 3) if you were responsible for optimizing the page?
     Implement a few of these recommendations directly in code, focusing on those you consider most impactful.

4. Architecture

   The Gallery currently fetches its data from /api/gallery, using a Nuxt server route which acts as a minimal Backend-for-Frontend (BFF).

   • Improve the current implementation - but focus on making a decision for a quick first iteration.
     You can choose one of the following approach as example:
     1. Continue with the current setup (BFF)
     2. Move the all logic into the client-side
     3. Use a static site generation (SSG) approach
     4. Any other approach that can simplify or quickly optimize the current implementation
   • (Bonus) Could Nuxt be used as a full backend?
     In what scenarios would that make sense, and what might be the limitations?

5. (Bonus) Accessibility

   What can you say regarding the actual accessibility of the website?
   Where would you start if you were to improve it? You can present a rough plan of action or a few code examples.

Goal

Please take no more than 1-2 hours for this task. We are aware of everyone's time limitations and appreciate you taking time to complete this challenge. The goal of the exercise is not to invest too much time to search or implement the perfect solution but rather to discuss the pros and cons of the different approaches on the different tasks. Let us know if you have any questions. We'd prefer to talk about a problem first before investing too much time into the wrong solution. We are happy to help!

There are no right or wrong answers.

Therefore, please try to not:

• Add too many extra elements
• Add too much extra styling

Feel free to ask any questions if anything is not clear!