This content originally appeared on DEV Community and was authored by ZeeshanAli-0704
user-detail-app
Stage 1
You're going to build a web app using create-react-app and react-router.
Using the user data from the randomUser API, you will render a list of 10 users.
- Each user's name will be displayed on the list.
- Clicking on a user's name routes you to the corresponding user detail page, which consists of the user's photo, name, email address, state, and country.
Data to display on the User Detail Page:
- Photo
- Name
- Location (state & country)
API URL: https://randomuser.me/api/
Query Param: results=10
Additional:
Consider how you can optimize the code.
Stage 2
- Implement state management.
- Fetch the set of users only once. No network call when we move between pages.
- Add a button on the details page to mark a user as a favorite.
- On the home page, highlight favorite users with special CSS.
This content originally appeared on DEV Community and was authored by ZeeshanAli-0704
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
ZeeshanAli-0704 | Sciencx (2024-07-14T13:21:05+00:00) React Interview Assignment-user-detail-app. Retrieved from https://www.scien.cx/2024/07/14/react-interview-assignment-user-detail-app/
" » React Interview Assignment-user-detail-app." ZeeshanAli-0704 | Sciencx - Sunday July 14, 2024, https://www.scien.cx/2024/07/14/react-interview-assignment-user-detail-app/
HARVARDZeeshanAli-0704 | Sciencx Sunday July 14, 2024 » React Interview Assignment-user-detail-app., viewed ,<https://www.scien.cx/2024/07/14/react-interview-assignment-user-detail-app/>
VANCOUVERZeeshanAli-0704 | Sciencx - » React Interview Assignment-user-detail-app. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/14/react-interview-assignment-user-detail-app/
CHICAGO" » React Interview Assignment-user-detail-app." ZeeshanAli-0704 | Sciencx - Accessed . https://www.scien.cx/2024/07/14/react-interview-assignment-user-detail-app/
IEEE" » React Interview Assignment-user-detail-app." ZeeshanAli-0704 | Sciencx [Online]. Available: https://www.scien.cx/2024/07/14/react-interview-assignment-user-detail-app/. [Accessed: ]
rf:citation » React Interview Assignment-user-detail-app | ZeeshanAli-0704 | Sciencx | https://www.scien.cx/2024/07/14/react-interview-assignment-user-detail-app/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.