MTG Build Your Own Deck - Coding Experiences v1.0
Tags: codenewbie, programming
Published: 2021-05-10 13:18:39

A couple of weeks back I started working on my JS project from Module-1 at Flatiron School. The ask was to build a single page app that made a fetch request from a public API and then offered some options to do with that data.

I dug deep into Github's repo of public APIs and after a couple of unsuccessful attempts to get inspired by what I was seeing I run into Magic The Gathering API. What a throwback!! The data seemed well structured, it was time to have fun.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfarg2mq4k3st77j4087.png)


As a newbie I've heard many times already how you should plan and sketch before you start coding, but I was so excited to try the API and check if I was able to pull some data from it that I went ahead and started coding right away.

Sure, I made a plan of action, I drew on a piece of paper how things should look like for my MVP, but soon after I had all those deliverables ready I gave myself permission to try things out. The app was working, but the code looked pretty nasty. The event listeners had their functions declared inside them and were doing similar things that other event listeners were doing already. There wasn't a clear way of knowing what functions I had defined through the code and how to reuse them... The time had come for some organization, and it is here, when I was knees deep into the ugly code where I discover I was having fun tidying up.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i34e9vnk5vdq3s6dukv6.png)


Not only I was enjoying seeing clean code I was also understanding better how my app worked and saw more clearly how I could improve it and make it more efficient.

What once before had been an event listener that allowed you to click in one card to select and deselect it, now it had become an event listener that trigger an external function that did that. And that function could be called by another event listener too!! So obvious, so basic, but at the same time so easy to forget when you jump at your code without a clear plan in mind like a monkey who has been given a bucket full of bananas. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksg55rlub6acbmeyl3go.png)


Moving forward I'd like to learn how to be more organized while coding. Not only the formatting of the code, but the strategy around coding. I am a very visual person and I need to see where I want to get to in order to get there. I should't let my anxiety to get to places fast stay on the way of efficiency.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdqdqr9n8hbnd23rz5a5.png)


At this point in time my project is due and I feel confident I was able to build something that works, and it can be of some interest for MTG nostalgic or even current players.
But this project doesn't end here with me submitting it for review. There are still a lot of features I want to implement, and several bugs I'd need to fix to make this app go from something that works to something that is actually enjoyable to use. It also needs some CSS love that I have been depriving it from.