All Projects

To modernize the operations of Kvrasi Coffee, I developed KVRASI.LAB, a custom-built financial and operational dashboard designed to replace fragmented manual bookkeeping with real-time digital clarity. As the Lead Developer, I engineered the entire system from the ground up, focusing on giving the owner a "premium-feel" central hub to track the business's heartbeat. By utilizing a tech stack of JavaScript (ES6+) and Tailwind CSS for a responsive frontend, and integrating Google Apps Script (GAS) with Google Sheets for a cost-effective serverless backend, I created a powerful Single-Page Application that syncs data across all devices without the need for expensive hosting.The core of the application features an intelligent financial engine and a specialized "Warehouse" module capable of automated unit conversions, ensuring that Cost of Goods Sold (HPP) calculations are always precise. I also developed a "Kalkulator Promo" that simulates 10% tax and 15% platform fees, allowing the owner to make data-driven decisions on discounts and profit margins. This real-time link between raw material costs and menu recipes means the owner can now identify underpriced items instantly as ingredient prices fluctuate in the market.Since its launch, KVRASI.LAB has reduced the time spent on manual calculations by over 70%, providing a scalable and accessible architecture that empowers Kvrasi Coffee with strategic growth. By combining Chart.js for financial visualization with a clean, mobile-responsive UI, the dashboard ensures that the owner can monitor daily revenue and expenses on the go. This project stands as a testament to how creative engineering and cloud-native tools can transform traditional business management into a streamlined, data-driven operation.

For a developer, a portfolio website is more than just a place to list experience but it can be a place to show my skills and people know about myself. I recently decided to rebuild mine from scratch, turning it into a full-stack journey to test the limits of a modern tech stack. I chose NestJS for its modular backend architecture, Next.js for its seamless server-side rendering, and Supabase to handle my PostgreSQL database and storage, all orchestrated within Docker containers.Refactoring the Chaos: The API LayerOne of the earliest hurdles was "API spaghetti." In the beginning, I had fetch calls scattered across my admin pages, each handling authentication and headers differently. It was a maintenance nightmare waiting to happen. To fix this, I centralized everything into a single API layer. This shift allowed me to replace messy fetch blocks with clean, reusable calls like api.projects.getAll(). This refactoring taught me a vital lesson: centralize your logic early before technical debt becomes unmanageable.The Battle with Rich TextIntegrating the Quill rich-text editor for project descriptions seemed simple at first, but rendering that content on the public site was another story. I was met with raw HTML tags and broken alignments. To solve this, I implemented two strategies: rendering HTML properly for detail pages and stripping tags for clean previews. I also had to write custom CSS to ensure that classes like .ql-align-center actually centered images and text, bridging the gap between what I saw in the editor and what the user saw on the page.Polish and PerformanceI believe the "small" features define the final quality of a product. To make the site feel professional, I added:Auto-generated Slugs: Project titles like "My Awesome Project" automatically become SEO-friendly URLs.Image Lightbox: A fullscreen modal that opens when any image is clicked, providing a premium viewing experience.Smart Tech Filtering: A system that only displays technologies used in multiple projects to keep the UI clean and relevant.These interactive features required a deep understanding of Next.js Client vs. Server components, ensuring the site remained fast while offering a highly responsive user interface.Deployment: Taking Control with GCPThe most rewarding part of this project was moving beyond simple "click-to-deploy" services. I chose to take full control of my hosting by deploying the entire stack on Google Cloud Platform (GCP). I learned to configure VPS VM instances (Compute Engine) from scratch, setting up a secure environment to run my Dockerized containers. Managing my own VPS allowed me to understand the nuances of server management, port forwarding, and resource allocation, ensuring that the backend (NestJS) and frontend (Next.js) communicate perfectly within a production-grade cloud environment.Lessons from the BuildBuilding this site forced me to be both the developer and the client. I learned that TypeScript is indispensable for catching runtime errors before they reach the user, and that rich text is never as simple as it looks. Today, the portfolio is a live, maintainable ecosystem hosted on GCP that represents not just my past work, but my current capabilities in building and deploying integrated, full-stack systems.

