My first Full-Stack application development process

Retro Gaming Atlas Write Up

The Plan

    Being really entrenched in the process of making this project has made me reluctant to make write ups on the process of developing, instead, my time has been stuck in CSS land and component state management rabbit holes. So I've decided to do one big write up at the end on the entirety of the process for making my first legit full stack project. Now that I am over 3 months into developing my Gaming catalog, it has surprised me how in depth making a Full-Stack project is. I have been doing projects and working my way through the Odin Project, and upon doing a static React project way back about 8 months ago, I came across IGDB API (Twitch) that holds a massive video game database for developers. I realized that my surface level knowledge of vanilla fetching with API calls in JavaScript would not be enough, as IGDB requires authenticated REST requests from clients. This calls for knowledge of NodeJS backend. I still needed to learn the basics of backend having not yet gone through the section of the course. I had a vision for my idea back then, so I jotted my ideas down and proceeded to work through NodeJS section making numerous backend projects. My vision for the project was a Retro Gaming discovery tool, with information on each game, giving a retro feel with a modern design, available cross platform (desktop, mobile).

The Stack and Setup

   For RetroGamingAtlas - PERN is the stack that I decided to use as implicated via Odin Project which serves to be the MVC structure. Additionally, the setup uses a mono-repo, with a front-end and backend directory, using Express NodeJS to be able to receive requests from client side (React) as the Controller part of MVC. Over the past months I have updated my ready made full-stack template so my setup is easy to start, having Express and all my directories and dependencies ready For development, with just a couple simple install commands.

    Authentication is extremely important for security, the main way of going about authenticating requests is JWTs for web. Essentially, JWTs are parsed data sent as hashed and secured tokens, used to grant user access to backend routes, for authenticated Users. Passport strategies have many different ways to authenticate users, simplifying the authorization login/signup process. I am still looking to implement OAuth for Ebay API, Google and Facebook post production, so Users can sign into their own Ebay accounts, and signup easily with Google/Facebook through my own app.

    With my scaffolding setup for my project, and me testing my requests to IGDB in Postman, I proceeded to start setting up to populate Twitch's game data. This is where something like a LLM tool shines (although rigorous oversight/adjustments may be needed), as it helped me setup some of my mapping functions and Prisma schema starters, so that I can populate my own database with all the 25k games. API services normally want you to populate their data to limit requests to their end, but I also wanted to do this form a performance standpoint to reduce loading times for user experience.

    Upon actually setting up my request functions, I needed to make sure to avoid the fetch waterfall problem in NodeJS, making sure to Promise.all async requests and adding some delays since I was making multiple requests for the Game details, screenshots, developers, genres, ect. I optimized the seeding process to the best of my ability, and unfortunately had to wait days to get all the games onto my db, since there were multiple requests for each game for 25k games. During this time I decided to start envisioning my design and plan for how I would go about design. After considering tailwind, I decided to stick with vanilla module CSS/Inline, since I was already dealing with so many new tools and methods already. I also made my basic starter design in Figma envisioning the layout.

The Development

    The filtering for all the categories and working on the logic between front-end and backend served as a pretty big ordeal, mainly from the complexity of having to work between the Model (Prisma) adjusting dependencies and schema, and controllers with middleware normalizing and combining data, and React view side having state management from dynamic filtering changes. This required me to be meticulous on details and tracking bugs. This project has really honed my debugging skills, working with all my resources in Dev Tools and JavaScript step debugging in VScode, there's been maybe close to 100 hours of me tracking bugs on this project, something that requires persistence and deep breaths!

    Upon all the data being populated, React was something I was rusty with so took some time to adjust back into it, from my level of where I am at with React, I enjoy the hierarchical nature of the components, where lifting state is the solution many times, where child components can handle their own logic. Keeping my routes end points clean, and depending on REST's protocol for using the HTTP method for describing routes paths, has helped me keep everything more simplified. I spent a lot of time making sure to keep performance top notch, so a lot of adjusting properties of games, having preloaded loader containers, and implementing some lazy loading.

    Implementing Speedrun/Ebay data wasn't super hard as I only did readonly request only requiring a access token. Using the game's title string property or slug (normalized name for outside API's), I could use it for URI endpoints for requests, effectively getting a games Speedrun.com data or Ebay listings, prioritizing authentic and Buy Now listings for more accurate price data. For the Youtube/Twitch videos, IGDB included video ID codes so I could embed my custom video components.

    MVP and User features is something I want to continue to implement if I find I get any users on the platform, for now Users can add to Save/Completed/In Progress along with their completed stats on Dashboard. Real time messaging, comments, notes, etc. is something I hope to implement down the line, but I aimed for this project to be used for Retro Gaming collectors/Hobbyists and also Speedrunners. Thankfully with my design, much of my code is modular and has Dependency Injection, so expanding features should work out in my favor.

I found myself tinkering with CSS and containers as the most time consuming, I simply have always found myself struggling with CSS the most as it is not necessarily systematically logical, the cascading nature of CSS results in selectors and elements depending on each other extensively, and unless you are super experienced and disciplined with your selectors, complexity can get out of hand quick. Polishing takes real effort and the human eye. I feel after numerous projects this project expresses that I am developing a taste and an eye for design, although getting there serves as an ordeal, although I am aware I have a lot of holes in my CSS logic (there's just so much!).

    All in all, this journey of developing this project has served as a genuine expression of passion and the honed expertise in development, as I've found myself using my own product in my own pass time, exploring one of my passions which is gaming. I think this is a good sign where maybe some other users also enjoy using it as well hopefully with the UI being intuitive with minimal bugs. I've learned that preparation/testing and planning skills will be crucial to keep developing if I work with clients or other developers in the future because it results in less headaches down the line. I have found myself a few times having to refactor or realizing I should've populated my data in a certain way, at one point even having to strip all my data and starting over. These were pain points, but they were learning lessons.