Muhammad Mugni Hadi
Frontend Developer
Profile
Gunadarma University Bachelor Graduate in 2018 with Computer Science degree. I'm interested with web technologies & being problem solver. Experienced as Frontend Developer with JavaScript framework such as React or Vue. Currently developing website mainly with NextJS, an SSR framework for React. Sometimes taking side projects for increasing experience and chance for learn various technologies.
Employment History
Frontend Web Engineer, Rukita
Jun 2020 - Present, Jakarta
- Contribute to features development on rukita.co, a Coliving kost, more than just a regular kost, Rukita coliving kost offers a modern design, full range of services and amenities, strategic location, and a warm and inviting community living under one roof.
- All of the frontend web product currently uses Next.JS with TypeScript so I'm quite experienced using Next.JS (and just have learn to implement TypeScript ^^)
- Working with UI/UX Team to manifest their amazing design into well established implementation code.
- Currently, my work in Rukita is full remote so I already adjust myself to new WFH culture, keep the communication smoothly and discuss with other Engineer, or PM if there are concern/issue you want to talk about, everything is done through Slack/Google Meet
- Help implement creating global search feature from Frontend side with great User Experience kudos to the team
- Entrusted to create new web product called Rukita Dashboard (temporary) at https://partners.rukita.co, it is intended for Rukita's partnered landlord so they can see their tenant status
- Help refactor a lot of code, at first the site used to have a lot of wrong styling, spacing or any design provided by UI/UX Team, so I made it pixel perfect now ✨
- When I said refactor a lot of code, it's not just on CSS side, but on writing code & help research when updating some library that been used, I give my thought and search to my Lead Frontend and if he's okay it will be implemented. That includes when standarize the way to write code and the file structuring (even though it's still not the best)
- I gave them advice to use CSS-in-JS library such as styled-component or Emotion, since I think it have good DX (Developer Experience) but we still need to use scss since our design are based on Bootstrap, so we need to import them as .scss
- Project management is still using JIRA Atlassian, PM writes requirement documentation using Confluence, we also use that for other documentation like UI/UX Docs, Product Requirement, or Engineering Wiki, it also have blog feature so some of Engineer sometimes written article and share it there
- We use bitbucket for hosting the code, since it's included in one Atlassian product. Deployment are being taken care by our super DevOps, but in short we use EC instance from AWS and wrapped in Docker, we use Drone for CI/CD workflow with the help of ansible for the configuration
- Don't hesitate to ask me for more detailed workflow 😉
Frontend Developer, CIAYO
Nov 2018 - April 2020, Jakarta
- Assigned as someone who develop features and maintaining CIAYO Comics website. It use React library for the UI, and use Next.js for the framework. (https://www.ciayo.com, https://rewards.ciayo.com)
- Implements state management on the web app using React Context & Redux, such as storing user state authentication, user 'money' balance for purchasing comics or handling user interface conditional rendering (different UI for different state)
- Create a feature where I need to store information where the last position user read comic in certain chapters, and need to be consistent for every dimension for every device. It's possible using Web API Local Storage
- Create a logger feature when user read comic, the progress, what chapters and gives different styles to let the user know which chapter they already read, locally.
- Create ads implementation manually (Google Publisher Tags & MFun) since it needs some adjustment with React lifecycle and how their documentation works.
- Many more feature such applying logic flow when user purchase comics and updating the value, make it always sync with the backend, creating "Tokopedia Egg" like on homepage to engage user to click it and claim prizes. Bug fixing bugs on production based on task on JIRA, refactor old code when have time.
- Good CSS understanding, implements 'tricky' css to follow design from UI Team such as using pseudo-class :before or :after to add or put non-standard design.
- It use CSS Framework such as Foundation to help create the responsive design, and use CSS-in-JS Library like Styled Components, because it have nice styling scope & better developer experience.
- Project management is using JIRA, it use agile software development when we do planning sprint, design, develop, test & evaluate. Usually 1 sprint duration is around 2 weeks and a week for testing.
- All code are self-hosted on GitLab, I do understand how to use Git in general and I use SourceTree to help me manage branch easier especially when merging branch and have lot of conflicts. It also helps to implement Git Flow faster where we developing software on develop branch and when the development is done, I push it to staging server to let QA test it.
Education
Gunadarma University, Computer Science
Oct 2014 - Oct 2018, Depok
- I was an assistant in my major's lab in LEPKOM (Lembaga Pengembangan Komputerisasi) http://vm.lepkom.gunadarma.ac.id/
- I'm also a part of the technical/developer team for mostly doing the maintenance like the network, virtual machine or main server
Projects
Wibuverse
Jan 2020 - Present
An e-commerce platform for segmented indie market. This project is developed from scratch, the engineers only 2, 1 frontend (me) using React & 1 backend using Go. We handle all of the necessary things needed to setup a web app such as domain, VPS, webserver (nginx). all of the instance are wrapped with Docker container to manage things easier. The frontend also use Next.js on this one, I often experience new stuff here as well such as maximizing usage of Functional component instead of Class component, create script for automation when deploying or discussing features based on the mockup design. We use Trello for project management on this one & Zeplin for for hosting the design. The site is still on development and there's still a lot of bug but if you curious you can see the video showing a little bit around the website -> https://streamable.com/nraame
LifeLearn Platform Social
Nov 2019 - Feb 2020
I was part-time frontend for LifeLearn Social Portal with ReactJS, GraphQL, SCSS. It's not always available every month but so far I already implement few feature like Stripe payment integration with backend, optimizing user state management with React Context & bug fixing some issue when needed.