Frontend Portfolio

Hello! Here are some of my previous frontend works that I can share! I work mainly using ReactJS paired with various UI libraries/frameworks such as TailwindCSS, MUI, or Ant Design.
Find more of my projects on my Github!

Dunia Belanja

Dunia Belanja was an internship project for the Advanced Software Laboratory at Telkom University. It was built with ReactJS and Tailwind CSS. It was one of the first time I worked in a team with a UI designer, my objective at the time was to ensure I implemented the design accurately, ensuring the style and impact of the source design was properly implemented while also ensuring the design stays responsive on various devices.
The sources for this project is available at: https://github.com/misaalanshori/DuniaBelanja-frontend

Tanda Tangan Elektronik

Tanda Tangan Elektronik (Electronic Signature System) was a project made for CAATIS, a Center of Excellence in Telkom University. It is a ReactJS frontend with MUI, integrated into a Laravel project via InertiaJS. It is very much a functionality first interface, utilizing the simple minimal design language of Material Design. It was one of my first real projects, with real users within the CAATIS CoE.
The essential feature of the system is a QR-based digital signature placement system. This allowed users to visually position and resize one or more signature anywhere on the document. This was achieved by using react-rnd for the draggable and resizeable signature and react-pdf for rendering the pdf below it. Some canvas math was used to allow the PDF to be updated (via pdf-lib) to actually embed the signatures as positioned by the user on the PDF.

ASELab

This is on the older side and was a university project. A landing site and management system for the Advanced Software Engineering Laboratory, created using Preact (A smaller ReactJS alternative with a compatible API) and Tailwind. While it is a group project, I worked on the general project structure including the main Homepage and Room Scheduling system. One of my most interesting contribution here is the custom calendar component, allowing the display of date ranges.
The sources for this project is available at: https://github.com/WKLD-Labs/frontend