Achmad Kurnianto

Easier Qurban Experience (EQExp) for July Hashnode Hackathon - Part 1

Hello, welcome back to my blog.

I want to share anything related to my participation in July Hashnode Hackathon.

This is my first time joining a hackathon on a worldwide scale. Usually, I barely enter it, even on my country (Indonesia) scale. I hope my web app created for this hackathon will be beneficial for everyone.

Why Easier Qurban Experience (EQExp for short)?

This month (July 2022), which coincides with the Dhul Hijjah (one name of the Hijri calendar), has a great celebration day in my religion (Islam) named Eid Adha. Usually, every Muslim/Moslem (a person who believes Islam is the right religion) in the world slaughters cows/sheep/goats/camels and then shares its meats.

I am interested in qurban committees in Jogokariyan Mosque Yogyakarta Indonesia. Their Twitter account said that all qurban process from slaughtering to meat distribution is being monitored by the web application. It's a must to get objective qurban progress information quickly as possible, so the citizens can get qurban meats quickly and enjoy the Eid Adha party together with their families.

I want to improve the existing web application from that mosque. I want to add features like the qurban registration form, watching the qurban process via google meet, paperless meat coupon, and generating a report file. And also I want to make this web app to be open-source, so the qurban committee in other mosques can use EQExp too.

Tech stacks used in EQExp

After I register the new database in PlanetScale, I'm confused should I have to set up the backend and frontend web app separately or not. Luckily, PlanetScale has free integration with Vercel, maybe I should use nextJS instead. Moreover, nextJS has built-in support for both page and API routes. I am using TypeScript instead of JavaScript because I want to make my web app have cleaner code and be easy to scale in future updates.

I use several libraries to make EQExp work. There are the libraries I used and their purposes

  • Prisma library as ORM with the database provided by PlanetScale.
  • clerk library to handle user management.
  • workbox library to generate a service worker file as the prerequisite of Progressive Web App.
  • windicss as an alternative to tailwindcss to make the frontend website has a nice look and feel.

New things learned when developing EQExp

I have been professionally involved in web development since 2016 mostly as a front-end developer. In this application, I have to do a backend developer scope like connecting with the database, managing table structure, etc. I have to design EQExp UI, too.

Previously I have experience with sequelize ORM to several backend applications. Because this web app use TypeScript, I want to practice Prisma ORM which has better TypeScript support instead of sequelize. I am also learning tailwindcss from the start because mostly all of my web apps still use bootstrap.

Initially, I use next-auth to authenticate users with a google account. Unfortunately, I am still not logged in after already login in with a google account. That problem is solved after successfully migrating from next-auth into clerk with some changes.

EQExp web application demos

You can view the EQExp app here. Unfortunately, that app is ongoing. I hope I can finish it early and I can showcase demos in the next article. You can also view my progress develop the EQExp app here.

EQExp future developments

This web app is far from perfect and still needs improvements. Those improvements which can be developed next time are:

  • Integration with Government National ID to get citizen's name (must be carefully developed to prevent data leaking)
  • Integration with Google Place SDK to easily assign mosque location.
  • Add zoom API integration as an alternative to Google meet API.
  • Directly share qurban reports to social media platforms like Facebook, Instagram, Tiktok, etc.
  • Migrate to mono repo @eqexp for source code management and provide its documentation.
  • Add multi-factor authentication with clerk libraries.
  • Collaboration with Jogokariyan Mosque qurban committees which has an existing web app to make the EQExp web app better.

Thanks for reading about my experience in the Hashnode hackathon. I hope the EQExp web app will be beneficial for qurban committees and also citizens for tracking the qurban process.