Contacts App  

React
React-router
Redux
Redux-Reselect
Redux-saga
Material UI
Contacts-app


Contacts App is a contacts management app with statistical analysis.

This App allows you to search and filter contacts using r​andomuser.me API.


☞ COMPLETE MVP:

1. Two settings of data viewing:

  • tabular view;
  • tiled view;

2. Contact's list view:

  • User's birthday was changed to the US format;
  • Email, phome and adress are clickable, with copy to the clipboard feature;
  • Address is formatted: / country / street number street name, city, state zip code street number street name, city, state code;

3. Ability to filter data with multiple values without performance issues:

  • by full name;
  • by gender;
  • by nationality;

User friendly things about filter:

  • Filter happens without the manual form submition;
  • Clearing the filter returns the collection to its original state;
  • The entire collection gets filtered;

4. Statistical Analysis:

  • Analyze the size of the collection;
  • Get number of men, women and indetermitate;
  • Analyze number of contacts for each nationality;

What else is there?

  • By clicking on the user's name or avatar, there is a transition to the page for viewing user data;
  • When returning from the view page to the contact list page, the previously selected filter, sorting and pagination state must be saved and applied.
Contacts-app

⚙ STACK:


  • React for frontend,
  • Material UI as a UI library,
  • Redux for state management,
  • Reselect to implement filter and statistics, avoiding performance issues,
  • Redux-saga for asynchronous store update.