I decided to build an exercise tracker. Users could input their workouts, along with type of workout, date and duration. They could view these workouts on an index page. They could also input their plans. Plans have a goal (number of workouts to complete) as well as a due date and a name. I decided to start with these and later add users and also incorporate weekly or monthly stats about their logged workouts.
I decided on this project because it sounds like an idea that I could make as simple as possible at first, while also having the opportunity to expand this project to be more complicated later. At the beginning I focused on simply building create and read functionality and focusing on getting the basics of react and redux right.
As for my Rails API backend I started with a simple workout model and a plans model. The API setup was simple using rails scaffolding.
Then it was time to move onto building the frontend. I used create-react-app and installed dependencies for react-redux, redux, redux-thunk and react-router-dom.
React / redux setup
Starting out I set up redux from the beginning. In index.js I created a store passing in the rootReducer and devtools. I used an extension for devtools. I also rendered my app component to the DOM using the ‘root’ id from the html file. Here’s the initial setup in index.js
Reducers
createStore method can only take in one reducer. So the solution is to combine reducers with redux method combineReducers into a rootReducer and pass that in.
Fetching & Creating
In my actions folder I created actions for fetching both plans and workouts from my api backend, as well as creating these instances.
Listing and Forms on the frontend
User should be able to create a workout and create a workout plan. This is the form structure I used for both workouts and plans.
The frontend will also list the instances by iterating over the information received from the backend as seen in my workouts list component.
Passing these components into their respective containers and setting up routing where each container would be its own page, I now had a simple application where users can create and view workouts and plans.
Next steps
Next I’m working on connecting these models, so that when I user creates a workout they can also choose to count it towards their plan. The list of plans should then show some information about the progress towards completing the goal. Initially I think this will be something like “12/50 workouts completed”. Eventually I want to include a graphic, like a progress bar.
