DEV Community: Dinh Hoang Duy

How to Create an Animated Button with Hover Sound in React

Dinh Hoang Duy — Fri, 06 Jun 2025 14:46:58 +0000

[TL;DR] Demo

Buttons are essential UI elements in any web application, but making them interactive and delightful can truly elevate the user experience. In this post, we’ll build a stylish React button component with a hover animation and sound effect when the user hovers over it.

By the end, you'll have a reusable button component with:

Smooth hover text animation
Optional icons (left and right)
A tick sound when hovered

🔧 Technologies Used

React
Tailwind CSS (for styling and animation)
HTML5 Audio API

📦 The Button Component

Below is the complete Button component you can copy into your React project.

import clsx from "clsx";
import { useEffect, useRef } from "react";

const Button = ({
  id,
  title,
  rightIcon,
  leftIcon,
  containerClass,
  hoverSound = "/audio/ui.mp3", // Sound file path
  hoverSoundAt = 0,
  children,
}) => {
  const audioRef = useRef(null);

  // Preload the hover sound
  useEffect(() => {
    if (hoverSound) {
      audioRef.current = new Audio(hoverSound);
      audioRef.current.currentTime = hoverSoundAt;
      audioRef.current.preload = "auto";
    }
  }, [hoverSound, hoverSoundAt]);

  // Play sound on hover
  const handleMouseEnter = () => {
    if (audioRef.current) {
      audioRef.current.currentTime = 0;
      audioRef.current.play();
    }
  };

  // Reset sound on mouse leave
  const handleMouseLeave = () => {
    if (audioRef.current) {
      audioRef.current.pause();
      audioRef.current.currentTime = 0;
    }
  };

  return children ? (
    <span
      id={id}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
    </span>
  ) : (
    <button
      id={id}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className={clsx(
        "group relative z-10 w-fit cursor-pointer overflow-hidden rounded-full bg-violet-50 px-7 py-3 text-black",
        containerClass
      )}
    >
      {leftIcon}

      <span className="relative inline-flex overflow-hidden font-general text-xs uppercase">
        <div className="translate-y-0 skew-y-0 transition duration-500 group-hover:translate-y-[-160%] group-hover:skew-y-12">
          {title}
        </div>
        <div className="absolute translate-y-[164%] skew-y-12 transition duration-500 group-hover:translate-y-0 group-hover:skew-y-0">
          {title}
        </div>
      </span>

      {rightIcon}
    </button>
  );
};

export default Button;

🎨 Styling Explained

We use Tailwind utility classes to achieve a sleek sliding animation for the button text:

<span className="relative inline-flex overflow-hidden font-general text-xs uppercase">
  <div className="translate-y-0 skew-y-0 transition duration-500 group-hover:translate-y-[-160%] group-hover:skew-y-12">
    {title}
  </div>
  <div className="absolute translate-y-[164%] skew-y-12 transition duration-500 group-hover:translate-y-0 group-hover:skew-y-0">
    {title}
  </div>
</span>

The first div moves up and skews on hover.
The second div takes its place from below, giving a smooth slide-in effect.

🔊 Adding Hover Sound

We preload and play the sound using the native Audio API:

const audioRef = useRef(null);
audioRef.current = new Audio(hoverSound);

This ensures the tick sound plays instantly on hover.

💡 Tip:

Make sure your audio file (ui.mp3) is placed correctly in the public/audio/ directory (or adjust the path).

✅ Usage Example

<Button
  title="Click Me"
  hoverSound="/audio/ui.mp3"
  leftIcon={<MyLeftIcon />}
  rightIcon={<MyRightIcon />}
  containerClass="bg-blue-200 hover:bg-blue-300"
/>

🚀 Final

This button is great for game UIs, modern websites, or any interface where tactile feedback enhances the experience. You can customize it further by changing:

The animation style
The sound file
The icon positions

📁 Resources

