Software Architecture: A Case Study

Ivan Taftazani
Electronic Logbook
Published in
3 min readMay 24, 2021

In designing a product or a service, there is a certain important step that we usually do in the beginning: designing the basis. As an engineer, this step should be familiar, as any kind of product requires some sort of structure for them to work as intended. For us software engineers, this basis/structure includes the Software Architecture.

I am currently engaged in a college project, developing a certain application for University of Indonesia Medical School (FKUI) called Electronic Logbook. In this article, I will dive into the architecture of the project and hopefully, it will serve as a good reference.

Frameworks

First of all, let’s talk about the frameworks for our project. Starting with the programming language, we use TypeScript in creating the application. We use TypeScript mostly because it’s a legacy from the previous developer team. But, TypeScript has also proven convenient mainly due to our team’s familiarity with JavaScript. Certain properties like its Static Typing is also a welcomed feature. We make use of yarn as the package manager.

Backend

We are using NestJS for our backend framework, PostgreSQL for the database. The backend architecture is a three-layered architecture (four if we include the database), illustrated below.

Backend Architecture

Requests from frontend goes through the middleware before being processed by the controllers. The middleware here includes authentication, data validation, etc. Controller processes the requests, and the service layer interacts with the database.

Frontend

We are using ReactJS for our frontend framework. The frontend architecture is also a four-layered architecture, illustrated below.

Frontend Architecture

The page layer mainly contains the visual parts of our application, the parts which the users interact with. The logic behind what each element does are implemented behind the middleware. While the necessary actions are done and required APIs were called in the action layer, the response are “filtered” by the middleware. The middleware will show appropriate response if the request is bad, unauthorized, etc.

Layered Architecture

As you may have noticed, the main architecture we use in the project is the layered architecture. There are some advantages that we value from applying layered architecture:

  • Maintainable
  • Testable
  • Easy to separate “roles”
  • Easy to update separately

This is ultimately due to the how layered architecture innately separate different objects as different layers, and those layers are usually independent from each other. This is valuable to us since this is a quick project and we consist of 5 people, so having our focus concentrated on each element one at a time should be the efficient way to go.

A final addition, we use docker, which serves as a “container” that isolates the frameworks. This especially would help during deployment. All in all, this is the underline architecture of our project.

Though it is a pretty simple architecture, it definitely gets the job done. We hope our project has been a good reference, good luck on yours!

--

--

Ivan Taftazani
Electronic Logbook

Computer Science Student from University of Indonesia