## **[Overview](https://www.hundredbeans.com/projects/hundredbeans#overview)**

Just my personal website that showcase my projects, bookmarks, online resume, blogs (hopefully), and maybe some explorations in the future. Hundredbeans itself is my online identity name which means "Kacang Seratus" in Bahasa Indonesia. I build this website initially to explore WindiCSS + Nuxt3 and try its new features. I ended up using it for my personal website replacing my previous website using Nextjs + ChakraUI.

## **[Tech Stacks](https://www.hundredbeans.com/projects/hundredbeans#tech-stacks)**

**Backend** - Typescript • Nuxt3 • Firestore • Telegram API

**Frontend** - Nuxt3 + WindiCSS • Vercel

**Tools** - Google Analytics • Github • VueUse

## **[Lessons Learned & Notes](https://www.hundredbeans.com/projects/hundredbeans#lessons-learned--notes)**

Here are some notes and lessons that I learned in the process of developing this project:

* Creating a web app using Nuxt3 as a full-stack framework

* Nuxt3 is currently the best full-stack framework in my opinion. Easy to write and develop the BE routes, it has type checking when the UI accessing the data from the backend, easy to write content, and better DX.

* Creating a web app that has a dark mode feature

* Use Telegram API and its webhook to perform CRUD easily. You may no longer need to build an admin page anymore

Project Details - Hundredbeans

## **[Overview](https://www.hundredbeans.com/projects/tukulsa#overview)**

Online chatbot via LINE platform which can automatically respond to users' chat and requests to make a purchase of a prepaid voucher for all cellular operators within Indonesia. The chatbot uses NLP build with TensorFlow (Python).

This project is no longer active, cause the price to maintain EC2 + RDS instance in AWS is too expensive. It is impossible to migrate to the serverless function because the latency difference is too high for a chatbot and it needs high computing power to train and run the ML model itself. Also, there are no market for this since people just can use m-banking or other e-commerce to buy prepaid voucher or "pulsa" anyway.

## **[Tech Stacks](https://www.hundredbeans.com/projects/tukulsa#tech-stacks)**

**Backend** - Python • Flask • MySQL + SQL-Alchemy • Docker • EC2 + RDS • TensorFlow • LINE API • Midtrans + Pulsa Provider

**Frontend** - React + MaterialUI • Line Liff

**Tools** - Github • Travis CI

## **[Lessons Learned & Notes](https://www.hundredbeans.com/projects/tukulsa#lessons-learned--notes)**

Here are some notes and lessons that I learned in the process of developing this project:

* Integrate midtrans and pulsa provider

* Creating an NLP model and integrating it with a chatbot

* EC2 + RDS is too expensive and hard to maintain

* You can develop a fully functional web app that runs on LINE chat and it's very powerful. The framework is called LINE Liff

* You can customize chat responses in LINE using Flex Message API to have a beautiful interface in a LINE chat. **[Here is the documentation](https://developers.line.biz/en/docs/messaging-api/message-types/#flex-messages)**

Project Details - Tukulsa

## **[Overview](https://www.hundredbeans.com/projects/invitreeid#overview)**

Digital Invitation website where users can create and share their invitations. The Invitation covers all the conventional invitation needs with many other features such as online payment, customizable data & contents, RSVP, support for multiple schedules, map locations & directions, reminders, custom message templates, monitoring dashboard, SEO friendly, etc.

## **[Tech Stacks](https://www.hundredbeans.com/projects/invitreeid#tech-stacks)**

**Backend** - Typescript • Firebase Function • Firebase Auth • Firestore • Telegram API • Midtrans • GitHub Action for CI/CD • BunnyCDN for storage

**Frontend** - Nuxt + Vuetify for the main website • React + ChakraUI for the dashboards • Vercel

**Tools** - Better Uptime for monitoring • Google Analytics • Figma • Github

## **[Lessons Learned & Notes](https://www.hundredbeans.com/projects/invitreeid#lessons-learned--notes)**

Here are some notes and lessons that I learned in the process of developing this project:

* Development using Firebase with multi-environment

* Data migrations using Firebase + Firestore

* Automate deployment using GitHub Action for different environments

* Integrate google analytics on SPA. Apparently, google analytics doesn't automatically log the page\_view event on every route change in the Single Page App

* Use a CDN service like BunnyCDN to store all media instead of Firebase Storage to save more money. In the early time, 90% of my Firebase cost is from the storage and its bandwidth. After I move the content and media storage to BunnyCDN, I save >300K IDR per month (assume there are more than 5 invitations created in that month)

* You can deploy your product MVP for free using Firebase + Vercel combo and extend the stacks based on your needs

* Use an external API monitoring service to periodically call your serverless function to reduce the cold start. My go-to choice is Better Uptime. Cause it can monitor multiple URLs with low intervals (per 3 minutes), monitor from multiple regions, can generate the status page + connect to custom domains, email notifications, add team members, and all of that for FREE

* Use a static page or server-side rendered page for the Landing Page for better SEO performance

* Use Telegram as an error logger and notification instead of other notification services

* Use lower image resolution as an Image graph meta so the link preview can be shown on WhatsApp and other social media

* Vue is better at handling form instead of React. Better use Vue if you want to create an app that will handle many complex forms