Happy coding! _duythenights 🔊💻✨

🐾 Class trong JavaScript – Tập 2: Khi mèo có siêu năng lực đặc biệt

Dinh Hoang Duy — Mon, 14 Apr 2025 04:57:17 +0000

Ở tập trước, bạn đã học cách tạo class, khởi tạo mèo, cho nó kế thừa siêu năng lực bay lên trời. Nhưng cuộc đời đâu đơn giản vậy. Lập trình class cũng như nuôi mèo: càng chăm lâu, càng phát hiện ra nhiều... thứ.

Vấn đề tiếp theo: Có thứ không muốn ai biết – Private Fields

Tưởng tượng bạn có một con mèo biết nói tiếng người (kinh dị thật - hoặc không nếu tên của nó là Doraemon). Nhưng bạn không muốn ai khác ngoài bạn biết điều đó. Bạn thử làm thế này:

class Meo {
  constructor(ten) {
    this.ten = ten;
    this.biMat = 'Tôi đến từ tiểu vương quốc Bình Chánh 69';
  }
}

Người khác có thể dễ dàng đọc meo.biMat và phát hiện ra bí mật động trời. Không ổn. Bạn cần một cách để giấu thông tin. Và thế là…

Giải pháp: Trường riêng tư – Private Fields (kèm hashtag)

Người thông minh như bạn chắc chắn nghĩ ra rằng: “Làm sao để thông tin này không bị lộ?”. JavaScript 2019 (ES2022) bảo bạn: Dùng dấu #, không phải để bắt trend TikTok, mà để đánh dấu private field:

class Meo {
  #biMat;

  constructor(ten) {
    this.ten = ten;
    this.#biMat = 'Tôi đến từ tiểu vương quốc Bình Chánh 69';
  }

  tietLo() {
    console.log(`${this.ten} thì thầm: ${this.#biMat}`);
  }
}

