Ctrl+Dlt+Malik

I initially didn't want to use React, I didn't see any point since I already knew Vue3. But React has a ton of community support, and at the time it seemed much more flexible than Vue if you take the time to learn it. Plus, I figured being able to put React on a resume instead of Vue3 (which wasn't talked about as much in the industry at the time), was an appealing prospect. That could easily change in the future of course, but I felt like it just made sense at the time! It's always smart to stay on top of new and emerging technologies. And while I'm still in the process of touching up my portfolio here and there, knowing React has given me a significant advantage in multiple areas. Knowing at least one JavaScript framework these days isn't really an option anymore, its become more a necessity (for the frontend at least).

Technical Challenges & Hurdles Overcome

I'll admit, I was honestly surprised by how much I loved React. React Hooks, easy TypeScript integration, and being able to add community packs with no errors... it was great. It was a lot more setup than a typical Vue project (thanks to Vue's bootstrapper before they released Vite), but if you can get a solid React template set up for yourself it's totally worth the initial hassle.

Numerous backend issues popped up. I’ll try to summarize as quickly as I possibly can on this one. This project was my first forray into backend work, so there were a lot of hiccups.
Challenge 1: Figuring out how to get Express and MongoDB working together, Nodejs's odd but minor syntactical differences from JavaScript, running my Express server and serving my frontend React build at the same time, making all ports work together, it was a lot. I always solved my issue by testing how the different technologies worked together, and seeing if anything had broken at any point. In my final solution I used PM2 to run multiple services on a single Linux based virtual machine, and sometimes it'd all work fine! Other times, everything would break. 90% of the time it was just an issue with how I had NginX configured, as once everything else on my backend was working fine, I just had to be sure that NginX sent the correct requests to the correct /locations. Postman also proved vital in testing both my backend, and the API Gateway proxy I setup. Without Postman, I would've struggled to get anything working period.

Challenge 2: The IGDB API was hard to work with initially, as this was honestly my first time truly working with one. IGDB doesn’t accept any GET requests, you can only query its database with POST requests and by providing fields to filter the items you get in return. It also doesn’t have the proper CORS headers for directly sending a request and receiving data. One of the solutions is to setup your own CORS proxy, and routing through that proxy to the database. This is the solution I used, as I have a “CORS-anywhere” setup deployed on Heroku for searching for games. The official IGDB documentation mentions this solution as well. There are much easier solutions I would opt for nowadays, but at the time, I was happy to have anything working!

What I learned

Lesson 1: I learned when to scrap an idea or a technology, again! This lesson also carries over a bit from my time working on VueChat, and it’s a good thing it did. I initally wanted to include Redux in this project, but ended up removing it. If I didn’t just move away from Redux for this project, there would’ve been a lot more headache for me involved. The amount of boiler plate setup Redux needed was taking too much time for my liking, and with other technologies out there now, whether or not I use Redux for my own personal projects is still up in the air. Regardless, given the small scale of this project, removing Redux to get a quicker output and focus on learning new concepts proved to be much more beneficial for me. Even though I was unable to implement Redux in a timely manner, I still did end up learning both React and TypeScript from this project alone, and will probably continue using them both.

Lesson 2: I learned what goes into receiving data from remote sources, storing that data, etc. Working with a 3rd-party API taught me a lot, and it helped me understand simple ways to receive data from a database and display it on a webpage like I do for different Top 10 lists. Overall, I learned how to control data flow and actually take data from a backend database or service and display it on the frontend.

Lesson 3: Finally, I learned a ton of backend concepts and rules. I created the entirety of the backend by myself. While I’m sure there’s much more complexity that can go into it, I still learned a ton about what goes into setting everything up and connecting frontend to backend. My virtual machine has a MongoDB database, an Express server, and a React build all being served with NginX and a reverse proxy setup. If I need to run my own server in the future, setting up a solid Linux configuration won't be unfamiliar whatsoever.

Closing Thoughts...

Learning multiple technologies at once can be hard and overwhelming. If possible I always reccomend people only start with one at a time. It's definitely possible to learn multiple technologies at once, but it takes a certain mindset when approaching the problem in my experience. I had hit enough walls when learning Vue3 and Firebase that I was able to understand where I should start breaking down the errors I was running into. Knowing how different technologies are interacting with each other is key, and is probably going to be the biggest factor when tackling something that difficult!