How I made devPlays

Recently I built a full stack MERN application called devPlays and this blog is going to be all about my experience in building it.

Starting with the idea and the thought behind it; nothing very serious. I just saw a lot of people around me who were into tech, were building a sort of a video library in order to get comfortable with the MERN stack. I anyhow wanted to dive into making full-stack apps, since I had made a couple of tiny apps only on React js, so in order to move one step ahead, I decided to make this app.

After deciding, naturally, I went through the code of a few other people on GitHub and tried to understand the basic tech they used by watching YouTube tutorials and just seeing the vast codebase, I was overwhelmed in no time.

I procrastinated a lot, even to try to understand and read more about it. I have a very solid reason for that though: In my mind, I had this picture, that the next project I make, should have really good structure and perfectly written code and all that jazz. I had the structure in front of my eyes but I couldn’t figure out how to go about it and what’s the “right process”. So, in all this, I simply delayed the whole thing for a while, and it kept on taking a lot of space in my brain of ‘having to make it’ but not really taking any action.

It was the time of the new year, I was at my Didi's place in Pune, and out of nowhere, (actually from somewhere in the brain, but I can’t really spot it), I had this urge to just make it. I then decided, chuck the whole perfectionist bullshit, let me start at least, I will get a lot of time to make more “perfect” projects.

That’s how I took the first step. I had actually already started it way back with writing some backend code, but since I had no real understanding of it, I couldn’t take it further. So, I started from that place itself. Tried to read/watch more about it and managed to set up the basic server and made simple API routes. That was like a major barrier which I crossed and then on, it was much smoother.

I did not give a lot of thought about what all features I was going to add or how my code structure would be, therefore added a LOT OF BAD CODE. I was unaware completely and therefore messed up the whole “product managing” part of the process, but I didn’t really care as I wanted to focus more on building the full-stack app.

So after making the routes for most of my basic CRUD operations, I moved to make the front end for it. I used React of course and vanilla CSS for the whole thing as I was comfortable with it (Rather feared using anything else because I was not sure). I spent a lot of time on the front end (more like, half the time spent testing the APIs just to make sure there is some problem with the front end itself).

Adding vanilla CSS is a pain especially when you do not follow good practices. No CSS variables, no proper class names, no reusable code etc. So I suffered my share in that domain but somehow managed to make it responsive and decent looking.

Also, I did not use redux and used context itself because it wasn’t a huge app, but still implementing redux would have helped a lot.

Weird things which I’m glad I came across:

1. Infinite network calls because I used useEffect in an incorrect manner.

2. Getting a lot of unwanted data from the db, just because the structure was not appropriate.

3. How I need to ‘parse’ the things which I get from localStorage.

4. Bunch of other things which I’m failing to recollect.

Finally, I did manage to make the app work the way I wanted it to. Thankfully, the Heroku deployment process isn’t hard at all, so deploying the thing was quicker although there were a few CORS issues after that, but they were resolved after a few rounds of googling.

This is how it turned out finally: https://devplays-shub78910.herokuapp.com

Throughout, I basically played, tried out a bunch of things; a large trial error game. Of course, I did learn a lot, which is why I am even writing this blog in the first place.

So, TL;DR would be to just start and not wait for the ‘right time’.

Thank you for reading, Cheers!