It is like building a puzzle, bring your hot tea and relax.
Published: 2021-11-04 14:07:21

Up until this point in my learning path at Flatiron School I had the feeling that I knew, almost always, where things stood in my projects. During Phase 1 we were working entirely on Javascript and the whole project was just a few pages. Then Phase 2 got a little more complicated when we were introduced to React and its component structure. 

On phase 3 we learnt Ruby and its models and relations between tables and things got a bit harder to handle when building a React front end on top of it. But I still had a good feeling of knowing where things were standing almost from day 2 into the phase's final project. But then phase 4 kicked in.

We went into Rails and amongst many new magical tricks, we were introduced to Authorization and Authentication -not only hard for me to pronounce as a spaniard, but also tricky to understand. Out the sudden our projects went from having a few different pages of code to a rather challenging amount, and things got overwhelming pretty quickly.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxkegwyk50n0s0tnb126.gif)

Troubleshooting your code across different pages is not necessarily anxiety friendly. And what makes things even harder is to try to follow different video tutorials and different StackOverflow threads that use different syntax from different times or legacy code. And it is here where I want to focus my attention.
It is great to watch all those videos and read all those posts, but that doesn't mean copy/pasting their code hoping that it will magically work on your project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/460as0lo8ra9br74mdld.png)

[Larry Tesler](https://www.bbc.com/news/world-us-canada-51567695), the mind behind *cut, copy and paste*, made it very easy for all of us to save time and effort when "getting inspiration" for our projects. But with great power comes great responsibility, and just mindlessly copy and pasting won't get you any closer to the desired end goal of learning to code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuc84yviq7waxpc29uy2.gif)

It very easy to build things very fast by using ctrl+c / ctrl+v, but when things don't work as desired, debugging will be a real pain. When you don't understand what all the pieces in the puzzle are supposed to be doing it is very hard to know why they are not working in their current position. And while you might be able to wing it when you are dealing with a 15 piece puzzle, you certainly won't when projects get bigger and bigger.


When I started building ePunch, my Phase 4 Project, I began jumping from the course materials to YouTube videos to StackOverflow posts to Dev.to articles. The access to knowledge was amazing and I was learning a bit from here and a bit from there, creating a mental collage of how things should work. I started doing some thoughtful ctrl+c/ctrl+v and gradually the foundation of my app was taking shape.

It was all working out great, until it wasn't. And things started to fall apart when I got to implement Authentication.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcblg8xk2yi3mwvabi26.jpg)


I wanted to have the option to add more functionality in the future and have the app be used by Coffee Shops and by Customers, so I conceptualized the architecture having two different kind of users: CoffeeShops and Customers. So I decided to start building all my authentication thinking "my user is my coffee_shop", but all the examples I was looking at were using [user_id].


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0fev99bghegyhc8ad5y.jpg)


So with every different video, or article I'd try to adapt their naming convention to mine, but I'd forget if I had called it [user_id], or [shop_id], or [coffee_shop_id] or whathaveyou. I thought I was understanding what was going on thought the build, but apparently I had my concepts all mixed up. And so my naming was all over the place, and made debugging very difficult. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xhqeti47egchuvpvho9.jpeg)

When it was brought up to my attention that, even if my app was seemingly working, under the hood was a bug-bomb waiting to explode. I armed myself with patience and started to learn the concepts from the once source of truth, the documentation.

Don't let this happen to you too, so get yourself a nice cup of tea, try to relax, and read the instructions!


PS: This article should be considered as a "note to self".