My Journey to a Web App Platform | EP.1 Tech Stack
This is an overview of my complete tech stack
TL;DR
Backend: Nodejs along with NestJS framework and prisma
Frontend: Next.js version 14
Database: MySQL databases, Redis
Render Worker: Comprises of Nodejs with NestJS framework, Python Script, and Blender
My platform will be comprised of three essential components
1. Backend: The backbone of the platform, this component serves requests from the frontend.
2. Frontend: This component allows users to interact directly with the platform.
3. Render Worker: This component executes the tasks that users submit.
Backend
I’m thinking about three programming languages for the backend: Java, JavaScript, and Golang. While Golang is attractive because of its performance and popularity, I don’t have much experience with it and might need to devote a lot of time getting used to it. So, I’ve decided to remove Golang from consideration for now.
Considering my goal to develop this platform swiftly, JavaScript seems to be the most suitable option. I have more experience with it and it requires less resources to operate.
For a reliable framework when working on Node.js, i choose NestJS. It smoothly integrates with Prisma, potentially enhancing my backend development experience.
The backend will be built using Node.js and a framework I chose is NestJS. NestJS is a robust, scalable, and maintainable framework that uses modern JavaScript and comes with TypeScript by default. I have solid experience with it, and it aligns well with my skills and requirements.
The reason why I pair it with Prisma is because Prisma is a database toolkit that greatly simplifies database handling in Node.js. It provides a straightforward and efficient way of accessing the database, eliminating the need to write complex SQL queries on my own.
Frontend
As for the frontend, this is an area where I have no experience whatsoever. I am neither versed in UI/UX, nor have I previously worked on the necessary technologies needed to bring frontends to life. This means I’ll have to start from scratch, learning new things and familiarizing myself with completely new concepts and libraries.
Having thought this through, I’ve decided to go for Next.js version 14 for my frontend development. My decision to use Next.js was primarily influenced by its prevailing popularity and also the fact that it would let me dive into React.
For my platform, I intend to have two separate frontends. The first one, a landing website which is optimized for SEO to increase it’s visibility in search engine results, attracting more users. It will serve as the public face of my web app platform providing information about the platform’s features and capabilities, with a focus on improving rankings in search engine results.
The second frontend will be for the platform itself, enabling user interaction with the app, submitting tasks, and receiving results. This will be more dynamic and interactive, with users able to create accounts, submit tasks, monitor their progress, and retrieve their results.
By separating these two, I can ensure that the UI/UX is optimized for each one’s specific purpose, serving both marketing and functional requirements effectively. Also, it can segregate the load between two separate systems which could enhance the overall performance of the web app.
The Next.js framework will be used for both frontends. Its ability to build both static websites and dynamic web apps make it an ideal choice. Since the framework is SEO-friendly, it will greatly aid in achieving a high rank in search engine results for the landing page.
Database
For the database, the decision wasn’t an easy one as there are numerous options available each offering different features and advantages. My requirement was a database that could handle a high load, store vast amounts of data and also be highly scalable.
After much considerations, I decided to go with MySQL. However, to extend the capabilities and not limit myself to just MySQL, I wanted to have MySQL compatible databases. This is when I started to look out for serverless databases. These databases allow for excellent scalability and can be cost-effective in the long run.
Serverless databases such as TiDB or PlanetScale caught my eye primarily because they offer compatibility with MySQL and I will be able to use them for free on my platform or easily swap over to any other database without any hassle or major changes to the existing codebase.
Therefore, my final choice was MySQL-compatible databases with a focus on serverless options for scalability and ease of use. This combination would give me the freedom to scale the database according to the needs of my platform.
Additionally, I decided to incorporate Redis as a caching layer into my tech stack in order to speed up common queries and reduce the load on the MySQL-compatible databases. This combination would provide the best blend of speed, flexibility, and scale for my web app platform.
Render worker
The Render Worker part of my tech stack is largely responsible for executing tasks submitted by users, mainly rendering images or videos. This component is a service that retrieves tasks from the backend, processes them, and does not directly engage with user interfaces.
In constructing my Render Worker, I opted to combine Node.js with the NestJS framework; these function as the foundation on which other technologies operate. Node.js is used primarily to orchestrate the flow of tasks and handle communication between various parts of my stack.
For the specific task of manipulating Blender project scenes, I have elected to use Python scripts. The choice of Python is due to its seamless integration with Blender’s API, which can handle tasks ranging from creating intricate 3D animations to automating simple, repetitive tasks.
To process a task, the Python script will first receive the context about the task from the Node.js worker. Then, it will utilize this context to modify the elements of the Blender project scenes — such as geometry, textures, lighting, animations, and so on. Once the necessary changes to the Blender project have been completed, the script will render the final product and return the result back to the render worker. Through combining these technologies, this Render Worker is poised for efficient and accurate backend processing.
Although this involves a different set of operations, the combination of Node.js, NestJS framework, and Python scripts prove to be incredibly versatile, supporting both 3D and 2D processing. Python is especially notable here, as there are numerous libraries such as OpenCV and PIL that can handle a wide variety of image processing tasks.
