Web Development Chronicles - The BNN Run 2023 Website
Written bySetasena Randata Ramadanie
Intro
The fight against drug trafficking and abuse in Indonesia is one that requires a multi-faceted approach, and the Indonesia National Narcotics Agency (BNN) has been at the forefront of this battle since its establishment in 1997. Under the Ministry of Law and Human Rights, BNN employs various strategies, including law enforcement, prevention programs, and rehabilitation efforts, to address the drug problem in the country. As the agency continuously adapts to combat the ever-evolving drug trade, BNN has recently announced an exciting event: the BNN Run 2023. Also, I must add a disclaimer that these reflections and interpretations are purely my own, based on my individual experience with the BNN Run project, and do not in any way reflect the views or opinions of BNN.
My Role at BNN Indonesia
As a full-stack web developer at BNN Indonesia, my role included not just coding, but also strategic problem-solving, collaboration, and a constant pursuit of learning. A key project during my tenure was the development of the BNN Run 2023 registration portal. The opportunity arose quite unexpectedly - in my fifth semester at the University of Indonesia where I was majoring in Computer Science, a friend introduced me to the position. Despite having limited experience with JavaScript (my education focused primarily on Java Springboot and Django Python Framework), I saw this as a valuable learning opportunity. My responsibilities stretched from the frontend, which involved designing the website with NextJS, to the backend, where I managed the database using PostgreSQL and NestJS. My work did not stop at just the site's infrastructure, as I also worked on integrating the payment gateway and setting up a mailing system. This unique experience has given me invaluable hands-on knowledge of web development, besides a deeper understanding of the important work BNN does in the fight against drugs.
The Technology Stack
The BNN Run 2023 registration portal was built on a robust technology stack to ensure seamless user experience. To begin with, I used NextJS for the frontend development. NextJS Pages Router facilitated the creation of a highly responsive, multipage application. To enhance the aesthetic appeal of the portal, I relied on Tailwind, a utility-first CSS framework, which allowed us to design unique, custom user interfaces. For the backend, I utilized NestJS, a progressive Node.js framework that ensured efficient and scalable server-side applications. By coupling NestJS with Sequelize ORM, I could seamlessly communicate with the PostgreSQL database deployed on Digital Ocean. This combo streamlined data management, offering an optimal solution for managing data transactions. For email communications, I adopted Brevo as our mailing provider. Through the backend API, I connected it to our system to handle newsletters, announcements, and sending invoices post-registration. Lastly, I employed Figma for prototyping. This tool was instrumental in creating intuitive, user-friendly designs before actual implementation, enabling us to visualize and refine the end-user's journey. This multi-faceted technology stack was key in creating a reliable and user-friendly portal for the BNN Run 2023.
Integrating a Payment Gateway
A key feature of the BNN Run 2023 registration portal was the integration of Midtrans, a trusted payment gateway in Indonesia. The integration process required precision and a deep understanding of the transaction flow. I had to ensure the gateway could securely handle various payment methods, such as credit and debit cards, e-wallets, and bank transfers. The communication between the website, Midtrans, and the bank needed to be flawless to ensure a smooth transaction process for every registrant. The task was complex, as it involved handling a series of API requests and responses, from creating transactions to handling notifications for payment status. Also, in order to avoid any fraudulent transactions, I implemented fraud detection features provided by Midtrans. Integrating Midtrans was a rigorous task but was vital in ensuring a reliable, secure, and seamless payment experience for the participants of the BNN Run 2023.
Building the Mailing System
Implementing an efficient mailing system was a crucial component of the BNN Run 2023 registration portal. The system was designed to handle various tasks such as sending confirmations post-registration, delivering invoices, and disseminating event updates. For this purpose, I utilized Brevo, a robust email marketing service. Brevo stood out for its convenience and functionality. The availability of its NPM package simplified the integration process immensely. By installing the package and configuring it with our system, I were able to send emails directly from the backend server, fully type safe. This seamless integration enabled us to automate the entire mailing process, from crafting and personalizing emails to scheduling and sending them out to registrants. It was important to ensure that the emails were not only sent out promptly but also landed in the recipients' primary inbox and not their spam folder. To achieve this, I employed Brevo's sophisticated delivery system, which utilizes domain authentication, compliant sending practices, and ISP relationships to optimize email deliverability. The resulting mailing system was robust, efficient, and highly effective in keeping registrants informed and engaged with the BNN Run 2023.
The Challenge and Fulfillment
Embarking on the BNN Run 2023 registration portal project was not without its hurdles. The most daunting challenge was mastering new programming languages and frameworks on the job. While I had limited experience with NextJS, NestJS, and PostgreSQL, the task at hand required fluency in these tools. I immersed myself in intensive learning, coding, and debugging to bridge the gap in my skillset. The integration of Midtrans payment gateway and Brevo mailing system, each with their unique complexities, further tested my mettle. However, every problem solved, every bug fixed, translated into a surge of satisfaction and fulfillment. The joy of witnessing my code come to life as a functional, user-friendly registration portal was unparalleled. Furthermore, knowing that my work was contributing to BNN Indonesia's noble cause added a deeper sense of purpose to my professional journey. The challenges were rigorous, but the fulfillment that came from overcoming them was profoundly gratifying.
Lessons and Takeaways
The journey through the BNN Run 2023 project has been filled with valuable lessons and insights. Firstly, it taught me to believe in my abilities and potential. When I was first introduced to the project, I was far from confident. However, I dove into it, pushing past my comfort zone and proving to myself that I was capable of more than I had initially thought. Secondly, the experience underscored the importance of seizing opportunities. This opportunity not only enriched my professional portfolio but also exposed me to real-world challenges and complexities. Thirdly, as a developer, it is critical to embrace challenges and learn from each project. The BNN Run project demanded that I learn new programming languages and work with various technological tools. This underscored the importance of continuous learning and adaptability in the field of web development. It served as a testament that every project, no matter how daunting, is an opportunity for growth and learning.