# Abdul Malik URL: https://up2dul.dev/ ## Abdul Malik URL: https://up2dul.dev/cv/ Professional CV of Abdul Malik, Software Engineer. # Abdul Malik Frontend Engineer hello@up2dul.dev · up2dul.dev · Indonesia ## Experience * ### Frontend Engineer Sep 2024 - Present [Luarsekolah(opens in new tab)](https://luarsekolah.com) * Revamped the main product app (\`luarsekolah.com\`) using Next.js, TypeScript, and Tailwind to improve maintainability, performance, and technical SEO, increasing Core Web Vitals scores from 10-33 to 60-100. * Led development of frontend core dashboard for a B2B AI product platform using React, Vite, TypeScript, and TanStack Query/Table, enabling scalable feature development and reusable UI components pattern. * Evaluated and researched tooling and architectural approaches to support upcoming AI-based features, informing technical decisions for future product iterations. * ### Frontend Engineer Mar 2025 - Jun 2025 [Redooceit(opens in new tab)](https://redooceit.com) * Revamped the company profile and CMS using Next.js, TypeScript, Tailwind, and Sanity CMS to improve page load performance and enable non-technical teams to manage blog content from the CMS. * Developed a role-based waste management dashboard using React, Vite, TypeScript, and TanStack Query/Table to support operational workflows for admins and waste operators, improving coordination with customers. * Built the CI/CD pipeline and self-hosted GitHub Actions workflows for the entire app stack, including the company profile, CMS, and dashboard frontend/backend, improving deployment speed and reliability. * Optimized the company profile and CMS build pipeline, reducing build time from ~8-12 minutes to ~4 minutes, increasing developer iteration speed. * ### Frontend Developer May 2023 - Aug 2024 [Svara(opens in new tab)](https://svara.id) * Maintained and extended an internal analytics dashboard using Next.js, TypeScript, React Query, and Material UI to support data-driven decision-making across internal teams. * Set up GitLab CI/CD pipelines to streamline build and deployment workflows, reducing manual release effort and improving developer productivity. * Designed and delivered a 7-week frontend internship curriculum, from Web fundamentals to React and Next.js, with practical assignments. Improved onboarding efficiency and technical readiness of new internship hires. * ### External Code Reviewer Apr 2023 - Mar 2026 [Dicoding(opens in new tab)](https://dicoding.com) * Reviewed and provided solutions and suggestions to student submissions (assignments) across several courses according to specific course objectives. * Supported course forums by helping answer questions and providing technical and non-technical solutions to students facing difficulties. ## Education * ### Bachelor's Degree of Informatics Sep 2023 - Present [Telkom University(opens in new tab)](https://telkomuniversity.ac.id) ## Skills ### Frontend HTML, CSS, Accessibility (A11y), WCAG, TypeScript, JavaScript, React, Next.js, Vite, Vue, Astro, Tailwind, Shadcn, Chakra UI, Ant Design, React Router, Redux, Zustand, TanStack, Vitest, Playwright ### Backend Node.js, Express, SQL, ORM, Strapi CMS, Python, FastAPI, OpenAI SDK ### DevOps & Tools Git, Figma, GitHub Actions, GitLab CI, Docker, Turborepo, Moonrepo, Linux, GCP, Nginx --- ## Abdul Malik URL: https://up2dul.dev/ Abdul's personal site — frontend engineering, design, and writings. # Abdul Malik Frontend Engineer I'm a frontend engineer based in Indonesia with over 3 years of experience. I craft pleasant, performant, and accessible web products with intention, thinking about both user experience and code that's maintainable. [View CV](/cv)[View Projects](/projects) ![Scenery illustration](/_astro/scenery.DznRVYrm_29aY2N.webp) ## Experience * 2024 — Current Frontend Engineer at [Luarsekolah(opens in new tab)](https://luarsekolah.com) Full-time * 2025 — 2025 Frontend Engineer at [Redooceit(opens in new tab)](https://redooceit.com) Volunteer * 2023 — 2024 Frontend Developer at [Svara(opens in new tab)](https://svara.id) Full-time * 2023 — 2026 External Code Reviewer at [Dicoding(opens in new tab)](https://dicoding.com) Part-time ## Now * Pursuing a bachelor's degree in Informatics * Available for new full-time or part-time opportunities ## Contact * Email[hello@up2dul.dev](mailto:hello@up2dul.dev) * GitHub[up2dul(opens in new tab)](https://github.com/up2dul) * 𝕏 (Twitter)[up2dul(opens in new tab)](https://x.com/up2dul) * LinkedIn[up2dul(opens in new tab)](https://linkedin.com/in/up2dul) --- ## Diotomasi.ai URL: https://up2dul.dev/projects/diotomasi-ai/ Diotomasi.ai — a project by Abdul Malik. # Diotomasi.ai Accomplished in January 2026 * React * Vite * TypeScript * React Router * TanStack * Tailwind * Zustand * i18n * Motion * Docker * ![Diotomasi.ai screenshot 1](/_astro/diotomasi-ai-1.BCI8t0N3.webp) * ![Diotomasi.ai screenshot 2](/_astro/diotomasi-ai-2.CXZi6kkD.webp) * ![Diotomasi.ai screenshot 3](/_astro/diotomasi-ai-3.Cu0YH7NK.webp) [Visit App(opens in new tab)](https://diotomasi.ai) ## Overview A SaaS product by Luarsekolah: AI-powered automation platform that enables companies to streamline and optimize their business operations through intelligent, conversational workflows. I worked as a Frontend Engineer on a cross-functional team consisting of me, two Backend Engineers, one QA engineer, one Product Designer, and one Product Manager. ## Purpose Our team ambitious vision was to build an AI-enabled platform that would transform how businesses operate by removing friction from their workflows and empowering teams to focus on high-value work instead of repetitive tasks. ## What I Did I led the frontend development of the product platform. I was responsible for the user interface where users manage AI agents and workflows. My work included: * Established reusable UI component patterns and data-fetching strategies that would enable other developers to add features without architectural friction in the future. * Researched AI optimization, best practices, and emerging AI tools to inform how we would integrate AI capabilities into the platform. * Researched competitor products to understand how other teams solved AI multi-agent management and dashboard design for automation. This research informed our architectural decisions and the business model. --- ## Elgoritma URL: https://up2dul.dev/projects/elgoritma/ Elgoritma — a project by Abdul Malik. # Elgoritma Accomplished in March 2026 * Astro * React * TypeScript * Tailwind * shadcn/ui * Motion * i18n * A11y * WCAG * ![Elgoritma screenshot 1](/_astro/elgoritma-1.z9tZwFyL.webp) * ![Elgoritma screenshot 2](/_astro/elgoritma-2.LGoxco7H.webp) * ![Elgoritma screenshot 3](/_astro/elgoritma-3.TBfrq6eV.webp) [Visit App(opens in new tab)](https://elgoritma.com) ## Overview Elgoritma (PT Elgoritma Utama Indonesia) is a technology and software consulting company specializing in building scalable digital solutions and enterprise applications. As a sub-company of Luarsekolah, Elgoritma had already completed 14+ significant projects across industries. ## Purpose Despite successfully delivering a number of major enterprise projects, Elgoritma had no web presence to showcase its work or build credibility. The goals was to create a fast, SEO-optimized company profile with a compelling case study showcase, enabling prospective clients to discover the company and trust its ability to deliver at scale. ## What I Did I led the development of Elgoritma’s company profile, collaborating closely with a UI/UX designer to bring the visual direction to life. My work included: * Designed and built case study showcase structure that presents 14+ major enterprise projects with compelling presentation. * Implemented bilingual support (English/Indonesian) with seamless language switching and localized content. * Implemented WCAG AA accessibility standards throughout the site, including semantic HTML, keyboard navigation, and full screen reader support. * Set up GitHub Actions pipeline to automate deployment. --- ## Projects URL: https://up2dul.dev/projects/ A collection of shipped product applications by Abdul Malik. # Projects A selection of projects that I have worked on. * [ ![Diotomasi.ai](/_astro/diotomasi-ai-1.BCI8t0N3_1Bifok.webp) ## Diotomasi.ai January 2026 ](/projects/diotomasi-ai) * [ ![Elgoritma](/_astro/elgoritma-1.z9tZwFyL_ANVML.webp) ## Elgoritma March 2026 ](/projects/elgoritma) * [ ![Qalbwise](/_astro/qalbwise-1.-EcAjV15_Z5RofT.webp) ## Qalbwise May 2026 ](/projects/qalbwise) * [ ![Redooceit](/_astro/redooceit-1.CP47vha2_ZftIDg.webp) ## Redooceit June 2025 ](/projects/redooceit) --- ## Qalbwise URL: https://up2dul.dev/projects/qalbwise/ Qalbwise — a project by Abdul Malik. # Qalbwise Accomplished in May 2026 * Monorepo * OpenAI * MCP * Docker * Python * FastAPI * PostgreSQL * React * TypeScript * TanStack * Tailwind * ![Qalbwise screenshot 1](/_astro/qalbwise-1.-EcAjV15.webp) * ![Qalbwise screenshot 2](/_astro/qalbwise-2.wYMAAEg9.webp) * ![Qalbwise screenshot 3](/_astro/qalbwise-3.BLfCSicD.webp) [Visit App(opens in new tab)](https://qalbwise.app)[View Source(opens in new tab)](https://github.com/qalbwise/app) ## Overview A topic-first Quran discovery app that helps users to find relevant Quranic verses in seconds, not minutes or even hours. Built by a three-person team: me (Fullstack and DevOps Engineer), another one Fullstack Engineer, and one Product Designer. ## Purpose We started this project for the Quran Foundation Hackathon 2026 with a clear theme: helping users connect more deeply with the Quran. We realized something simple: when someone is anxious, depressed, lonely, or struggling, they need support immediately, not after spending hours researching and curating verses. As Muslims, we felt responsible to build something that could help. ## What I Did I initiated and led the technical development. I built core features on both the frontend and backend. Beyond the code itself, I set up the project repository and established a monorepo architecture to keep our codebase organized and scalable. I introduced code quality standards including linting and formatting to maintain consistency across the project. I configured CI/CD with GitHub Actions to automate deployment to my own server. I also integrated analytics and monitoring tools to track app status and user behavior. --- ## Redooceit URL: https://up2dul.dev/projects/redooceit/ Redooceit — a project by Abdul Malik. # Redooceit Accomplished in June 2025 * React * Next.js * Sanity CMS * TypeScript * Tailwind * Zustand * Motion * Docker * Nginx * ![Redooceit screenshot 1](/_astro/redooceit-1.CP47vha2.webp) * ![Redooceit screenshot 2](/_astro/redooceit-2.C1XfvtAW.webp) * ![Redooceit screenshot 3](/_astro/redooceit-3.8wZYZ1yK.webp) [Visit App(opens in new tab)](https://redooceit.com) ## Overview An end-to-end digital solution for managing household and organizational food waste. I worked as a volunteer on an engineering team of one CTO, three Frontend Engineers (including me), two Backend Engineers, and one DevOps Engineer (also me). ## Purpose Indonesia faces a critical food waste crisis. Millions of tons of food are wasted each year while many people still struggle with hunger. Redooceit tackles this by digitizing the entire waste management process, so making it easier for businesses and households to handle food waste responsibly. ## What I Did I led the development across the product’s frontend, and DevOps infrastructure. My work included: * Migrated the company profile to Next.js + Sanity CMS, enabling the content team to manage updates independently through the CMS without engineering bottlenecks. * Created a waste management dashboard that unified operational workflows for admins and waste operators, replacing scattered spreadsheets with a single reliable tool. * Architected the entire DevOps infrastructure (GitHub Actions, DNS, Docker, Nginx) and optimized the build pipeline, reducing deployment time from 8–12 minutes to 4 minutes, which accelerated team velocity and feature shipping. --- ## Trying Biome as the next code linter and formatter URL: https://up2dul.dev/writings/biome-as-the-linter-and-formatter/ An alternative for ESLint and Prettier March 2024·4 min read # Trying Biome as the next code linter and formatter An alternative for ESLint and Prettier * tutorial # Intro As a software developer, our primary task is to write code, and it is not just about writing it so that the program runs well. We also need to ensure that the code we write is clean, which means we must pay attention to things such as giving variable names, removing unused code, and maintaining consistency. While a developer can manually keep the code clean, it can be difficult when there is a lot of code to write, and when we working with a team. ![](https://miro.medium.com/v2/resize:fit:800/0*jnjuUq6sSpXElmRp.jpeg) > Note: the topic we will talk about in here is not really cover/represent about “clean code”, there are a lot another things about clean code outside. This is where tools like code linters and formatters come in handy. As developers who use JavaScript especially, we must already know about ESLint and Prettier. Both of these are popular tools that useful in keeping our codebase clean and consistent. With **ESLint** we can trace syntax errors, logic errors, get code suggestions, etc, based on the ESLint rules that we already config. While **Prettier** is used for formatting our code which includes the semicolon usable, tab indentation, quotes usable, trailing comma, etc, it is based on our Prettier configuration as well. In the project, we can use one of them or even combine both of them. # About Biome In August 2023, there was another code linter/formatter tool released, it’s named Biome, so it’s what we will talk about. ![Biome home page](https://cdn.hashnode.com/res/hashnode/image/upload/v1711563997935/1d8ffb10-b389-4770-ab7e-cfd4bf3c61a6.png) > Fun fact: the first logo of Biome was looks like same with [Remix](https://remix.run) logo XD. ## What is this? > **Biome is a** [**fast formatter** for _JavaScript_](https://github.com/biomejs/biome/tree/main/benchmark#formatting), _TypeScript_, _JSX_, and _JSON_ that scores [**97% compatibility with _Prettier_**](https://console.algora.io/challenges/prettier), [**saving CI and developer time**.](https://console.algora.io/challenges/prettier) > > **Biome is a** [**performant linter**](https://github.com/biomejs/biome/tree/main/benchmark#linting) for _JavaScript_, _TypeScript_, and _JSX_ that features [**more than 200 rules**](https://biomejs.dev/linter/rules/) from ESLint, typescript-eslint, and [other sources](https://github.com/biomejs/biome/discussions/3). That’s two main points that I quote from the [official site](https://biomejs.dev). So basically Biome is a JavaScript/TypeScript linter and formatter same as ESLint and Prettier, yeah so Biome alone does a thing that ESLint and Prettier do, and it is built on **Rust**. ## Reasons to use it Before trying to use it, let’s get to know why we should try it, and maybe make it an ESLint and Prettier alternative for our development. ### Better performance Biome has a better performance on linting and formatting code, yup, as I mentioned below, Biome is built on 🦀 Rust. And then.., I don’t know how to describe this anymore tbh. ### Some pre-configured rules If you have used ESLint and Prettier before, you know there are a lot of plugins to do simple things such as TypeScript, React plugins, or import sorter from Trivago. So Biome came in already with some useful top-level config options such as some I mentioned before, which are TypeScript, React, and import sorter. ### IDE/Text editor integrations ![Biome extension on Visual Studio Code](https://cdn.hashnode.com/res/hashnode/image/upload/v1711565398087/3a4c5c15-e039-4142-bbc2-faac6bc36beb.png) Biome already has an official integration/plugin with Visual Studio Code and IntelliJ IDEA, and a plugin that is maintained by communities for some other editors such as Neovim, Emacs, Helix, and Sublime Text. Get to know more about this [here](https://biomejs.dev/guides/integrate-in-editor/). # Getting started “Talk is cheap, show me the code demo”, let’s try to use it. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1711587816655/0054df29-22a5-41e2-a10b-f33ad6d7a223.png) Here I will use the basic React Vite app for the implementation. ## Install Biome So, first of all, install the Biome itself as the development dependencies, here I will use [PNPM](https://pnpm.io) as the package manager. ``` pnpm add --save-dev --save-exact @biomejs/biome # if using NPM npm i --save-dev --save-exact @biomejs/biome # if using Yarn yarn add --dev --exact @biomejs/biome ``` > `--exact` will resolve the version of the package and add it to your `package.json` with an exact version number instead of a version range. ## Init configuration file Now create a Biome configuration file by running the init command. ``` pnpm biome init # if using NPM npx @biomejs/biome init # if using Yarn yarn biome init ``` After running that command, now we will have `biome.json` a file in our root project directory. The file will contain this code: ``` { "$schema": "https://biomejs.dev/schemas/1.6.3/schema.json", "organizeImports": { "enabled": true }, "linter": { "enabled": true, "rules": { "recommended": true } } } ``` ## Usage After initiating the configuration file, now we can use it. There are three main commands. 1. Format files. ``` pnpm biome format --write # if using NPM npx @biomejs/biome format --write # if using Yarn yarn biome format --write ``` 2. Lint files. ``` pnpm biome lint # if using NPM npx @biomejs/biome lint # if using Yarn yarn biome lint ``` 3. Run both format and lint. ``` pnpm biome check --apply # if using NPM npx @biomejs/biome check --apply # if using Yarn yarn biome check --apply ``` To make it easier, let’s just add those commands into `"scripts"` in the `package.json`. So the `package.json` file would look like this: ``` { // ... "scripts": { // ... "format": "biome format --write ./src", "lint": "biome lint ./src", "check": "biome check --apply ./src" } // ... } ``` So now we just run these commands easily. Go [here](https://biomejs.dev/reference/configuration/) for the advanced configurations. # Development status The latest minor release of Biome came on 8 March 2024, which is version [1.6.0](https://github.com/biomejs/biome/releases/tag/cli%2Fv1.6.0). It has some changes, such as “Partial support for Astro, Svelte, and Vue files” and some new rules. So it’s good news for developers who casually use Astro, Svelte, and Vue. # Conclusion Now should we use Biome and fully replace ESLint and Prettier? 1. It depends, currently, I use it for my project only, if you are going to use it on your work project, maybe you can discuss it with your team. 2. If there is an ESLint or Prettier plugin rule that always you use and is not available yet on Biome, then you can just use ESLint with Prettier. And maybe there are other reasons to think about it. So that’s it, thank you ✨. # References * [https://biomejs.dev](https://biomejs.dev/) * [https://youtu.be/KI7mbm-BxqA?si=h16A0ZJYntzfGzZJ](https://youtu.be/KI7mbm-BxqA?si=h16A0ZJYntzfGzZJ) --- ## A Guide to Contributing to an Open Source Projects URL: https://up2dul.dev/writings/guide-to-contributing-to-an-open-source/ Start contributing something to an Open Source Project/Software that you found July 2023·5 min read # A Guide to Contributing to an Open Source Projects Start contributing something to an Open Source Project/Software that you found * tutorial ## What is Open Source? From Wikipedia, this is what we get about Open Source: > **Open-source software** (**OSS**) is [computer software](https://en.wikipedia.org/wiki/Software) that is released under a [license](https://en.wikipedia.org/wiki/Open-source_license) in which the [copyright](https://en.wikipedia.org/wiki/Copyright) holder grants users the rights to use, study, change, and [distribute the software](https://en.wikipedia.org/wiki/Software_distribution) and its [source code](https://en.wikipedia.org/wiki/Source_code) to anyone and for any purpose. In simpler terms, it means that the software’s underlying code is made accessible to the public, and anyone is allowed to view, modify, and share it. ## Why contribute to Open Source? By contributing to the project, we can help the community who made it and so many peoples who used the project, and your contribution history can be a valuable addition to their portfolio. We can even contribute some simple things such as typos, grammatical errors, or docs addition, so not every contribution should be a code change. ## Pre-requisite You only need to know about the basic of [git](https://git-scm.com/) such as cloning, push, and pull. And already have a GitHub or another git platform account. ## Finding the project to contribute Selecting a project that aligns with your interests and expertise is essential. Look for projects that you use or find interesting. To explore different projects, you can browse them on popular platforms like GitHub, GitLab, and Bitbucket. ### Example Recently I am on learning and exploring Jotai state management at [tutorial.jotai.org](https://tutorial.jotai.org) (_an Official interactive Jotai tutorials website_) and found something wrong with the sentences, so here I will use this as an example to contribute because it was open source too. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690104010777/ec40f301-517a-4106-b8da-b5d2878c0340.png) I captured this from [tutorial.jotai.org/quick-start/theme-setting](https://tutorial.jotai.org/quick-start/theme-setting) which is one of the pages on the website, something’s wrong, right? Yeah, there are some grammatical errors, especially the “for you app” sentence, this is what I want to fix, so let’s just get started. > FYI: [Jotai](https://jotai.org) is one of the popular state management libraries for React app. ## Get in touch with the project source So, after finding the project that would we contribute to, let’s open the source of the project. For this case, it is [github.com/jotaijs/jotai-tutorial](https://github.com/jotaijs/jotai-tutorial). ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690104628024/a0d1203c-0940-4d78-82b0-f37de215517b.png) > It is a Next.js project, if you don’t know about Next.js it doesn’t matter, because it is only for example. ### Know what to change Make sure we know what we will change through the project codebase. In my case, it is in [~/app/quick-start/theme-setting/markdown.ts](https://github.com/jotaijs/jotai-tutorial/blob/main/app/quick-start/theme-setting/markdown.ts). ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690106939520/c94da8a6-112b-4819-926c-4883df8b66e3.png) Yup, that is the code that shows the grammatical errors. ### Contribution guidelines Getting to know about project contribution guidelines is one of the important parts. We should read and understand the contribution guidelines of the open source project we want to contribute to which is usually listed in the file `CONTRIBUTING.md`. Here is an example: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690113125710/b6bc89ac-9409-423c-8575-05af38a79fcf.png) The file usually contains “**How to contribute”**, “**Code of Conduct”, “Branching and Versioning”**, and “**Coding Standards and Style Guidelines”.** ## Start to make a changes > I will use GitHub because the project that I am exemplifying is on GitHub. So if the project you are going to contribute is on another platform like GitLab or Bitbucket, that’s fine. ### Fork the repository On the project repository page, click the “**Fork”** button. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690115541859/abe7ff23-19ba-46fd-a4be-d101582c45ce.png) In this step, we can create a new name or description of the repository. But I will change nothing, so in this step, I will immediately click the “**Create fork**” button. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690115408452/4cab23c6-c5e0-44c7-8dad-825caa0f8fbf.png) So here is my repository that forked from [github.com/jotaijs/jotai-tutorial](https://github.com/jotaijs/jotai-tutorial). ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690115876876/40e88cf6-b36b-4188-9e67-3f540a4848a9.png) ### Clone the forked repository Now on the forked repository clone the git repository to local. Copy the git URL. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690120879926/b1abfb94-1ff1-48d4-b967-3ef8f263ed5a.png) Open the local directory for the project to the terminal, run `git clone `, in here I pass the folder name to “jotai-tutorial”. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690121720577/ea32dd0e-9755-4fa6-a20f-00b02fd50d44.png) And then open the project using code editor, I will use [Visual Studio Code](https://code.visualstudio.com). ### Make a changes Because we already know what would we change, so just make the changes now using code editor. ![Before and after changes](https://cdn.hashnode.com/res/hashnode/image/upload/v1690123788621/827d6541-a05a-431b-ad49-7f2cb668bdb6.png) Those are the changes I have been working on. Left (before) and right (after). ### Push the changes After we make the changes now create a new branch. Why did we create a new branch instead of using the main (`main`) branch? it’s keeping the `main` branch clean. So in this case, I will create a new branch named `fix/theme-switcher-grammar` by running this command: ``` git checkout -b fix/theme-switcher-grammar ``` By running the command, we also automatically moved to the new branch. Then now I will commit the changes. Then add the changes to the staging and commit. ``` git add . git commit -m "fix: grammatical errors in theme switcher page instructions" ``` And now push the new branch with changes to the fork on GitHub. ``` git push origin fix/theme-switcher-grammar ``` > For the branch name and commit message, make sure we provide clear naming/message and related to what we change. ### Back to the GitHub Then if we back to the forked repository, there is will appear a notification like this with the button “**Compare & pull request**”, and now let’s click the button because we want to make a pull request. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690125394066/460a8865-426a-4d8c-99b9-f0ee5bf071e0.png) Then we will get directed to the pull request page, we can fill the pull request title and description well. Make sure we fill in the title according to the context of the changes we make. In my case, I fill the title “Fix grammatical errors in theme switcher page instructions”, and would be better if we provide the screenshots for the changes we make. If it’s done, then we click the “**Create pull request**” button. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690128383671/f2418da6-2a6b-447b-84b1-be1a906489db.png) And done. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690128462215/28c8df3e-8401-4402-a18a-efab4b8b5aed.png) Now we need to wait for the review from the project maintainer, if it is approved it will be merged by them, otherwise, if there are still errors or something wrong then usually they will comment and tell us to improve the changes we made. ## Conclusion Contributing to open source projects is one of the ways that allows we to make a positive impact on the software community. By choosing the right project, engaging with the community, and submitting meaningful contributions, we can become an active part of the open source movement and advance our coding skills to new heights. --- ## Writings URL: https://up2dul.dev/writings/ Tutorials, guides, and thoughts on frontend engineering by Abdul Malik. # Writings Addy Osmani once said "Write about what you learn. It pushes you to understand topics better." * March 2024 ## [Trying Biome as the next code linter and formatter](/writings/biome-as-the-linter-and-formatter) 4 min read * July 2023 ## [A Guide to Contributing to an Open Source Projects](/writings/guide-to-contributing-to-an-open-source) 5 min read * May 2023 ## [Introduction into Chakra UI](/writings/introduction-into-chakra-ui) 3 min read --- ## Introduction into Chakra UI URL: https://up2dul.dev/writings/introduction-into-chakra-ui/ Get to know about Chakra UI, why to use it, and how to use it on React project May 2023·3 min read # Introduction into Chakra UI Get to know about Chakra UI, why to use it, and how to use it on React project * tutorial > Want to read in **Bahasa Indonesia** version? here you go: [https://medium.com/@up2dul/chakra-ui-0-perkenalan-b493f059ebe1](https://medium.com/@up2dul/chakra-ui-0-perkenalan-b493f059ebe1) ## What is Chakra UI? From the official website, this is what we get about Chakra UI: > Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. So Chakra UI is one of the most popular React UI Component libraries. Chakra UI provides some built-in components that are ready to use, so this is a solution for those who don’t want to create React components manually from scratch. There are some other React UI components such as [Material UI](https://mui.com/), [Mantine](https://mantine.dev), and [Ant Design](https://ant.design/), but in this article, we will only learn about Chakra UI and not compare them. ## Why use Chakra UI for React project? ### Built-in accessibility Chakra UI provides components that are designed with accessibility in mind and provides built-in support for common accessibility features such as screen reader compatibility and keyboard navigation. This makes it easier for developers to create accessible interfaces without having to implement these features from scratch. Get to know more about website accessibility: [https://chakra-ui.com/blog/the-beginners-guide-to-building-an-accessible-web](https://chakra-ui.com/blog/the-beginners-guide-to-building-an-accessible-web). ### Custom hooks When developing a website using React, we are always faced with a situation where we need custom hooks, and the great thing is, Chakra UI also provides utility custom hooks that are so useful, such as `useBoolean`, `useClickOutside`, and `useClipboard`. We don’t need to install anything more, so just import the hooks that we want from `'@chakra-ui/react'`. ![Chakra UI custom hooks](https://cdn.hashnode.com/res/hashnode/image/upload/v1683023357691/c860c04e-dae1-41c4-a524-76e7488f7e1e.png) ### Active community Chakra UI has an active and supportive community of developers who contribute to the development and provide support. This makes it easier to get help and find solutions to common problems. ## Start using Chakra UI on the project > I don’t provide the step for generating React project from scratch in this part, so if want to follow make sure you already have a React project using [CRA](https://create-react-app.dev/), [Vite](https://vitejs.dev/), [Next.js](https://nextjs.org), or anything else. So in the project directory, open the terminal and install Chakra UI along with some additional libraries. We can use [npm](https://www.npmjs.com/), [yarn](https://yarnpkg.com/), or [pnpm](https://pnpm.io/) to install it. ``` # npm npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion # yarn yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion # pnpm pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion ``` After that, we can add the Chakra UI component provider to the root of the application project, for example here is a file called `App.jsx` as an application root in the `src` folder. ``` // ~/src/App.jsx import { ChakraProvider } from '@chakra-ui/react'; const App = () => { return ( ); }; ``` If we use Next.js, then will be like this: ``` // ~/pages/_app.jsx import { ChakraProvider } from '@chakra-ui/react'; const MyApp = ({ Component, pageProps }) => ( ); export default MyApp; ``` So in essence, please adjust it according to the project folder structure used. And then we can import the component that we want from Chakra UI. This is the example if we use Next.js: ``` // ~/pages/index.jsx import Head from 'next/head'; import { Box, Button, Heading, Text } from '@chakra-ui/react'; const Home = () => ( <> Hello Chakra UI Hello world Welcome to Chakra UI ); export default Home; ``` > Go to [https://chakra-ui.com/docs/components](https://chakra-ui.com/docs/components) to see the component list. So the result will be like this: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683117978118/eeb85714-39ee-4e96-9a73-d42899260f1c.png) ## Conclusion Finally, we got to know what is Chakra UI, and why to use it, and we have had success installing it to our project. You can explore the other components and or even implement them in your React project. With such good documentation and active community from the developers and the users, so we don’t need to worry about using it. ## References * [https://chakra-ui.com/](https://chakra-ui.com/) * [https://chakra-ui.com/blog/the-beginners-guide-to-building-an-accessible-web](https://chakra-ui.com/blog/the-beginners-guide-to-building-an-accessible-web)