Choosing the right tools

Our journey with programming TipXMR is a continuous learning progress. When we started in September of 2020 @hundehausen and myself (alexanarcho) knew little about creating a big project like TipXMR. After all, it is not simply a self-hosted one user type of thing, instead it aims to be a service for random users to sign up with.

In programming there is not one-size-fits-all solution. One needs to choose the right tools for the right job.

If you have followed our odysee, it may not surprise you that we are changing some components of the tech stack yet again.

More specifically, we are swapping out 4 tools/libraries to make our work easier and increase the quality of the product.

The tech stack will now look like this:

  1. TypeScript instead of JavaScript
  2. Redux instead of Recoil
  3. Antd instead of TailwindCSS
  4. PostgreSQL instead of CouchDB

What remains is ReactJS - we are still making a ReactApp!

TypeScript

For all those that are already familiar with the language of the web, JavaScript, but not aware of TypeScript - you should really check it out. It might just blow your mind.

TypeScript is a superset of JavaScript developed by Microsoft. This means that all valid JavaScript code is also valid TypeScript code. Files end with a .ts instead of .js. It also means that we can gradually migrate the codebase from JavaScript to TypeScript.

What’s the benefit?

TypeScript makes the live of a developer easier. Basically you can specify the type of variables or the structure of objects and then the IDE warns you in real time if you are creating errors. In basic JavaScript these errors are only displayed when running the code and a pain to solve.

Especially in large projects, just like TipXMR, this is a huge boon. We are able to code faster and with less bugs! The verbosity of the code also increases efficiency when working in a team. All in all the codebase will become more readable and easier to pick up for other developers.

Redux

Redux is a well-established State Management Framework. The development process is aided by the Redux Dev Tool, which again increases efficiency - especially in combination with TypeScript.

What’s the benefit?

Recoil has the disadvantage for us of being fairly new and some features may be changed in the framework. We want to avoid problems down the line and want to build on the battle-tested and scalable alternative: Redux.

What we have done until now was kind of implementing our own Redux within Recoil. So the switch should not be too much of an effort, but well worth it anyhow.

Antd

When we started, we used TailwindCSS, because that is what I was familiar with. However, since TailwindCSS is so customizable we found ourselves spending a lot of time building basic components like buttons.

What’s the benefit?

Antd hands us a flushed out UI-set out of the box. This means less time to reinvent the wheel and more time to focus on what is actually important.

It gives us standardized components and nice eye-candy like loading indicators and icons. So in addition to saving time we are less prone to silly bugs.

PostgreSQL

CouchDB is going to be replaced by PostgreSQL. One of the main reasons is that a relational database is better suited for our purposes. We choose a well-established database once again, with exactly the kinds of features we need.

Also CouchDB is lacking in authorization features, and we are not keen on implementing them ourselves (again a possible source of errors and security vulnerability).

What’s the benefit?

We have multiple layers of data that need to be carefully handled. For example, we do not want to expose information about the streamers account details to the viewers. A relational database is perfect for this use-case, for we have a fairly complex datamodel with many relations between the individual datasets.

When TipXMR?

We do not want to make any promises as to when we are ready to release. However, with this blog post, we want to keep you good folks of Monero Community informed. We are working on TipXMR in our free-time and want to deliver a product that will age well.

First milestone reached!

With this post we also want to trigger our first milestone payout. It has been quite some time that we actually have reached it. For anybody that is interested programming a Monero WebAssembly based WebApp with React, we have working code with the necessary setup in webpack.

Second milestone reached?

On this note we want to engage the Monero community in a discussion as to whether or not we have completed the second milestone. As the project stands today we have a non-custodial Monero Wallet working in the browser, backend code with socket.io and a semi-finished frontend with TailwindCSS.

While I certainly welcome any criticism that we have not fulfilled the milestone as specified in the CCS, I would also like to mention that these kind of projects change over time. Especially for us novice developers it was hard to estimate the workload when we wrote the original CCS proposal. It has now been half a year of us working on TipXMR without any payout from the CCS and a little financial boost is sure to boost our motivation.

Let’s discuss this point over on Reddit!

Closing words

I hope our little report gave you a clear update on TipXMR. To summarize, the change in techstack is definitely a step forward and sets us on the road to finish the project as quickly as possible.

We also hope to lay the groundwork for any other web developers that come along and want to do something with a Monero WASM wallet and realize another of the many possible use cases. With popular tools, picking up the framework should be easy enough.