My application using excessive resources.

Firstly first, I think why this happened because it's not good enough to be solo developer to create application with low knowledge, time and plan. To make application until it's finish and used by user are need much knowledge, time and plan I think.

You know what, I am very motivated to make something and learning something new. For example, my latest project in last 2 years(2022 - 2023) "project with theme create custom application for manufacturing". This project requested by CV. Garuda Machinery, My wife working there so I have internal connection to owner. FYI, I expertice to make application writen with PHP programming language and expertice use Laravel framework. Because I know some free service to make web application, I want to make application with minimum financial cost. Vercel for hosting service, and Supabase for database service. I think that enough to make some web application with none financial cost. So I choose NextJs for javascript react framework with low knowledge library - library that I can use.

FYI again, in 2022 I am employed at JagoanHosting as Software Engineer. So I working the manufacturing project after I finish working at JagoanHosting. And I planning and believe the project will developed in 3 month. For the starting point, what I do is searching library that can help me for process development application is more fast. And I found library for ReactJS at that time I believe can help me develop application more fast and more elegant. Some of them are,

• Chakra UI (help developing UI web application)
• Tailwind CSS (help developing UI web application with CSS framework)
• SWR (help application fetch data in real time)
• FormIK (help build form in ReactJS)
• React DataTable (help build pagination data in ReactJS)

Every people have expectation and plan, the project that I have been plan will be finished in 3 month, in reality finished in 9 month. I do start working the project on January 2022 and finished in October 2022. I am very lucky the owner not saying to me that he is angry(maybe he is angry) and still have hope application that I make will give positive change to company.

Some review of project after I deliver to user, I believe the library I choose have make my process development more easier. But I think here are biggest thing that make me process development more longer that I expected are,

• how to use structure data to react component.
• how to use the library.
• choose library for specific use case.

How do I summarize the problem is because of those? Let's I tell you some crucial issue I found after project delivered to user.

• Project get vercel usage limit.
• Project get supabase CPU rate limit.
• Web application is slow day by day.

Root cause

I think on above is enough to summarize what happened in project on 2022. Okay let's focus to the beginning topic how do I develop the application, because tech stack that I used already written above.

How to fetch data wrong way

FYI I am so impressed by how SWR to fetch data in real time. And in the first time I use supabase, I didn't know supabase limit fetch data to 1000 row, and to fetching data to supabase so much fast. So I more amazed by those 2 library to be combined. After that, because I use sql for data storage I continue to build data relational in nextJS.

You know what happened after application used in one month? there some table have row more than 1000. After know that issue, I decide to make pagination but to preparing solution is not easy.

• To prepare pagination is cost time, maybe cost 3 hour for first repairing datatable, after that maybe cost 1-2 for other datatable.
• Not sure it's bug or not, but I found pagination of library datatable not working if data splited in API. so on last development I put all data to datatable and datatable automated generate pagination.

So fast solution on that problem is, API refactcing all data to supabase use looping. I know it's easy solution but hight cost server process and database process.

And as I predicted, I doesn't have time to change API data fatching from fetch all data to paginating fetch data. So that is why I got notification from vercel and supabase.

How action not implemented in component

Action that I mean is CRUD request. I think if I put action to each component, there will be much request to API. And cost of request will be so much, so I decided to set CRUD request to main page not on component.

this problem is not related to crucial issue that I wrote above. But I think if I put some of CRUD request to main page, if page one and other use same component, I will write same code from page one and other page.

Make it right

You know what? I feel so wrong. I do make not optimal application, and not fully can be used. In June 2023 I collect courage to rebuild application. I make little talk to the owner and give proposal to rebuild application. Proposal not fully accepted, but in July 2023 I try to start early to rebuild application.

Prepare backend

This time I want to rebuild application with out vercel and supabase. I well know if I use same stack same problem will showing again. So I just well know about express JS and prisma JS in 2 years. I just using 3 or 5 time before and not consistent. And I almost forget how to use express JS and prisma JS.

So I decided to make backend application with stack

• Typescript
• Express JS
• Prisma JS
• MariaDB

I think this backend not yet need Child/Forked processes because I think they not yet need scale up this backend application. So I decided use Typescript and some Depedency Injection for Router and Controller on Express JS.

For Prisma JS and MariaDB, I still use relational database because I think this application not yet use event driven architecture. And I think Laravel eloquent ORM and database migration are amazing tools for managing model and database, But with Typescript and Prisma JS are more amazing for relational database.

I develop backend application with beta version from 4 July 2023 until 28 July 2023. Because I know that there will be some change from beta to release version. Some change from beta to release version because there will be new request change from owner or some change that I forgot logic from previous application.

The hardest part of preparing this backend application are develop skeleton and migrating data from supabase to mariaDB. But after setup skeleton has done, It'll be easier to write route and CRUL logic on controller. Why migrating database to mariaDB is hard because there transaction that operator write is in database and excel. And of course because data in excel and database not same and different format, so I still planning to make fitur to compare data in database with excel.

Prepare frontend

Frontend application is more complicated than backend application for me. Because some much to handle in frontend, for example are responsive web view or how to make component reusable.

So tech stack that I use for this fronend application

Typescript

• NextJS 13 (with app directory)
• Tailwind CSS
• Shadcn UI
• Zod (library to validate form schema)
• Lucide (library to provide icon)
• Recharts

The biggest difference is in Shadcn UI and Chakra UI. I think comparison from Shadcn UI and Chakra UI is about total component that we can use. Shadcn UI developed from Radix UI so most of documentation referenced to Radix UI.

If you have question is why I need to recreate frontend too? root cause problem is on backend application, isn't it?

the answer are

• I think I make wrong way to make component in previous development, I think code of frontend will 70% rewriten so why does not make new?
• Some library not yet supported in newest condition, and Shadcn UI provided the solution.

Because the owner not yet give the answer is it the project continue develop or not, I just preparing repository and skeleton of frontend application after finish develop backend application. Owner answer on early September 2023 and I do start developing frontend application from 9 September 2023 until 17 October 2023.

The difference with last and current frontend application is to develop component, I put CRUD request in each component so component will just imported and used, but with resk request to API will be much. I think that is a right way to develop component, but I still have some work left. Because I think I still put component in difference location.

Finally

I am very burnout in early week October 2023, I want to give up to developing application. And I cannot concentrate because my all brother and sister at Gaza, Palestine. At the day tear down and the night nightmare showing. I am with you my brother and sister. But what am I? I just can pray for your savety, your heath and your jannah.

I think that what I can share to all of you. I hope you didn't and will not get same problem. Maybe I will update this blog to share more detail about previous and current development.

Cheers up.