Friends App

Create a tiny social friends' search page with users cards, search, sorting and filtering of them by age, name or whatever you want with Random User API :)

Example

This is an example. You should style your application like you want.

Make it personal. Make it beautiful. Make it perfect and then be proud for what you did.

Complete the user stories below.

As a user, I would like to

• see cards list of users on the page, cards may be pretty styled with user photo, name, age, phone number, maybe with some another user information which you would to see in user info card.
• searching by typing name in search input and see immediately filtering on the page
• sorting cards by name/age in A-Z/Z-A ways
• filtering friends by age, by name, whatever you want else options
• see fancy icons and cool design with shadows, gradients, yellow font on the blue background, etc. Usage of template absolutely acceptable

If you feel that you can do a better job, you can

Note, that this is an additional part of the task. Also you can implement anything from the list below.

Be like a Durov and

• add pagination to scrolling
• sort not only by name and age, but also by date of registration
• filter by location and email
• make good responsive/fluid/elastic/whatever design which will work for mobiles
• use async/awaits for handling async actions

Be like a Zuckerberg and

• add support of address bar which means, that user must see a state of filters and sortings in URL
• using your OOP knowledge, split your application to different parts, like: FriendsList, FiltersContainer, etc.
• with help of ES6 modules build website based on frontend components

You can

• use all Array.methods which you know :)
• try to figure out with async data encapsulation in request/response. Try callbacks' logic in action
• understand difference between synchronous and asynchronous network requests
• get know params & queries in action
• use fetch and/or XMLHttpRequest. But NOT jQuery. Bad jQuery, bad! No ones like jQuery! ¯\_(ツ)_/¯
• understand pros & cons of the immutable data fundamentals on example of copies of arrays
• try form' key/mouse events, manage them, enable and disable them

Stuff which will help you

• We think that you will need to use promises for this task ;)
• Основы XMLHttpRequest - you can use XMLHttpRequest for sending requests to webserver; Method Fetch замена XHR - you can use fetch as better tool for sending requests.
• Randomuser api with awesome simple examples and docs - you can use one of this API for getting data for your website;
• URL API - you can use this for working with URL;
• Take a look on Array methods on learn.javascript.ru and on MDN
• Manipulating the browser history - you must know how to work with browser history.

When you're done with your challenge push your code to GitHub repo and publish it using GitHub Pages.

When complete do the following:

1. You will require code review for this task:
   • For Frontend 2021 course students: please, follow these instructions
   • For p2p course students: please, follow these instructions
2. Great job! Go ahead and share your progress with others – post a message in the course channel: Friends App — #done (or Friends App — #p2p_done if you are p2p course student) and add the link to your repo. This step is important, as it helps mentors to track your progress!
3. You have completed the last tasks section of offline course stage. We shall appreciate your feedback on this section especially if you're doing this course from Ukraine. Please, grant us 10-15 minutes of your time and complete this feedback form.

Done?

Congratulations! 🎉

• Have you finished all mandatory tasks?
• Are practical tasks get reviewed and PRs are merged into frontend-2021-homeworks repo master?

You have finished Stage 0 of the course!

Go ahead and post a celebration sticker or dancing gif in the course channel.

... and a tiny thing to do yet. List yourself among course Stage 0 finishers.

⤴️ Back to Contents