Skip to content

Contacts app with search and filter, two settings for data viewing and statistics; React.js, redux, redux-saga, reselect, MUI

Notifications You must be signed in to change notification settings

stacykutyepov/contacts-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Contacts-App:

app-preview

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.

☞ Complete MVP:

Contacts-app

Two settings of data viewing:

  • tabular view
  • tiled view

Contact's list view:

  • user's birthday must be in US format
  • email must be clickable using copy
  • phone must be clickable with copy
  • address must be in the format: / country / street number street name, city, state zip code street number street name, city, state code

Ability to filter data: (Reselect)

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

Data Statistics: (Reselect)

  • collection size
  • number of men, women and indetermitate
  • who is predominant
  • number of contacts for each nationality

More about filter:

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

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.

What I would like to improve in my application:

Mobile version requires adjustments; Error message when returning an error from an API request;

Сообщение к заданию:

Задание заняло выполнить 18 часов. Выполнила пункт 3 и 4.

Я использовала

React, Material UI, Redux для стейт менеджмента, Reselect для фильтра , Redux-saga для асинхронного получения данных.

Выполнила пункты:

Два режима просмотра данных:

  • табличный вид
  • плиточный вид

Отображение списка контактов:

  • день рождения пользователя должен быть в американском формате
  • email должен быть кликабельным с возможностью скопировать
  • телефон должен быть кликабельным с возможностью скопировать
  • адрес должен быть в формате: /страна/ номер улицы название улицы, город, штат индекс номер улицы название улицы, город, штат индекс

Возможность фильтровать данные: (Reselect)

  • по полному имени;
  • по половому признаку;
  • по национальности;

Статистика по данным: (Reselect)

  • размер коллекции
  • кол-во мужчин, женщин и неопределившихся
  • вывести кого больше
  • кол-во контактов по каждой национальности По клику на имя или аватар пользователя есть переход на страницу просмотра данных пользователя При возврате со страницы просмотра на страницу списка контактов, должно быть сохранено и применено ранее выбранное состояние фильтра, сортировки и пагинации.

Подробнее о фильтре: (Reselect)

  • Фильтрация происходит без ручной отправки формы.
  • Очистка фильтра возвращает коллекцию к изначальному состоянию.
  • Фильтруется вся коллекция.

Чтобы я хотела улучшить в своём приложении:

Мобильная версия требует корректировок; Сообщение об ошибке при возвращении ошибки из запроса c API;

About

Contacts app with search and filter, two settings for data viewing and statistics; React.js, redux, redux-saga, reselect, MUI

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published