The process of creating a full-stack app with TypeScript

oof2win2

oof2win2

Posted on October 22, 2021

The process of creating a full-stack app with TypeScript

What is this about?

In the past few months, I have worked on my currently favorite project, FAGC. I have created and contributed to other things (notably AwF-Bot). The experience that I have gained over this time was new, as I learnt how to use TypeScript, played a bit with Deno, and even made my own npm package!

Project Backstory

The project itself is made for the videogame Factorio, which is a game where you build factories with an end goal to launch a rocket into space. Since there is multiplayer, there will be griefers, like in other videogames. The project itself is meant to make this easier to deal with, as it creates a banlist that can be shared between any amount of servers and can be filtered through with specifications of broken rules and who you want to trust.

The Beginnings

At the start of my journey, I wanted to add extra content to an existing repo that did a similar thing, but lacked some features that I wanted. Since this was written with koa, sql and I had no experience with that, I decided that I would create my own backend with express and mongodb, since express had a low learning curve and I already knew how to use mongoose (a JS wrapper for mongodb) from AwF-Bot, which I worked on before.

It was a nice time, I was creating CRUD methods, learning about API key authentication (since I didn't know how to and didn't want to implement OAuth, such as from Discord). There are some peculiar things such as adding transpiling the default MongoDB ObjectID to something much more readable, which was actually pretty smart (in my opinion), as I take the first few digits, which are random, and then the incrementing number, put them together, and get them from hex to a string (the code for this is here).

Whilst making the backend, I was also working on a Discord bot that would accompany it, fagc-discord-bot - it seems that I am not very good at naming things. The bot was painful to develop, as I was using node-fetch at the time, remembering the routes and parameters, or finding them out from the backend's source code.

The NPM package

After realizing that it was terrible to work with at that time, I decided that it would be much more pleasant to use something like TypeORM, but for my backend. So I created another project, fagc-api-wrapper. This was the first moment that I started to play with TypeScript, which was a bit painful to learn, but I eventually pushed through. It made the development experience of the Discord bot much easier, as everything was typed and I knew what was what. It became extra useful when I started working on other bots that used the same backend, as they performed the same or similar fetches. This made me love the language.

The Great Migration and Testing

After experiencing what TypeScript was and how powerful it made code, I decided that it was time to migrate the backend to it too. This was less fun to do, as I was just moving old code to new, better to work with code. It was completely worth it though, as now, I am able to code faster and make less mistakes such as mis-spelling variable names and other types of errors that TypeScript is able to detect.

Testing is also a large part of the development for any app that is meant to scale at all. For this reason, I have already implemented tests with mocha for the API wrapper. I haven't however done them properly, as it requires the backend to complete the tests - it can't be tested alone, so it makes it extremely difficult to run in CI, as it requires the backend to already have the changes that you are developing against on it's master branch, which is error-prone, as changes on the backend can be faulty and you even haven't ran your tests. For this reason, I am in the process of implementing tests with Jest on the backend and will be making the tests on the wrapper work even without an API to connect to by simulating the output of fetches according to what the backend should do.

The Result

The project itself is not finished yet; it has some things that need to be polished, and other things that I want to add (not necessarily before launch, but nevertheless I can do so now), such as the forementioned improvements in testing; however, I feel successful that I put the project together. In my opinion, this has been quite the learning experience. I learnt about the importance of tests, the user experience and the developer experience, too. I would highly reccomend you to do a project of your own of this scale, as it can be very enjoyable if you like what you are doing.

- oof2win2

πŸ’– πŸ’ͺ πŸ™… 🚩
oof2win2
oof2win2

Posted on October 22, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related