This App allows you to track your workouts activity, and to view the weekly chart based on your activity.
React.js to build the front-end;
Redux for state managemet;
React-router for routing;
Redux-reselect to implement complex filter to memoize expensive calculations;
Redux-persist to save data in localStorage;
Material UI for Forms and Input Fields;
Styled Components to keep the concerns of styling and element architecture separated and make components more readable.
Canvas.js to make the weekly chart with the data;
1. Add a new workout / Edit the existing one:
by distance in km;
by date;
by type (walk/run/bike/ski)
include a comment;
3. Delete the existing workout;
4. Filter Workouts:
by date: oldest-newest, newest-oldest;
by type: bike/walk/run/ski;
by km: max-min, min-max
1. Добавьте новую тренировку или отредактируйте существующую:
- по расстоянию в км;
- по дате;
- по типу (прогулка / бег / велосипед / лыжи)
- добавить комментарий;
3. Удалите существующую тренировку;
4. Фильтр тренировок:
- по дате: старая-новая, новая-старая;
- по типу: велосипед / прогулка / бег / лыжи;
- по км: макс-мин, мин-макс
- React.js для создания интерфейса;
- Redux для управления состоянием приложения;
- React-router для маршрутизации;
- Reselect для реализации фильтра, и запоминания дорогостоящих вычислений;
- Redux-persist для сохранения данных в localStorage;
- Material UI для форм и полей ввода и UI компонентов; *Не использовала Formik/React-hook-form, потому что не было смысла в валидация форм.
- Styled-components, чтобы отделить стили и архитектуру элементов и сделать компоненты удобочитаемыми.
- Canvas.js для построения недельного графика с данными;