Best Runner  

React
React-router
Redux
Redux-Reselect
styled-components
Material UI
Canvas.js
Contacts-app



Best Runner is a workout tracking app

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


☞ Complete MVP:

1. CRUD operations on a workout:

  • Add and Edit a workout based on:

    • distance in km;
    • date;
    • type (walk/run/bike/ski);
    • ability to include a comment;

  • Delete workout completely

2. Memoized Filter By Multiple Values:

  • by date: oldest-newest, newest-oldest;
  • by type: bike/walk/run/ski;
  • by km: max-min, min-max;

3. Weekly distance chart with Canvas.js

  • effectively display weekly chart based on available data;


⚙ 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