01. Behind the Code
A Tech &
Design Enthusiast
"Turning ideas into functional art—where code meets creativity"
With 2+ years of coding experience, I blend technical skills and design thinking to build impactful digital solutions.
My journey includes interning at PT. Mattel Indonesia, where I developed internal web systems, and leading design initiatives as Vice Director of Department Communication & Design at PUMA Computing.
Passionate about merging logic with aesthetics, I thrive on creating intuitive, user-driven experiences—let’s collaborate and bring ideas to life!
Years Exp
Projects
Clients
02. Services
Let’s Build
Something Great
Together
— Specialized Solutions
Full-Stack Development
Build fast, secure, and scalable websites tailored to your needs—from sleek portfolios to dynamic e-commerce platforms.
UI/UX Design
Create intuitive digital experiences that users love. I design wireframes, prototypes, and pixel-perfect interfaces focused onusability and aesthetics.
Graphic Design
Craft memorable visuals for your brand, including logos, social media assets, and marketing materials that stand out.
Technical Arsenal
Tools &
technologies i leverage
03. Professional Path
Experience
PT. Pratama Abadi Industri
I was responsible for developing internal systems to automate key business processes, covering the entire cycle from brainstorming and design to development, testing, and deployment. One of my main projects was building and enhancing the Master Material Inventory feature, which automated the management of materials, vendors, and color lists, improving overall accuracy and efficiency. I also optimized SQL queries and backend logic to enhance data retrieval speed and system performance. In addition, I contributed to designing and implementing user-friendly, responsive interfaces focused on improving user experience and accessibility across various devices.
PT. Mattel Indonesia
I contributed to several laboratory-related digital systems aimed at improving operational efficiency and user experience. For the Laboratory Website Dashboard, I enhanced the user interface to ensure consistency across the platform, conducted routine maintenance, resolved system bugs, and implemented robust form validation features to maintain data integrity during consumable item submissions. In the Training Center for Laboratory, I designed an intuitive user interface from scratch using Figma, specifically tailored to laboratory training workflows. The application was developed using ASP.NET with a focus on performance and scalability, including backend services optimized for efficient data processing and retrieval. Throughout the development, I prioritized both user experience and system reliability. For the Quality Assurance Logbook, I created custom Excel Macros to streamline QA testing procedures in a chemical laboratory environment and utilized SQL queries to provide dynamic data access based on user needs. I also developed a responsive logbook interface that supported efficient tracking and reporting for QA users. Additionally, in the Datasheet Testing for Laboratory project, I refined data collection methods to enhance result accuracy, consolidated various test processes into a single scalable workbook, and ensured compliance by maintaining and updating validation procedures in line with evolving product requirements.
Hearme (Thesis Capstone Project)
I developed secure REST APIs using Python and Flask, incorporating an ORM to facilitate seamless database interactions and implementing data encryption to enhance user security. As part of the project, I integrated the system with a LLaMA2-based chatbot, utilizing server-side rendering to deliver accurate and context-aware responses. Additionally, I designed and optimized PostgreSQL databases, resulting in improved query performance and overall system efficiency.
PUMA Computing (BEM Fakultas Informatika)
I led the design division of PUMA Computing for one year, where I focused on elevating the quality of digital content across various initiatives. In this role, I coordinated closely with the design team to ensure alignment on project goals and deliverables, fostering a collaborative environment that emphasized creativity and precision. I was responsible for translating complex information into visually compelling and effective designs that enhanced communication and engagement. Additionally, I served as the Person In Charge (PIC) for major events such as CSGO and PUMA REGEN, overseeing the end-to-end design and execution of all event-related materials to ensure a cohesive and impactful visual presence.
EcoLoops (Bangkit Academy 2023 Capstone Project)
I managed database interactions using MySQL and Google Cloud, optimizing SQL queries and structuring tables to support efficient and reliable transactions. I also developed high-performance API endpoints using Flask, enabling fast and scalable communication with machine learning models deployed on Cloud Run. To support secure and efficient data handling, I implemented cloud-based file storage using Google Cloud Storage Bucket, ensuring seamless management of received data throughout the system.
Awards
Education
President University
Informatics - Computer Science
2021 — 2024
SMK Al-Wafa
Multimedia
2018 — 2021
04. Projects
Selected
Works &
Case Studies
← Scroll vertically to navigate →
Room Booking System
A web-based room booking application built for the office using Laravel for the backend and Vue.js for the frontend. Previously, employees who wanted to reserve a meeting room had to go through an admin first just to find out which rooms were free, which slowed down even the simplest booking. Room Booking System removes that bottleneck: anyone in the office can now see room availability directly and book a room on their own, as long as it is still available for the chosen time. Built around a clear, self-service flow, the system cuts out the back-and-forth with admins, prevents double bookings, and makes scheduling meetings faster and more transparent for everyone.
FraudLens
A web platform for early fraud detection, built as our team's entry for the PIDI Hackathon. FraudLens aims to surface suspicious activity as early as possible so it can be reviewed before it turns into real losses. In this project I was responsible for the frontend, which I developed with ReactJS: building the interface that presents the detection results and handling the connectivity between the frontend and the backend services, so the data and analysis produced by the backend reach users in a clear, usable way. Working within the tight timeline of a hackathon, the focus was on delivering a reliable integration and a clean interface that makes the fraud signals easy to understand at a glance.
Saldoin
A personal finance management application built with Next.js. Saldoin helps users keep track of their money in one place, recording where it comes from and where it goes, so they can understand their spending habits and stay in control of their personal finances. The app is designed to make everyday money management simple and approachable, turning scattered transactions into a clear picture of one's financial condition.
Haniza Store
A web-based e-commerce platform that I developed using Laravel for the backend and Tailwind CSS for the frontend, combining robust functionality with a clean, responsive user interface. Designed to serve both as a public-facing marketplace and an internal business management tool, Haniza Store allows customers to browse and purchase products seamlessly, while providing powerful inventory control and financial tracking features for administrators. From the user’s perspective, the storefront offers a smooth and intuitive shopping experience, complete with organized product categories, real-time stock updates, and a secure checkout process. On the administrative side, the system features a dedicated dashboard where admins can manage product listings, monitor stock levels, and track both income and expenses in real time. This dual-purpose design not only simplifies day-to-day operations but also helps business owners make informed decisions based on accurate and up-to-date financial insights. The user experience is further enhanced by Tailwind’s utility-first styling, which ensures a modern, responsive layout across devices, making Haniza Store both a functional and visually appealing solution for small to medium-sized businesses looking to streamline their online sales and inventory management.
Gazkifa
A web-based inventory control system specifically designed for managing gas distribution and logistics. Built with ReactJS for the frontend, Express for the backend, and styled using Tailwind CSS, the application provides a modern, responsive interface that enhances usability across devices. At its core, Gazkifa allows administrators and staff to efficiently monitor, update, and track gas inventory levels, including distribution status, refill logs, and supply movements. The system includes a secure authentication mechanism powered by bcrypt, ensuring that user credentials are encrypted and protected against unauthorized access. From a user experience perspective, Gazkifa delivers a clean and intuitive dashboard where users can easily view inventory status, input transactions, and generate reports in real time. The use of ReactJS allows for dynamic interactions and quick updates without full page reloads, while Tailwind CSS ensures a sleek, minimalist design that prioritizes clarity and ease of navigation. Whether it’s managing cylinder returns, tracking daily stock flow, or auditing supply levels, Gazkifa streamlines complex processes into a user-friendly system tailored for the operational needs of gas distribution businesses.
Tracy
A comprehensive training center and competency management system designed to enhance employee development and promote professionalism within an organization. Built using ASP.NET as the core framework and supported by Bootstrap, jQuery, DataTables, Calendar.js, and SurveyJS, the system delivers a dynamic and interactive learning environment tailored to individual roles and organizational goals. Tracy enables employees to participate in training programs through two flexible approaches: self-learning, where employees can independently select courses based on their interests or required competencies, and manager-assigned training, where supervisors can assign specific learning modules relevant to each team member's role. The system features an intuitive dashboard where managers and supervisors can easily monitor training progress, track completion rates, and assess competency levels through built-in quizzes and surveys. Using Calendar.js, training sessions and deadlines are clearly organized and visually displayed, helping both employees and managers stay on top of schedules. SurveyJS powers customizable quizzes and assessments, allowing for accurate measurement of learning outcomes. The integration of jQuery and DataTables ensures smooth interactions and efficient data management throughout the platform. Overall, Tracy provides a structured yet flexible learning experience that supports continuous professional development, fosters accountability, and aligns training initiatives with business objectives.
Hearme
A mobile application designed to provide users with a safe and accessible platform to engage in conversations with a psychology-focused chatbot. The app aims to support mental well-being by offering empathetic and intelligent interactions that simulate speaking with a real counselor. On the backend—where my primary focus was—I developed a robust system using Flask to handle all server-side logic and data processing. The Flask backend securely connects to a PostgreSQL database to store user inputs, session histories, and emotional response data, ensuring reliable data management and future analysis. Additionally, the system integrates seamlessly with a machine learning model tailored for psychological conversation, enabling the chatbot to understand user emotions and provide context-aware, supportive responses. The architecture is designed to be scalable and secure, using RESTful APIs for smooth communication between the mobile frontend and the backend services. This backend infrastructure not only powers the intelligent dialogue experience but also ensures that all data interactions are handled efficiently and safely, offering users a smooth, responsive, and emotionally aware experience within the Hearme app.
GLAD
Redesigned laboratory dashboard project focused on enhancing user experience (UX) and visual engagement through a modern and intuitive interface. The system was rebuilt using HTML, CSS, and Bootstrap to ensure a responsive layout and consistent styling across devices, while GSAP (GreenSock Animation Platform) was integrated to bring smooth, dynamic animations that elevate the overall user interaction. The main goal of GLAD was to transform a previously static and outdated dashboard into a visually appealing and user-friendly platform that allows laboratory staff to navigate data, monitor activities, and access critical information more efficiently. Every element—from the layout structure to button transitions and page interactions—was carefully crafted to provide a clean and professional look while maintaining functionality. The use of animations through GSAP not only improves the aesthetic appeal but also guides user attention to key actions and data points, making the system feel more interactive and engaging. By focusing on both usability and design, GLAD successfully delivers a more enjoyable and productive user experience for laboratory professionals.
Ecoloops
An innovative API-based system designed to promote environmental sustainability by leveraging machine learning to detect waste from images and encourage recycling through a reward-based approach. The platform allows users to upload images of waste, which are then processed by an integrated machine learning model to identify the type of waste—such as plastic, metal, paper, or organic. Based on the detection results, users receive reward points and personalized suggestions on how to properly recycle the items. My primary responsibility in this project was developing the backend system, where I used Python and Flask to handle core logic, process image inputs, and establish seamless communication with the machine learning model. Additionally, I utilized Express.js to structure RESTful APIs and MySQL for secure and efficient data storage, including user profiles, reward points, and recycling history. The backend is designed for scalability and real-time performance, ensuring quick responses and accurate feedback to users. Overall, EcoLoops delivers a meaningful user experience by combining environmental awareness with interactive technology, encouraging users to make smarter, more sustainable decisions in their daily lives.
05. Contact