## **[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

Project Details - Invitree.id

Software/Web Developer

Silver Medal for Category Mathematics Olympiad at KSM

Silver Medal for Category Mathematics Olympiad (Representative of DKI Jakarta) at KSM 2014 in Makassar, Indonesia

3rd Winner of Smart Competition at IPEXC ITB

3rd Winner of Smart Competition (Oil & Gas) at IPEXC ITB 2017 Bandung, Indonesia

3rd Winner of Smart Competition at Derrick

3rd Winner of Smart Competition (Oil & Gas) at Derrick 2017 Cepu, Indonesia

Majoring in Geothermal / Petroleum Engineering with GPA : 3.56/4.00

Hundredbeans (WIP)

Tukulsa is an online Chatbot that can automatically respond to users' chats and requests in order to make a purchase of a prepaid voucher for all cellular operators within Indonesia using LINE as the media. Suspended on August 2020, because I was too broke to pay the AWS EC2 instance

Tukulsa

Invitree.id is a Web-app that focuses on creating a digital invitation ecosystem for Indonesian.

Invitree.id

Collecting data from youtube LiveChat and saving it to the firestore database is also integrated with a telegram for the notification. Personally use to scrape youtube LiveChat from Dota 2 Indonesia Broadcasters. Later those data can be used to determine average viewers' behavior in LiveChat using sentimental analysis.

Livechat Dataset Analyzer

Bot Marzi (stands for Grammar Nazi) is a Twitter bot that can detect grammar failure and reply it with a correct grammar by using memes

Bot Marzi

- Developing web apps for the Singapore government using Microfrontend with Vue.js
- Developing the Backend side of a product using AWS Serverless with nodejs
- Developing the Frontend side of a product using Microfrontend with Vue.js
- Maintain the code quality of a product by conducting unit tests using Jest and End to End tests using cypress
- Researching new and upcoming features that will be implemented within the product
- Collaborating with other devs, BA, PM, PO, and other team members in an agile environment

Software Developer - Fullstack

- Deliver products on tight deadlines while maintaining the quality of the product
- Primarily working with Python + SQL for the Backend and React + MaterialUI for the Frontend

Alterra Academy

Software Engineer Trainee (Mentee)

Building and Maintaining Invitree’s web application. Handling all the technical aspects, including the frontend, backend, deployment/DevOps, analytics, and even the mockups design. I also pay attention to things like web performance, SEO, and design.

Tech stacks backend: Typescript & Node.js, Firebase Function, Firestore, Github Action for CI/CD

Tech stacks frontend: Nuxtjs + Vuetify, Reactjs + Chakra-UI, Vercel

Other tools: Figma for Design, Google Analytics for analytics, Github for version control

Co-Founder, Software Engineer, Designer, Project Manager

Working on my thesis about Natural State Modelling of Geothermal Reservoir (Jaboi, Sumani, Atadai) and Reserve Estimation using Distributed Parameter Approach

Mohammad Daffa

2022