KaosLab: Streamlining Custom Screen-Printing OperationsKaosLab is a native Android application designed to digitize the end-to-end workflow of Sablonkaos.id, a screen-printing SME in West Java. As an Android Developer, my primary goal was to architect a solution that automates order management and eliminates the "design bottleneck" that often slows down production. By moving from manual processes to a centralized mobile platform, I enabled the business to handle high volumes of custom orders with significantly improved precision and speed.Technical Infrastructure & Firebase IntegrationThe application is built with Kotlin, following a structured architecture to ensure a responsive and maintainable codebase. I leveraged the Firebase ecosystem as a serverless backend to provide a seamless, real-time experience for both the business owner and the customers:Cloud Firestore: I implemented Firestore as the primary NoSQL database to manage real-time synchronization of order data, production statuses, and product catalogs. This ensures that any update made by the admin is instantly visible to the customer without requiring manual refreshes.Firebase Storage: To handle the core of the business—custom designs—I integrated Firebase Storage to manage high-resolution image uploads. This allows customers to submit their creative assets securely, which are then easily retrieved by the production team for printing.Firebase Cloud Messaging (FCM): I developed an automated notification system using FCM. This feature provides transparency by sending real-time push notifications to users regarding their order journey, such as "Payment Confirmed," "In Production," or "Ready for Shipping."Interactive UI & Development LifecycleThe user interface was crafted using Android XML and Material Design principles to ensure a professional look and feel. I focused heavily on the Interactive T-Shirt Designer, utilizing custom touch listeners to allow users to manipulate text and images directly on a digital canvas. This "drag-and-drop" functionality empowers customers to finalize their designs in-app, reducing the back-and-forth communication typically required during the design phase.To ensure a high-quality release, I followed the Waterfall methodology, moving systematically through requirement analysis, system design, and implementation. My quality assurance process included rigorous Blackbox Testing to validate every functional path and User Acceptance Testing (UAT) with the business owner to ensure the app effectively solved real-world operational pain points. KaosLab stands as a practical example of how native Android development and cloud-native services can transform a traditional SME into a digitally-driven enterprise.

Smart BSK is a digital waste bank management system developed to improve the efficiency, transparency, and accessibility of community-based recycling operations. Waste banks are widely used in Indonesia as a mechanism where residents deposit recyclable waste and receive monetary value recorded similarly to a banking system. These initiatives play an important role in reducing landfill waste and encouraging circular economy practices at the community level. According to the World Bank, global waste generation is projected to reach 3.4 billion tons annually by 2050, highlighting the need for effective local waste management systems. [Source: World Bank, 2018] https://datatopics.worldbank.org/what-a-waste/In this project, the primary responsibility was designing and developing the mobile-based application and system architecture that supports digital waste bank operations. The application was built to allow users to manage their waste deposits, track balances, and view transaction histories directly through a smartphone interface. The system replaces traditional manual bookkeeping processes used in many waste banks, which are often prone to errors and lack transparency. Through the mobile application, users can monitor their waste deposit records and balances in real time, improving trust and engagement between waste bank managers and community members.From a technical perspective, the system was implemented using Kotlin Jetpack Compose with the MVVM (Model–View–ViewModel) architectural pattern and Modularization to ensure maintainability and separation of concerns within the application. The application communicates with backend services through Firebase Firestore and uses cloud-based data storage to manage user accounts, transaction records, and waste deposit data. This architecture enables scalable data management while maintaining responsive performance on the mobile platform.The resulting system provides a digital platform for recording waste transactions, monitoring balances, and managing customer data within the waste bank ecosystem. By digitizing operational processes, the application reduces administrative workload, improves data accuracy, and allows participants to access their waste bank information anytime through a mobile device. Digital waste management platforms have been shown to improve traceability and operational efficiency in community recycling initiatives.