const meoLa = new Meo('MeoLa');
meoLa.tietLo(); // MeoLa thì thầm: Tôi đến từ tiểu vương quốc Bình Chánh 69
console.log(meoLa.#biMat); // ❌ Báo lỗi ngay lập tức

Bạn thấy chưa? Với #, bí mật của mèo được giấu kỹ như mật mã hạt nhân. Không hacker nào truy cập được – trừ chính class.

Vấn đề: Class đang phình to như... mèo Tết

Giờ bạn có một method tietLo(). Ổn đấy. Nhưng rồi bạn lại cần thêm:

một method keu() cho mèo gào lúc nửa đêm,
một method giaiMaBiMat() để truy cập thông tin,
một xoaBiMat() để... xóa dấu vết,
một ghiNhoBiMat() để cập nhật dữ liệu...

Và bạn bắt đầu cảm thấy class của mình như ổ bánh mì thịt bị nhét quá nhiều topping: hành, chả, đồ chua, rau răm, ớt, pate, nước sốt – đến mức cắn một phát là trào ra hết 🤤.

Bạn thở dài:
"Không lẽ cứ nhồi hết vào class như nhét hành vào bánh mì vậy sao?"

Lý do: Bạn đang thiếu một lớp kiểm soát tinh tế

Bạn muốn người ta tương tác với mèo một cách có kiểm soát:

Ai được phép đọc bí mật?
Ai được phép chỉnh sửa thông tin?
Và chỉnh sửa thì phải theo điều kiện gì?

Câu trả lời chính là getter và setter – như một lễ tân chuyên nghiệp đứng canh cửa. Không ai được vào mà không xin phép, và muốn chỉnh gì thì cũng phải qua vòng kiểm duyệt.

Giải pháp: Dùng Getter & Setter như vệ sĩ thân tín

Thay vì tạo hàng loạt method rời rạc cho từng hành động, bạn tổ chức lại class bằng các thuộc tính private, và bao quanh bằng getter/setter để:

bảo vệ dữ liệu bên trong
gộp logic lại thành những “cổng” rõ ràng, dễ bảo trì
giúp code gọn gàng, sang-xịn-mịn

class Meo {
  #ten;

  constructor(ten) {
    this.#ten = ten;
  }

  // Getter – cho đọc
  get ten() {
    return this.#ten;
  }

  // Setter – cho chỉnh sửa, nhưng phải hợp lệ
  set ten(giaTriMoi) {
    if (giaTriMoi.length < 2) {
      console.log('Tên quá ngắn, mèo meo!');
    } else {
      this.#ten = giaTriMoi;
    }
  }
}

const luna = new Meo('Luna');
console.log(luna.ten); // Luna
luna.ten = 'A';        // Tên quá ngắn, mèo meo!
luna.ten = 'MewMew';   // Được rồi!
console.log(luna.ten); // MewMew

Vấn đề lớn nữa: Mỗi class một kiểu viết – vậy mẫu chuẩn là gì?

Bạn nhìn mấy class dài dằng dặc và hoang mang: “Có cần viết tất cả trong constructor không? Method để đâu? Có nên chia file? Làm sao giữ code đẹp trai như chính mình?”

Giải pháp: Một mẫu "Class có gu" – chuẩn chỉnh như quần tây áo sơ mi

class Meo {
  #ten;
  #tuoi;

  constructor(ten, tuoi) {
    this.#ten = ten;
    this.#tuoi = tuoi;
  }

  get ten() {
    return this.#ten;
  }

  set ten(tenMoi) {
    if (tenMoi.length >= 2) this.#ten = tenMoi;
  }

  gioiThieu() {
    console.log(`Xin chào, tôi là mèo ${this.#ten}, ${this.#tuoi} tuổi`);
  }

  // static method – dùng mà không cần tạo instance
  static meoNgau() {
    console.log('Mèo ngầu không cần giới thiệu 🐱‍👤');
  }
}

// Dùng thử
const boss = new Meo('Boss', 5);
boss.gioiThieu();      // Xin chào, tôi là mèo Boss, 5 tuổi
Meo.meoNgau();          // Mèo ngầu không cần giới thiệu 🐱‍👤

Tổng kết tập 2: Khi bạn không chỉ nuôi mèo – bạn xây dựng hệ sinh thái mèo

Dùng # để tạo thuộc tính riêng tư, như ổ khóa két sắt.
get và set giúp bạn kiểm soát việc đọc/ghi dữ liệu – an toàn và linh hoạt.
static method là cách để tạo hành vi dùng chung mà không cần tạo object.
Một class “có gu” cần rõ ràng, dễ hiểu, không tham lam nhồi nhét.

Bạn thấy đấy, class trong JavaScript không chỉ là cú pháp – nó là một nghệ thuật. Và bạn – người viết class – là nghệ sĩ.

"Chào thân ái và quyết thắng"_duythenights

🐱 Class trong JavaScript – Tập 1: Khi lập trình cũng cần "thần thái"

Dinh Hoang Duy — Mon, 14 Apr 2025 03:39:18 +0000

Tưởng tượng bạn có một đống mèo. Mỗi con mèo đều có tên, tuổi, màu lông và sở thích là… làm chủ nhân của bạn. Thay vì mỗi lần tạo mèo mới lại phải viết đi viết lại cái đống đặc điểm đó, bạn thở dài và nghĩ: “Không lẽ cứ copy-paste mãi như thế này sao?”.

Chào mừng bạn đến với thế giới của Class trong JavaScript – nơi bạn có thể sản xuất mèo phiên bản chuẩn chỉnh mà không phải gõ lại từng dòng code như một con bot lập trình.

Vấn đề đầu tiên: Lặp lại code – cơn ác mộng của dân dev

Giả sử bạn tạo mèo thế này:

const meo1 = {
  ten: 'Tâm',
  tuoi: 3,
  mauLong: 'xam',
  keu: function() {
    console.log('Meooo');
  }
};

const meo2 = {
  ten: 'Gia Huy' // Ờ thì Gia Huy là chuột, nhưng kệ đi
  tuoi: 2,
  mauLong: 'trang',
  keu: function() {
    console.log('Meooo');
  }
};

Trông thì ổn, nhưng rồi bạn nhận ra: “Ủa, sao cái hàm keu mình lại viết y chang cho mỗi con mèo?”. Và rồi bạn bắt đầu thấy… mỏi tay.

Giải pháp: Class xuất hiện như một siêu anh hùng

Người thông minh như bạn chắc chắn sẽ nghĩ ra rằng: “Chắc JavaScript có cách nào giúp mình làm cái này gọn hơn chứ?”. Và đúng vậy, bạn đã chạm tới Class – nơi mọi con mèo đều được sinh ra từ một mẫu gốc hoàn hảo (blueprint).

class Meo {
  constructor(ten, tuoi, mauLong) {
    this.ten = ten;
    this.tuoi = tuoi;
    this.mauLong = mauLong;
  }

  keu() {
    console.log(`${this.ten} keu: Meooo`);
  }
}

const tom = new Meo('Tâm', 3, 'xám');
const jerry = new Meo('Gia Huy', 2, 'trắng');

tom.keu(); // Tom keu: Meooo

Chỉ cần định nghĩa một lần class, bạn có thể tạo bao nhiêu đối tượng (objects) tùy thích. Mèo cũng có quy trình sản xuất công nghiệp hẳn hoi.

Nhưng khoan! Một vấn đề khác xuất hiện: Tính kế thừa

Tưởng tượng giờ bạn muốn có một lớp MeoSieuNhan, ngoài kêu ra còn biết… bay (vì sao không?). Bạn không muốn viết lại toàn bộ constructor và keu vì bạn còn phải đi ăn trưa nữa.

Người thông minh như bạn chắc chắn sẽ nghĩ ra rằng: “Có kế thừa không nhỉ?”. Và vâng, có luôn!

class MeoSieuNhan extends Meo {
  bay() {
    console.log(`${this.ten} bay lên trời!`);
  }
}

const doraemon = new MeoSieuNhan('Doraemon', 2112, 'xanh dương');
doraemon.keu(); // Doraemon keu: Meooo
doraemon.bay(); // Doraemon bay lên trời!

Bạn thấy không? MeoSieuNhan kế thừa mọi thứ từ Meo, rồi cộng thêm năng lực đặc biệt của riêng mình. Không chỉ tiết kiệm thời gian, mà còn khiến bạn trông...ngầu hơn (hoặc ít nhất là người viết bài post này thấy vậy XD ).

Tổng kết tập 1: Lập trình có class, cuộc đời có style

Class giúp bạn định nghĩa cấu trúc chung cho đối tượng (object).
Dùng constructor để khởi tạo thông tin khi tạo mới một object.
Gắn hành vi (method) vào class một cách gọn gàng và logic.
Kế thừa (extends) giúp bạn tái sử dụng mã và mở rộng chức năng một cách sang chảnh.

Cuối cùng, hãy nhớ: Class không chỉ là cú pháp, mà là một lối sống. Một lối sống có tổ chức, có thần thái, và không lặp code một cách vô vọng nữa.

Nếu bạn từng sợ lập trình hướng đối tượng trong JavaScript, thì giờ hãy coi nó như việc nuôi mèo – miễn là bạn biết cách, thì nó chỉ kêu "meo" thôi chứ không cào đâu!

"Chào thân ái và quyết thắng"_duythenights

Who tf wrote this code?

Dinh Hoang Duy — Wed, 19 Mar 2025 08:04:47 +0000

Automate Next.js Deployment to AWS EC2 using GitHub Actions

Dinh Hoang Duy — Fri, 14 Mar 2025 05:12:37 +0000

Automating your Next.js deployment process can significantly streamline updates and reduce manual effort. This guide will walk through setting up GitHub Actions to automatically deploy your Next.js application to an AWS EC2 instance.

Prerequisites

Refer to the previous post for setting up the AWS EC2 instance, installing Node.js, configuring Nginx, and optimizing with Cloudflare.

1. Setting Up GitHub Secrets

Before configuring GitHub Actions, store the following secrets in your GitHub repository:

EC2_HOST: Public IP of your EC2 instance
EC2_USER: SSH username (e.g., ubuntu)
SSH_PRIVATE_KEY: Private key for SSH authentication
FOLDER_NAME: Folder name where the app is stored on EC2
PM2_NAME: PM2 process name

To add these secrets:

Go to your repository on GitHub.
Navigate to Settings > Secrets and variables > Actions.
Click New repository secret and add the required secrets.

2. Creating the GitHub Actions Workflow

Create a .github/workflows/deploy.yml file in your repository with the following content:

name: YOUR_APP

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Install Node.js 20
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm install

      - name: Build Next.js application
        run: npm run build

      - name: Upload files to EC2
        uses: appleboy/scp-action@v0.1.4
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          source: "."
          target: "/home/${{ secrets.EC2_USER }}/${{ secrets.FOLDER_NAME }}"
          rm: true
          strip_components: 1

      - name: Run deployment commands on EC2
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            cd /home/${{ secrets.EC2_USER }}/${{ secrets.FOLDER_NAME }}
            npm install --production

            # Ensure PM2 is installed
            sudo npm install -g pm2

            # Restart or start PM2 process
            pm2 restart ${{ secrets.PM2_NAME }} || pm2 start npm --name ${{ secrets.PM2_NAME }} -- start

3. How It Works

Triggers on push: The workflow runs whenever new code is pushed to the main branch.
Installs dependencies: Node.js 20 and required npm packages are installed.
Builds the application: Next.js is built before deployment.
Uploads files to EC2: The app is securely copied to the instance using SCP.
Runs deployment commands:
- Installs necessary dependencies on the server.
- Ensures PM2 is running and restarts the application.

4. Testing the Deployment

Push a commit to main branch:

git add .
git commit -m "Deploy update"
git push origin main

Monitor the workflow under GitHub Actions > PORTFOLIO.
Verify the deployment on your EC2 instance:

pm list -g pm2
pm2 list

5. Common Issues & Fixes

1. SSH Authentication Fails

Ensure your private key matches the one on EC2 (~/.ssh/authorized_keys).
Set correct permissions for the key: chmod 600 your-key.pem.

2. PM2 Not Restarting

Run pm2 list to check if the process is running.
Manually restart: pm2 restart <your-app-name>.

3. Deployment Not Updating

Ensure old files are removed: rm -rf /home/your-user/your-app/* before uploading.

Conclusion

With GitHub Actions, deploying Next.js to AWS EC2 is automated, efficient, and scalable. This setup allows for seamless updates, ensuring minimal downtime. Next, we’ll explore adding a CI/CD pipeline with automated testing!

Deploy Next.js on AWS EC2 with PM2, Nginx, and Cloudflare CDN

Dinh Hoang Duy — Fri, 14 Mar 2025 03:06:35 +0000

Deploying a Next.js application on AWS EC2 can be an efficient way to host a scalable web application. This guide will provide a detailed step-by-step approach to setting up and deploying a Next.js application on an EC2 instance, managing the process using PM2, configuring Nginx as a reverse proxy, and optimizing the domain with Cloudflare CDN.

Prerequisites

AWS EC2 instance running Ubuntu (20.04 or later)
A Next.js application ready for deployment
Domain registered on Namecheap
A Cloudflare account
Basic knowledge of Linux commands

1. Setting Up an AWS EC2 Instance

Step 1: Launch an EC2 Instance

Log in to your AWS Console and navigate to EC2.
Click on Launch Instance.
Choose Ubuntu 22.04 LTS as the OS.
Select an instance type:
- t2.micro (Free-tier eligible for testing/small apps)
- t3.medium or higher for production apps
Configure security groups:
- SSH (port 22): Allow only your IP for security.
- HTTP (port 80): Allow public access.
- HTTPS (port 443): Allow public access.
- Custom TCP (port 3000): Allow only if testing Next.js directly.

Launch the instance and download the key pair for SSH access.

Step 2: Connect to the Instance

Use SSH to connect:

ssh -i your-key.pem ubuntu@your-ec2-public-ip

If got permission error, please run this before:

chmod 400 your-key.pem

2. Install Node.js and PM2

Step 1: Install Node.js and npm

Update and install Node.js:

sudo apt update && sudo apt upgrade -y
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

Verify installation:

node -v
npm -v

Step 2: Install PM2 for Process Management

npm install -g pm2
pm2 startup

3. Deploy the Next.js Application

Step 1: Clone Your Repository

Navigate to the home directory and clone your Next.js project:

cd ~
git clone https://github.com/yourusername/your-nextjs-app.git
cd your-nextjs-app

Step 2: Install Dependencies

npm install

Step 3: Build the Next.js Application

npm run build

Step 4: Start the App with PM2

pm2 start npm --name "nextjs-app" -- start
pm2 save

Check status:

pm2 list

4. Setting Up Nginx as a Reverse Proxy

Step 1: Install Nginx

sudo apt install nginx -y

Step 2: Configure Nginx

Open the Nginx configuration file:

sudo nano /etc/nginx/sites-available/default

Replace its contents with:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Save and exit (CTRL+X, then Y, then ENTER).

Step 3: Restart Nginx

sudo systemctl restart nginx

Check status:

sudo systemctl status nginx

5. Configure Namecheap DNS Settings

Log in to your Namecheap account.
Go to Domain List > Select your domain > Click Manage.
Under the Advanced DNS tab, add an A Record:
- Host: @
- Value: Your EC2 public IP address
- TTL: Automatic
Add a CNAME Record:
- Host: www
- Value: yourdomain.com
- TTL: Automatic
Save changes and wait for propagation (~30 minutes to a few hours).

6. Optimize with Cloudflare CDN

Step 1: Add Your Site to Cloudflare

Sign up/log in to Cloudflare.
Click Add a Site and enter your domain.
Cloudflare will scan your DNS records.
Choose Free Plan and continue.
Update your Namecheap nameservers with the ones provided by Cloudflare.
Wait for DNS propagation.

Step 2: Enable CDN and Security Features

Enable Automatic HTTPS Rewrites.
Enable Always Use HTTPS.
Turn on CDN caching for improved performance.
Enable DDoS protection and security features.

7. Secure Your Site with SSL

Once Cloudflare is active:

Go to Cloudflare dashboard > SSL/TLS.
Set SSL mode to Full (Strict).
Restart Nginx to apply changes:

sudo systemctl restart nginx

8. Deploying Updates

To deploy updates, SSH into the instance and run:

cd ~/your-nextjs-app
git pull origin main
npm install
npm run build
pm2 restart nextjs-app

9. Common Errors and Solutions

Error 1: PM2 Not Restarting on Reboot

Run:

pm2 startup
pm2 save

Error 2: Nginx 502 Bad Gateway

Check if the Next.js app is running:

pm2 list

If not running, restart:

pm2 restart nextjs-app

Error 3: DNS Propagation Delay

Check DNS propagation:
www.whatsmydns.net

Conclusion

Congratulations! Your Next.js application is now live on AWS EC2 with PM2 for process management, Nginx as a reverse proxy, and a custom domain from Namecheap optimized with Cloudflare CDN. This setup ensures high availability, security, and performance for your web application.
In the next post, I'll show you how to add a GitHub Action to automate CI/CD for your application.

Making API Calls with Axios More Readable Using the Builder Pattern

Dinh Hoang Duy — Thu, 13 Mar 2025 09:40:26 +0000

If you’ve been working as a frontend developer for a while, you’ve probably written your fair share of API calls. At first, using Axios feels super straightforward. But as the project grows, API calls start getting messy, repetitive, and hard to manage.

Let’s be real—when a new dev joins the team, they’ll probably struggle to figure out what’s going on (just like I did during my first internship!). So how do we keep things clean, readable, and scalable? That’s where the Builder Pattern comes in.

The Problem with Basic Axios Calls

Here’s a typical API call using Axios:

import axios from "axios";

async function fetchUser(userId) {
  try {
    const response = await axios.get(`https://api.example.com/users/${userId}`, {
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer someToken",
      },
      params: { includePosts: true },
    });
    console.log(response.data);
  } catch (error) {
    console.error("API Error:", error);
  }
}

What’s Wrong With This?

Too much repetition – If you need the same headers or params elsewhere, you’ll have to copy-paste them.
Hard to read – New developers might take time to understand the request structure.
Not scalable – As the number of API calls increases, maintaining consistency across them gets painful.

The Fix: Using the Builder Pattern

The Builder Pattern helps us structure API calls in a reusable and readable way.

Step 1: Create a Request Builder

Here’s how we can wrap Axios calls into a reusable class:

import axios from "axios";

class ApiRequestBuilder {
  constructor() {
    this.config = {
      method: "get",
      url: "",
      headers: {},
      params: {},
      data: null,
    };
  }

  setMethod(method) {
    this.config.method = method;
    return this;
  }

  setUrl(url) {
    this.config.url = url;
    return this;
  }

  setHeaders(headers) {
    this.config.headers = { ...this.config.headers, ...headers };
    return this;
  }

  setParams(params) {
    this.config.params = params;
    return this;
  }

  setData(data) {
    this.config.data = data;
    return this;
  }

  async send() {
    try {
      const response = await axios(this.config);
      return response.data;
    } catch (error) {
      console.error("API Error:", error);
      throw error;
    }
  }
}

export default ApiRequestBuilder;

Step 2: Use the Builder to Make API Calls

Now, instead of writing messy API calls, we can use the ApiRequestBuilder like this:

Fetching a User (GET Request)

import ApiRequestBuilder from "./ApiRequestBuilder";

async function fetchUser(userId) {
  try {
    const user = await new ApiRequestBuilder()
      .setMethod("get")
      .setUrl(`https://api.example.com/users/${userId}`)
      .setHeaders({ "Content-Type": "application/json", Authorization: "Bearer someToken" })
      .setParams({ includePosts: true })
      .send();

    console.log("User Data:", user);
  } catch (error) {
    console.error("Error fetching user:", error);
  }
}

Creating a User (POST Request)

async function createUser(userData) {
  try {
    const newUser = await new ApiRequestBuilder()
      .setMethod("post")
      .setUrl("https://api.example.com/users")
      .setHeaders({ "Content-Type": "application/json" })
      .setData(userData)
      .send();

    console.log("User Created:", newUser);
  } catch (error) {
    console.error("Error creating user:", error);
  }
}

Why Use the Builder Pattern for Axios?

Cleaner Code – No more long, repetitive API calls.

Reusable & Scalable – Define headers, params, and methods once and reuse them anywhere.

Easier to Maintain – Changing API structure? Just update the builder class!

Better for Teams – New devs can understand API calls faster.

If you’ve ever had to hunt down inconsistent API calls across a project, this pattern will save you a ton of headaches. 😅

Wrapping Up

The Builder Pattern is an awesome way to clean up Axios API calls in frontend projects. It improves readability, maintainability, and scalability, making your life (and your team’s) much easier.

If you’re tired of messy API calls, give this pattern a shot! 🚀