Skip to content

This App allows you to track your workouts activity, and to view the weekly chart based on your activity.

Notifications You must be signed in to change notification settings

stacykutyepov/Best-Runner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hello! This is the BestRunner App.

Contacts-app




This App allows you to track your workouts activity, and to view the weekly chart based on your activity.


⚙ STACK.


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;




Contacts-app


☞ Complete MVP:


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 для построения недельного графика с данными;

About

This App allows you to track your workouts activity, and to view the weekly chart based on your activity.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published