Ruby on Rails Project — My Workout Tracker

For Phase 4 in Flatiron School, I needed to create a full-stack project with a React frontend and a Rails backend. For this project, I’ve decided to use React Hooks and styled-components for my CSS.

I love to work out and I actually love tracking it on a daily basis. I’ve developed a habit of weighing myself everyday so I figured I would create an app where I can do both (tracking weight and workouts), but not too much like those other fitness apps these days. I just wanted a simple tracker to do exactly those things. These days, the fitness apps out there so a bit TOO extensive so I end up not keeping up because there are just too many things to log, such as food, recipes, workouts, weight, water intake, etc. Sometimes simple is better.

workout tracker homepage

So here we go! This is my home page for my workout-tracker-app. This one was fun because we utilized authentication/authorization in order for users to stay logged in. I’ve also utilized a password protection, using password_digest instead of just password in my migration tables for User. This keeps passwords from being displayed and instead creates an encrypted password.

The process I followed for authentication was via bcrypt Ruby gem. This gives you the has_secure_password method that encrypts passwords by hashing the passwords and generating password_digest.

1. Install the gem.

gem install bcrypt

2. Include bcrypt gem in your Gemfile.

# ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'

There are actually newer versions of this gem and probably going to keep updating, but this is the version I used. I believe it goes to 3.1.16 according to the RubyGems.

3. Add password_digest column in your users table (instead of password)

create_table "users", force: :cascade do |t|
  t.string "name"
  t.string "password_digest"
  t.datetime "created_at", precision: 6, null: false
  t.datetime "updated_at", precision: 6, null: false
end

Obviously, it will look different if you had more columns but this is how I have my users table.

As you can see, it doesn’t say password and instead says password_digest

4. Add has_secure_password method to your User model file.

class User < ApplicationRecord
  has_secure_password
end

As you can see my User model includes validations and my relationships, but at the very top I added has_secure_password .

I created those password requirements, using RegEx, in my validations so that when you type in incorrect inputs, it’ll display those errors when trying to sign up.

Once you correctly signed into the app following the sign-in requirements, you’ll see the UserHomePage, displaying the NavBar, LogoText, and WorkoutsList. I utilized styled-components to style each component, which was fairly new to me so it took some reading/researching to figure it out, but I’ve found it fun and easier to use, having experience and fun with CSS before.

After logging workouts, you can edit each workout, and add an exercise to each workout as shown above. I am still deciding what looks nicer and which functionality I can edit or add to this app later on. I’ll take suggestions~

Thank you~