This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
Develop a React application that fetches and displays data from [https://randomuser.me/api/.]
The following 4 values should be displayed:
- the user’s first and last name, image and country.
- The information should be initially fetched on the first page load, and a button for fetching a new random user should be available.
- Whenever a new user is fetched, the changed fields should be briefly highlighted in order to indicate changes on the screen. Note, that since the information is random, in most cases all fields (first name, last name, as well as country) will be changed and highlighted, but if some of them happen to be the same, they should not be highlighted.
- Things to keep in mind: Both the styling/design, functionality as well as code quality are going to be evaluated and discussed in a follow-up interview The solution should be implemented in TypeScript Since one of the main goals of this assignment is evaluating knowledge of React, ideally no caching or state management libraries (such as React Query or Redux) should be used Automated tests are optional The source code may be delivered as a zip-file, or simply a GitHub, CodeSandbox (or similar) repository External tools: As a Developer you are free to access any web resources but are expected to be able to explain and reason about the solution.
The test is meant to evaluate programming and problem solving skills. Write the code in the manner you think is good practice and are comfortable with (coding standard, naming conventions, appropriate comments, data structures, etc).