caseconverter.pro is built on the newest and shiny technologies in the JavaScript world but deployed with really basic tools. Read on to get to know how to do a simple MVP which actually also is quite maintainable.

The base of this whole tool is Next.js and React. React is the UI application tool which is most popular. There are multiple reasons why it is so popular. One of them is certainly that it changed how developers structure their UI. Components are a big part of this and support through the community is huge. You can build components and share them within your application to make the look consistent. There are endless possibilities with the component system and Next.js is making it work easily on the server-side too. React is a JavaScript framework, so naturally it just works on the client. The problem with that is that it will cause Search Engine Optimization (SEO) issues. Googlebot and other crawlers are bad at evaluating client-side rendered content. That is the reason why we are doing server-side rendering with Next.js where possible. Next.js simplicity is playing really into our cards here too, since that is the reason why we could launch this project so fast.

In Next.js, we also use TypeScript in most of the cases. It is the first time we ever worked with TypeScript but using it is a pleasure. It gives us safety on how a function is used. For case conversions, this also makes sense so we can validate that strings are actually passed. It unfolds the code a lot and gives a clear interface to everyone using the functionalities. For databases we use PostgreSQL. We decided on a relational database since that is what we are used to. PostgreSQL supports a lot of data types and is quite flexible and a super safe choice to use. In combination with Sequelize, we had a lot of success in managing our database schema. It is not complex but it just works and that is what is important to release a product.

The last two technologies in our JavaScript stack are Express.js and Prettier. Express.js is used for our APIs. It is the gold standard in the JavaScript ecosystem with a lot of support for custom plugins and more. It is quite predictable but still unopinionated. That is the reason you have a lot of flexibility using the framework. In the first weeks in this project, for example, we had one big server.js file which was used for all of our APIs. Then, when it got too big, we decided to split the file up into multiple files to structure our APIs more consistent. Prettier is used for automatic code formatting. It is the state of the art tool in the autoformatting world of code. It reduces the time we have to format our code, so that is a quick win.

For payments, we decided to use Stripe. Stripe is probably the most popular solution to enable a subscription within your service. It is easy to use (except webhooks) and it does its job really well. You can really feel Stripe is enabling smaller software projects to use the payments system since the documentation is top-notch and the Software Development Kits (SDKs) are really nice.

For the deployment, we used DigitalOcean basically. We set up our instance with the $10 option and just created all of the infrastructure ourselves. We just needed to do a basic server setup, setting up Node.js, setting up PostgreSQL and cloning the repository of caseconverter.pro from GitHub to the server and start the service. Everything was working perfectly. We are restarting our service with PM2 to just simply host a solution. With this setup, we are running quite well and never had problems so far.

Overall, We love our tech stack. It is so amazing to build new features within this application and it just feels natural. Of course, we are TypeScript/JavaScript developers and love this environment but the unopinionated and free atmosphere in the code base is really nice to have.