Address Book App
This is a fictional address book app, where you can search for users addresses and personal information. The app should display a list of users for clients to browse and get personal information for a selected user.
Home page (browse with search)
The page should be located on the root url
/. Display the users in a grid. Each user has : a
When a visitor clicks on the specific user in the row (can also be a button or an icon in a row), the modal with additional info should open. Each detail modal should have : a ‘location.street’ field, ‘location.city’ field, ‘location.state’ field, ‘location.postcode’ field, ‘phone’ field, ‘cell’ field, modal should be closable so that visitor can browse/search on.
Display user search on top of the app. Search field should be case-insensitive and should filter the results by
name.first + name.last. When the user scrolls down, the search should follow the screen so that it is always visible. Search should filter all visible users and show only those which match the search string.
Please read the documentation on the https://randomuser.me, and get users data from there.
On different URLs, for example,
/settings, we should have a settings page. Here the visitor can set, from which nationalities users are fetched for browsing/searching.
Possible choices should be: CH, ES, FR, GB. There should be a button, link or something implemented so that visitors can access the settings page as well go back to the search/browse page. Settings should affect the home page and fetch the users based on their selected nationality.
Settings should be affected without page reloading.
- Understanding of client requirements and communication.
- Problem solving.
- Understanding AntD and Design Tokens.
- You are required to design a custom hook that manages infinite scrolling. This hook should be able to detect the last element on the screen and update the data accordingly. You should further design a custom hook that manages all external http API calls.
- It is desirable that you do at least 1 unit test for 1 component you used.
- Use of Gitflow
- Use Webpack to create the react application instead of create-react-app.
- Follow airbnb react style guidelines.
- Use error boundaries for stability and error reporting.
- Use Ant Design and Design Tokens.
- Use design tokens in such way that modefying a single token should reflect changes across the application.
Nice to have:
- Code splitting.
- Use of selectors for computed properties.
- Providing light and dark mode option.