Building a Javascript Application

For a school project I was tasked with building a Single Page Application using Ruby on Rails as my backend. Here’s the process I went though:

1 — Brainstorm & General Outline

Several projects ago I had wanted to build a weightlifting tracker that you could use to…track your lifts. I switched early in the project though, because too many problems arose and I decided it would be better to start with something easier. The main issue I faced was data management; every exercise would have a name and date, and would be tied to multiple sets which each had their own reps and weight attribute. Though that may not sound like a lot, dealing with all those sets and numbers was overwhelming at the time. Obviously, mentioning it here implies that I built it for this project. BEHOLD:

Image for post

Not too shabby, I hope. There are some additional features that I’ll discuss later, but the general outline was the same one I had several months ago: An app that would allow you to keep track of your weightlifting sessions. I also wanted the sets and exercise submit form to be hidden until you pressed on their respective buttons.

2.1 — Building The App (Workouts)

Initially, I planned on this being the whole app. But after building it, I saw that my screen looked empty. Too much empty space on the right. The app I had envisioned would look fine on an iPhone, but I hadn’t thought too much about how it would look on the much wider screen of a computer. So I had a mid-project crisis, and increased the scope of the project. I would add a calendar that tracked your workouts on the bottom right, and a video section on the top right.

2.2 — Building The App (Calendar)

One of the reasons I added a calendar section was because I thought it might be a fun challenge, and for me, at least, it was. I had to make sure the calendar started on the right day of the week, that it could handle between 4 rows (a February that started on Sunday) and 6 rows (longer months that start towards the end of the week). I also had to figure out how to fill the empty spaces before the first day of the month and after the last. Then I had to tie my calendar into the initial fetch request, so that the proper days were highlighted.

2.3 — Building The App (Videos)

This was the easiest section. Links to videos on the left, display area on the right. I focused mostly on differentiating the link buttons from the lift buttons. Different colors, different shape.

And then all that was left to do was clean up and refactor the code, and play around a little with the CSS.

3 — Lessons Learned

Create a detailed visual outline of your app — I know to all you pros this is obvious, but I’m still learning, so bear with me. When I started I created an outline of the program and its functions, but my visual one was lacking. If I had paid attention to creating a good one early on, I could have saved a lot of grief while actually coding the darn thing.

Make a Roadmap — When I first started, I was overwhelmed by the amount of things I had and could do. When I took the time to layout what I had to do and the order in which I was going to do it, it made it much easier to take it one step at a time.

Never (or always) as someone to break your app — They will.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store