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
Tech stacks used in
I use several libraries to make
EQExp work. There are the libraries I used and their purposes
Prismalibrary as ORM with the database provided by PlanetScale.
clerklibrary to handle user management.
workboxlibrary to generate a service worker file as the prerequisite of Progressive Web App.
windicssas an alternative to
tailwindcssto make the frontend website has a nice look and feel.
New things learned when developing
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
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
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
@eqexpfor source code management and provide its documentation.
- Add multi-factor authentication with
- Collaboration with Jogokariyan Mosque qurban committees which has an existing web app to make the
EQExpweb 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.