Indonesia faces a staggering waste crisis, producing over 70 million tons of waste annually, with millions of tons of plastic leaking into our oceans. This alarming reality, highlighted by the distressing impact on marine life, served as the catalyst for Circlo. Developed for the Google Solution Challenge 2024, Circlo is an innovative mobile platform designed to bridge the gap between low public awareness and effective waste management. Leading this project as both Team Leader and Android Developer, I had the honor of guiding my team to reach the Top 100 Global, representing Indonesia as one of only 14 teams to compete on the world stage.To achieve this, I established a rigorous development roadmap, defining granular job descriptions for each team member to eliminate overlap and ensure every developer had a clear path forward. By maintaining a high-velocity sprint cycle and constant communication, I kept our progress on track, ultimately leading Circlo to be recognized as one of the Top 100 Global innovations.A cornerstone of my management role was overseeing the implementation of our Google Cloud Platform (GCP) Architecture to ensure a scalable and robust system. I coordinated the deployment of our main API server through Cloud Run, utilizing Container Registry for streamlined image management. To handle our specialized ML requests, I managed the integration of our TensorFlow models on App Engine, creating a modular environment where our backend and AI layers could communicate efficiently. This architecture was supported by a solid data foundation using Cloud SQL for relational management and Cloud Storage for our extensive image datasets, all secured by Firebase Authentication.To maintain technical integrity throughout the project, I enforced a disciplined collaborative workflow. We utilized GitHub as our central repository, where I oversaw the branching strategy and code reviews to ensure that every pull request aligned with our core architectural goals. By bridging the gap between our machine learning, backend, and mobile components, I ensured that the Kotlin client interacted perfectly with our cloud infrastructure. This end-to-end technical oversight allowed us to build a seamless ecosystem that not only performed at a global standard but also demonstrated the power of a well-managed, cloud-native solution.

Developed a full-stack web platform for BEM Faculty of Computer Science (BEM FASILKOM) to centralize organizational information, announcements, and digital content management. The system was designed using a headless CMS architecture, where Strapi functions as the backend content management system and Next.js handles the frontend interface.The platform enables administrators to manage dynamic content such as organizational profiles, news, events, and announcements through an intuitive dashboard, while the public website delivers fast and SEO-friendly pages using server-side rendering (SSR) and static generation capabilities of Next.js.Key features include:Content Management System: Admins can create, update, and publish articles, announcements, and organizational information through Strapi.Dynamic Content Delivery: The frontend retrieves structured content through REST APIs provided by Strapi.Optimized Performance: Next.js rendering strategies improve page load performance and SEO visibility.Modular Architecture: Separation of frontend and backend allows easier scalability and independent development.Responsive User Interface: Designed to ensure accessibility across desktop and mobile devices.Through this project, the system improves information dissemination and digital presence for BEM FASILKOM, while demonstrating practical implementation of modern headless CMS architecture using Next.js and Strapi.

Indonesia’s streets are powered by over 25.8 million street vendors, generating nearly IDR 10 trillion in annual transactions. Yet, despite their massive economic impact, these vendors face a digital "invisibility" compared to brick-and-mortar stores. For buyers, finding a specific vendor is often a game of chance due to inconsistent hours and frequent location changes. This gap in accessibility and visibility inspired the creation of JajanJalan, our capstone project for Bangkit Academy 2023, designed to bridge the digital divide between street vendors and nearby buyers.As the Android Developer on the team, I was responsible for bringing the user experience to life using Kotlin. I focused on building a seamless interface that integrated Live Tracking to solve the core problem of ever-changing vendor locations, making it easier than ever for customers to find their favorite snacks in real-time. I also implemented Direct Contact features to facilitate communication and integrated a TensorFlow-powered recommendation system that suggests local street food based on individual user preferences and past interactions.By connecting my frontend work with a JavaScript-based backend deployed on Google Cloud Platform (GCP), our team created a robust and scalable ecosystem that empowers micro-entrepreneurs. JajanJalan transforms the street vending experience by providing the digital visibility these vendors previously lacked, while offering customers the convenience of modern technology. This project stands as a testament to how mobile development and machine learning can come together to support the local economy and ensure that Indonesia's vibrant street food culture thrives in the digital age.

The vision for TrashCare began with a simple but powerful idea: transforming waste from a burden into a valuable resource for craftsmen and consumers alike. What started as a brainstorming session for the P2MW (Student Entrepreneurship Development Program) quickly evolved into a rigorous development project. Even before we received the official funding announcement, my teammate and I decided to hit the ground running. We believed that to build a successful circular economy platform, we needed more than just a good proposal, we needed a robust, scalable technical foundation.As the lead for the application's architecture, I took charge of the project setup using Kotlin. To ensure the app was maintainable and ready for future growth, I implemented the MVVM (Model-View-ViewModel) architecture. This allowed for a clean separation of concerns between the business logic and the UI. To further streamline the development process and handle complex dependencies, I integrated Dagger Hilt for Dependency Injection. One of the most intensive phases of this project was the UI development; I manually sliced over 30+ screens from Figma into Android XML. By strictly adhering to Material Design principles, I ensured that the high-fidelity designs were translated into a fluid, intuitive, and responsive user experience.Professional collaboration was at the heart of our progress. We utilized GitHub as our primary version control system, adopting a disciplined branching strategy to manage our code. We worked in dedicated feature branches and used Pull Requests for every major update, which allowed us to conduct informal code reviews and maintain a high standard of code quality. This organized workflow was essential in preventing conflicts as I worked on the frontend architecture while my teammate focused on the "brain" of the application. This level of synchronization ensured that as the UI grew, the backend remained perfectly aligned.While I handled the frontend and architecture, my teammate was responsible for designing the database schema and managing the Firebase integration. From authentication to real-time data storage, the integration with Firebase allowed TrashCare to handle waste distribution data dynamically. Once our team was officially awarded the P2MW funding, we accelerated our efforts to finalize the Minimum Viable Product (MVP). We didn't stop at coding; we took the app into the field for user testing and began establishing partnerships with local waste collectors and processing centers. TrashCare now stands as a testament to how technical discipline and structured collaboration can turn a digital solution into a real-world environmental impact.

Turahan: Turning Indonesia’s Food Waste into a Circular EconomyEvery year, Indonesia loses billions of dollars and massive amounts of vital nutrition to food waste. While millions go hungry, 48 million tons of food end up in landfills. This isn't just a waste of food; it's an environmental and economic crisis. This paradox was the spark for Turahan. Born during Google Hackfest Indonesia 2023 as Top 10 App, our mission was to build a bridge between surplus food and those who can turn it into something valuable.Our solution was designed to be more than just a donation platform, it was a complete circular economy. We imagined a world where surplus food is redirected to those in need, while inedible waste is processed into valuable organic fertilizer, creating new income streams for the community. This entire process is fueled by corporate CSR programs that receive transparent impact reports in return. By connecting donors, volunteers, and local industries, Turahan ensures that every plate of food has a purpose and every scrap of waste has a value. This innovative approach resonated with the judges, ultimately earning us a spot in the Top 10 of the competition.To bring this vision to life, I architected the application using Kotlin with an MVVM pattern and Dagger Hilt to ensure a clean, scalable codebase. My role as a "Hipster+Hacker" allowed me to bridge the gap between complex business logic and intuitive UI design, manually slicing over 20+ Figma screens into responsive Android XML. We maintained a professional workflow via GitHub, using disciplined branching and code reviews to seamlessly integrate Firebase for real-time data and the Google Maps API for live volunteer tracking.By combining automated food validation with a points-based reward system, Turahan proved that technology can solve urgent real-world problems. This project was more than just a technical challenge. It was a lesson in leadership and the power of collaborative innovation. It stands as a testament to how a structured technical stack from Material Design to Firebase that can turn a simple idea into a scalable solution for a more sustainable future.