From bab9e0c34a326d2ecdce8bb1da64acf0251e35e7 Mon Sep 17 00:00:00 2001
From: Ivan Lapa <ivpr.lapa@gmail.com>
Date: Wed, 1 Apr 2026 11:31:48 +0200
Subject: [PATCH] refactor: migrate forms to React Hook Form

Replace manual useState-per-field form management with react-hook-form
across Login, CommentForm, NewsletterForm, and AddBlog. Update Input
and Textarea components to forward ref for RHF register compatibility.
Add co-located tests for all migrated forms.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 client/package-lock.json                      |  17 ++
 client/package.json                           |   1 +
 .../src/components/admin/auth/Login/Login.jsx |  29 ++--
 .../admin/auth/Login/Login.test.jsx           | 106 +++++-------
 .../comment/CommentForm/CommentForm.jsx       |  35 ++--
 .../comment/CommentForm/CommentForm.test.jsx  |  84 ++++++---
 .../forms/NewsletterForm/NewsletterForm.jsx   |  41 ++---
 .../NewsletterForm/NewsletterForm.test.jsx    |  71 ++++++++
 client/src/components/ui/Input/Input.jsx      |   6 +-
 .../src/components/ui/Textarea/Textarea.jsx   |   6 +-
 client/src/pages/admin/AddBlog/AddBlog.jsx    | 159 ++++++++----------
 .../src/pages/admin/AddBlog/AddBlog.test.jsx  |  83 +++++++++
 client/src/test/setup.js                      |   2 +-
 client/vite.config.js                         |   6 +-
 14 files changed, 411 insertions(+), 235 deletions(-)
 create mode 100644 client/src/components/forms/NewsletterForm/NewsletterForm.test.jsx
 create mode 100644 client/src/pages/admin/AddBlog/AddBlog.test.jsx

diff --git a/client/package-lock.json b/client/package-lock.json
index e4e98640..c9256f73 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -16,6 +16,7 @@
         "quill": "^2.0.3",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-hook-form": "^7.72.0",
         "react-hot-toast": "^2.5.2",
         "react-router-dom": "^7.6.0",
         "tailwindcss": "^4.1.7"
@@ -4321,6 +4322,22 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.72.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.72.0.tgz",
+      "integrity": "sha512-V4v6jubaf6JAurEaVnT9aUPKFbNtDgohj5CIgVGyPHvT9wRx5OZHVjz31GsxnPNI278XMu+ruFz+wGOscHaLKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-hot-toast": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
diff --git a/client/package.json b/client/package.json
index 2191c7d9..ae8b7cc2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -21,6 +21,7 @@
     "quill": "^2.0.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.72.0",
     "react-hot-toast": "^2.5.2",
     "react-router-dom": "^7.6.0",
     "tailwindcss": "^4.1.7"
diff --git a/client/src/components/admin/auth/Login/Login.jsx b/client/src/components/admin/auth/Login/Login.jsx
index 821610f7..9d019b4c 100644
--- a/client/src/components/admin/auth/Login/Login.jsx
+++ b/client/src/components/admin/auth/Login/Login.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { useAppContext } from '../../../../context/AppContext'
 import { adminApi } from '../../../../api'
 import { Button, Input } from '../../../ui'
@@ -7,16 +8,14 @@ import { MESSAGES } from '../../../../constants/messages'
 
 function Login() {
   const { setToken } = useAppContext()
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
   const [loading, setLoading] = useState(false)
+  const { register, handleSubmit } = useForm()
 
-  const handleSubmit = async (e) => {
-    e.preventDefault()
+  const onSubmit = async (data) => {
     setLoading(true)
-    
+
     try {
-      const response = await adminApi.login({ email, password })
+      const response = await adminApi.login(data)
 
       if (response.data.success) {
         setToken(response.data.token)
@@ -42,30 +41,28 @@ function Login() {
             </h1>
             <p className='font-light'>Enter your credentials to access the admin panel</p>
           </div>
-          
-          <form onSubmit={handleSubmit} className='mt-6 w-full sm:max-w-md text-gray-600'>
+
+          <form onSubmit={handleSubmit(onSubmit)} className='mt-6 w-full sm:max-w-md text-gray-600'>
             <Input
               label='Email'
               type='email'
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
               placeholder='your email id'
               required
               className='border-b-2 border-gray-300 mb-6 rounded-none border-x-0 border-t-0'
+              {...register('email', { required: true })}
             />
-            
+
             <Input
               label='Password'
               type='password'
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
               placeholder='your password'
               required
               className='border-b-2 border-gray-300 mb-6 rounded-none border-x-0 border-t-0'
+              {...register('password', { required: true })}
             />
-            
-            <Button 
-              type='submit' 
+
+            <Button
+              type='submit'
               variant='primary'
               fullWidth
               loading={loading}
diff --git a/client/src/components/admin/auth/Login/Login.test.jsx b/client/src/components/admin/auth/Login/Login.test.jsx
index 9dcbe8e1..2a530487 100644
--- a/client/src/components/admin/auth/Login/Login.test.jsx
+++ b/client/src/components/admin/auth/Login/Login.test.jsx
@@ -1,94 +1,80 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { setupServer } from 'msw/node'
-import { http, HttpResponse } from 'msw'
-import toast from 'react-hot-toast'
-import Login from '.'
-
-vi.mock('react-hot-toast', () => ({
-  default: { success: vi.fn(), error: vi.fn() },
-}))
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import Login from './Login'
 
 const mockSetToken = vi.fn()
-
 vi.mock('../../../../context/AppContext', () => ({
-  useAppContext: () => ({
-    setToken: mockSetToken,
-  }),
+  useAppContext: () => ({ setToken: mockSetToken })
 }))
 
-const server = setupServer()
+const mockLogin = vi.fn()
+vi.mock('../../../../api', () => ({
+  adminApi: { login: (...args) => mockLogin(...args) }
+}))
 
-beforeAll(() => server.listen())
-afterEach(() => {
-  server.resetHandlers()
-  vi.clearAllMocks()
-  localStorage.clear()
-})
-afterAll(() => server.close())
+vi.mock('react-hot-toast', () => ({
+  default: { success: vi.fn(), error: vi.fn() }
+}))
+
+vi.mock('../../../../constants/messages', () => ({
+  MESSAGES: {
+    SUCCESS_LOGIN: 'Login successful',
+    ERROR_LOGIN: 'Login failed'
+  }
+}))
 
 describe('Login', () => {
-  it('successful login sets token and shows success toast', async () => {
-    server.use(
-      http.post('http://localhost:5001/api/admin/login', () =>
-        HttpResponse.json({ success: true, token: 'jwt123' })
-      )
-    )
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
 
-    const user = userEvent.setup()
+  it('renders email and password inputs', () => {
     render(<Login />)
-
-    await user.type(screen.getByPlaceholderText('your email id'), 'admin@quickblog.com')
-    await user.type(screen.getByPlaceholderText('your password'), 'admin123')
-    await user.click(screen.getByRole('button', { name: /login/i }))
-
-    await waitFor(() => {
-      expect(mockSetToken).toHaveBeenCalledWith('jwt123')
-    })
-
-    expect(localStorage.getItem('token')).toBe('jwt123')
-    expect(toast.success).toHaveBeenCalled()
+    expect(screen.getByPlaceholderText('your email id')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('your password')).toBeInTheDocument()
   })
 
-  it('shows error toast on invalid credentials', async () => {
-    server.use(
-      http.post('http://localhost:5001/api/admin/login', () =>
-        HttpResponse.json({ message: 'Invalid credentials' }, { status: 401 })
-      )
-    )
+  it('renders login button', () => {
+    render(<Login />)
+    expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument()
+  })
 
+  it('submits form with email and password', async () => {
     const user = userEvent.setup()
+    mockLogin.mockResolvedValue({ data: { success: true, token: 'abc123' } })
+
     render(<Login />)
 
-    await user.type(screen.getByPlaceholderText('your email id'), 'wrong@email.com')
-    await user.type(screen.getByPlaceholderText('your password'), 'wrongpass')
+    await user.type(screen.getByPlaceholderText('your email id'), 'test@example.com')
+    await user.type(screen.getByPlaceholderText('your password'), 'password123')
     await user.click(screen.getByRole('button', { name: /login/i }))
 
     await waitFor(() => {
-      expect(toast.error).toHaveBeenCalled()
+      expect(mockLogin).toHaveBeenCalledWith({
+        email: 'test@example.com',
+        password: 'password123'
+      })
     })
 
-    expect(mockSetToken).not.toHaveBeenCalled()
+    await waitFor(() => {
+      expect(mockSetToken).toHaveBeenCalledWith('abc123')
+    })
   })
 
-  it('disables submit button while loading', async () => {
-    server.use(
-      http.post('http://localhost:5001/api/admin/login', async () => {
-        await new Promise((resolve) => setTimeout(resolve, 500))
-        return HttpResponse.json({ success: true, token: 'jwt123' })
-      })
-    )
-
+  it('shows error toast on failed login', async () => {
     const user = userEvent.setup()
+    const toast = (await import('react-hot-toast')).default
+    mockLogin.mockRejectedValue({ response: { data: { message: 'Bad creds' } } })
+
     render(<Login />)
 
-    await user.type(screen.getByPlaceholderText('your email id'), 'admin@quickblog.com')
-    await user.type(screen.getByPlaceholderText('your password'), 'admin123')
+    await user.type(screen.getByPlaceholderText('your email id'), 'test@example.com')
+    await user.type(screen.getByPlaceholderText('your password'), 'wrong')
     await user.click(screen.getByRole('button', { name: /login/i }))
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: /loading/i })).toBeDisabled()
+      expect(toast.error).toHaveBeenCalledWith('Bad creds')
     })
   })
 })
diff --git a/client/src/components/comment/CommentForm/CommentForm.jsx b/client/src/components/comment/CommentForm/CommentForm.jsx
index ff3d6a04..9163d741 100644
--- a/client/src/components/comment/CommentForm/CommentForm.jsx
+++ b/client/src/components/comment/CommentForm/CommentForm.jsx
@@ -1,45 +1,40 @@
-import React, { useState } from 'react'
+import React from 'react'
+import { useForm } from 'react-hook-form'
 import Button from '../../ui/Button'
 import Input from '../../ui/Input'
 import Textarea from '../../ui/Textarea'
 
 function CommentForm({ onSubmit, loading = false }) {
-  const [name, setName] = useState('')
-  const [content, setContent] = useState('')
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    
-    const result = await onSubmit({ name, content })
-    
+  const { register, handleSubmit, reset } = useForm()
+
+  const onFormSubmit = async (data) => {
+    const result = await onSubmit(data)
+
     if (result?.success) {
-      setName('')
-      setContent('')
+      reset()
     }
   }
 
   return (
     <div className='max-w-3xl mx-auto'>
       <p className='font-semibold mb-4'>Add your comment</p>
-      <form onSubmit={handleSubmit} className='flex flex-col items-start gap-4 max-w-lg'>
+      <form onSubmit={handleSubmit(onFormSubmit)} className='flex flex-col items-start gap-4 max-w-lg'>
         <Input
           type='text'
           placeholder='Name'
-          value={name}
-          onChange={(e) => setName(e.target.value)}
           required
+          {...register('name', { required: true })}
         />
-        
+
         <Textarea
           placeholder='Comment'
-          value={content}
-          onChange={(e) => setContent(e.target.value)}
           rows={6}
           required
+          {...register('content', { required: true })}
         />
-        
-        <Button 
-          type='submit' 
+
+        <Button
+          type='submit'
           variant='primary'
           loading={loading}
         >
diff --git a/client/src/components/comment/CommentForm/CommentForm.test.jsx b/client/src/components/comment/CommentForm/CommentForm.test.jsx
index a25cb22e..2fed600e 100644
--- a/client/src/components/comment/CommentForm/CommentForm.test.jsx
+++ b/client/src/components/comment/CommentForm/CommentForm.test.jsx
@@ -1,33 +1,69 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import CommentForm from '.';
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import CommentForm from './CommentForm'
 
 describe('CommentForm', () => {
-  it('fills name and comment, submits, and form clears on success', async () => {
-    const user = userEvent.setup();
-    const handleSubmit = vi.fn().mockResolvedValue({ success: true });
+  const mockOnSubmit = vi.fn()
 
-    render(<CommentForm onSubmit={handleSubmit} />);
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
 
-    const nameInput = screen.getByPlaceholderText('Name');
-    const commentInput = screen.getByPlaceholderText('Comment');
+  it('renders name and comment fields', () => {
+    render(<CommentForm onSubmit={mockOnSubmit} />)
+    expect(screen.getByPlaceholderText('Name')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('Comment')).toBeInTheDocument()
+  })
 
-    await user.type(nameInput, 'Alice');
-    await user.type(commentInput, 'Great post!');
-    await user.click(screen.getByRole('button', { name: /submit/i }));
+  it('renders submit button', () => {
+    render(<CommentForm onSubmit={mockOnSubmit} />)
+    expect(screen.getByRole('button', { name: /submit/i })).toBeInTheDocument()
+  })
 
-    expect(handleSubmit).toHaveBeenCalledWith({ name: 'Alice', content: 'Great post!' });
+  it('calls onSubmit with form data', async () => {
+    const user = userEvent.setup()
+    mockOnSubmit.mockResolvedValue({ success: true })
 
-    // Fields should clear after successful submit
-    expect(nameInput).toHaveValue('');
-    expect(commentInput).toHaveValue('');
-  });
+    render(<CommentForm onSubmit={mockOnSubmit} />)
 
-  it('disables submit button while loading', () => {
-    render(<CommentForm onSubmit={vi.fn()} loading={true} />);
+    await user.type(screen.getByPlaceholderText('Name'), 'John')
+    await user.type(screen.getByPlaceholderText('Comment'), 'Great post!')
+    await user.click(screen.getByRole('button', { name: /submit/i }))
 
-    const button = screen.getByRole('button', { name: /loading/i });
-    expect(button).toBeDisabled();
-  });
-});
+    await waitFor(() => {
+      expect(mockOnSubmit).toHaveBeenCalledWith({ name: 'John', content: 'Great post!' })
+    })
+  })
+
+  it('resets fields after successful submit', async () => {
+    const user = userEvent.setup()
+    mockOnSubmit.mockResolvedValue({ success: true })
+
+    render(<CommentForm onSubmit={mockOnSubmit} />)
+
+    await user.type(screen.getByPlaceholderText('Name'), 'John')
+    await user.type(screen.getByPlaceholderText('Comment'), 'Great post!')
+    await user.click(screen.getByRole('button', { name: /submit/i }))
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Name')).toHaveValue('')
+      expect(screen.getByPlaceholderText('Comment')).toHaveValue('')
+    })
+  })
+
+  it('does not reset on failed submit', async () => {
+    const user = userEvent.setup()
+    mockOnSubmit.mockResolvedValue({ success: false })
+
+    render(<CommentForm onSubmit={mockOnSubmit} />)
+
+    await user.type(screen.getByPlaceholderText('Name'), 'John')
+    await user.type(screen.getByPlaceholderText('Comment'), 'Great post!')
+    await user.click(screen.getByRole('button', { name: /submit/i }))
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Name')).toHaveValue('John')
+    })
+  })
+})
diff --git a/client/src/components/forms/NewsletterForm/NewsletterForm.jsx b/client/src/components/forms/NewsletterForm/NewsletterForm.jsx
index a9968389..d0386700 100644
--- a/client/src/components/forms/NewsletterForm/NewsletterForm.jsx
+++ b/client/src/components/forms/NewsletterForm/NewsletterForm.jsx
@@ -1,48 +1,51 @@
 import React, { useState } from 'react'
+import { useForm } from 'react-hook-form'
 import Button from '../../ui/Button'
 import toast from 'react-hot-toast'
 import { validateEmail } from '../../../utils/validators'
 
 function NewsletterForm() {
-  const [email, setEmail] = useState('')
   const [loading, setLoading] = useState(false)
+  const { register, handleSubmit, reset, formState: { errors } } = useForm()
 
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    
-    if (!validateEmail(email)) {
-      toast.error('Please enter a valid email address')
-      return
-    }
-
+  const onSubmit = (data) => {
     setLoading(true)
-    
+
     // Simulate API call
     setTimeout(() => {
       toast.success('Successfully subscribed to newsletter!')
-      setEmail('')
+      reset()
       setLoading(false)
     }, 1000)
   }
 
+  const onError = (fieldErrors) => {
+    const firstError = Object.values(fieldErrors)[0]
+    if (firstError?.message) {
+      toast.error(firstError.message)
+    }
+  }
+
   return (
     <div className='flex flex-col items-center justify-center text-center space-y-2 my-32'>
       <h1 className='md:text-4xl text-2xl font-semibold'>Never Miss a Blog!</h1>
       <p className='md:text-lg text-gray-500/70 pb-8'>
         Subscribe to get the latest blog, new tech, and exclusive news.
       </p>
-      
-      <form 
-        onSubmit={handleSubmit}
+
+      <form
+        onSubmit={handleSubmit(onSubmit, onError)}
+        noValidate
         className='flex items-center justify-between max-w-2xl w-full md:h-13 h-12'
       >
-        <input 
+        <input
           type='email'
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder='Enter your email id' 
-          required
+          placeholder='Enter your email id'
           className='border border-gray-300 rounded-md h-full border-r-0 outline-none w-full rounded-r-none px-3 text-gray-500'
+          {...register('email', {
+            required: 'Please enter an email address',
+            validate: (value) => validateEmail(value) || 'Please enter a valid email address'
+          })}
         />
         <Button
           type='submit'
diff --git a/client/src/components/forms/NewsletterForm/NewsletterForm.test.jsx b/client/src/components/forms/NewsletterForm/NewsletterForm.test.jsx
new file mode 100644
index 00000000..1763ba54
--- /dev/null
+++ b/client/src/components/forms/NewsletterForm/NewsletterForm.test.jsx
@@ -0,0 +1,71 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import NewsletterForm from './NewsletterForm'
+
+vi.mock('react-hot-toast', () => ({
+  default: { success: vi.fn(), error: vi.fn() }
+}))
+
+describe('NewsletterForm', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders email input and subscribe button', () => {
+    render(<NewsletterForm />)
+    expect(screen.getByPlaceholderText('Enter your email id')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /subscribe/i })).toBeInTheDocument()
+  })
+
+  it('shows error toast for invalid email', async () => {
+    const user = userEvent.setup()
+    const toast = (await import('react-hot-toast')).default
+
+    render(<NewsletterForm />)
+
+    await user.type(screen.getByPlaceholderText('Enter your email id'), 'notanemail')
+    await user.click(screen.getByRole('button', { name: /subscribe/i }))
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Please enter a valid email address')
+    })
+  })
+
+  it('submits valid email and shows success toast', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+    const toast = (await import('react-hot-toast')).default
+
+    render(<NewsletterForm />)
+
+    await user.type(screen.getByPlaceholderText('Enter your email id'), 'test@example.com')
+    await user.click(screen.getByRole('button', { name: /subscribe/i }))
+
+    vi.advanceTimersByTime(1000)
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith('Successfully subscribed to newsletter!')
+    })
+
+    vi.useRealTimers()
+  })
+
+  it('resets email field after success', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+
+    render(<NewsletterForm />)
+
+    await user.type(screen.getByPlaceholderText('Enter your email id'), 'test@example.com')
+    await user.click(screen.getByRole('button', { name: /subscribe/i }))
+
+    vi.advanceTimersByTime(1000)
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Enter your email id')).toHaveValue('')
+    })
+
+    vi.useRealTimers()
+  })
+})
diff --git a/client/src/components/ui/Input/Input.jsx b/client/src/components/ui/Input/Input.jsx
index 8015be88..be3e3153 100644
--- a/client/src/components/ui/Input/Input.jsx
+++ b/client/src/components/ui/Input/Input.jsx
@@ -8,6 +8,7 @@ function Input({
   containerClassName = '',
   type = 'text',
   required = false,
+  ref,
   ...props
 }) {
   return (
@@ -19,12 +20,13 @@ function Input({
         </label>
       )}
       <input
+        ref={ref}
         type={type}
         required={required}
         className={classNames(
           'w-full p-2 border rounded outline-none transition-colors',
-          error 
-            ? 'border-red-500 focus:border-red-600' 
+          error
+            ? 'border-red-500 focus:border-red-600'
             : 'border-gray-300 focus:border-primary',
           className
         )}
diff --git a/client/src/components/ui/Textarea/Textarea.jsx b/client/src/components/ui/Textarea/Textarea.jsx
index 16134019..54b4cf2d 100644
--- a/client/src/components/ui/Textarea/Textarea.jsx
+++ b/client/src/components/ui/Textarea/Textarea.jsx
@@ -8,6 +8,7 @@ function Textarea({
   containerClassName = '',
   rows = 4,
   required = false,
+  ref,
   ...props
 }) {
   return (
@@ -19,12 +20,13 @@ function Textarea({
         </label>
       )}
       <textarea
+        ref={ref}
         rows={rows}
         required={required}
         className={classNames(
           'w-full p-2 border rounded outline-none transition-colors resize-none',
-          error 
-            ? 'border-red-500 focus:border-red-600' 
+          error
+            ? 'border-red-500 focus:border-red-600'
             : 'border-gray-300 focus:border-primary',
           className
         )}
diff --git a/client/src/pages/admin/AddBlog/AddBlog.jsx b/client/src/pages/admin/AddBlog/AddBlog.jsx
index c1afa3b1..2869b21b 100644
--- a/client/src/pages/admin/AddBlog/AddBlog.jsx
+++ b/client/src/pages/admin/AddBlog/AddBlog.jsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
+import { useForm, Controller } from 'react-hook-form'
 import Quill from 'quill'
 import toast from 'react-hot-toast'
 import { assets } from '../../../assets/assets'
@@ -10,11 +11,18 @@ function AddBlog() {
   const editorRef = useRef(null)
   const quillRef = useRef(null)
 
-  const [image, setImage] = useState(false)
-  const [title, setTitle] = useState('')
-  const [subTitle, setSubTitle] = useState('')
-  const [category, setCategory] = useState('Startup')
-  const [isPublished, setIsPublished] = useState(false)
+  const { register, handleSubmit, control, watch, setValue, reset } = useForm({
+    defaultValues: {
+      title: '',
+      subTitle: '',
+      category: 'Startup',
+      isPublished: false,
+      image: null,
+    }
+  })
+
+  const image = watch('image')
+  const title = watch('title')
 
   const { generateContent, isGenerating } = useBlogGenerator()
   const { createBlog, isCreating } = useCreateBlog()
@@ -26,68 +34,37 @@ function AddBlog() {
     }
   }
 
-  const onSubmitHandler = async (e) => {
-    e.preventDefault()
-
+  const onSubmit = async (data) => {
     if (!quillRef.current) return
 
-    // Validate all required fields
-    if (!title || !title.trim()) {
-      toast.error('Please enter a blog title')
-      return
-    }
-
-    if (!subTitle || !subTitle.trim()) {
-      toast.error('Please enter a sub title')
-      return
-    }
-
-    if (!image || image === false) {
-      toast.error('Please select an image')
-      return
-    }
-
-    if (!category || category === '') {
-      toast.error('Please select a category')
-      return
-    }
-
     const description = quillRef.current.root.innerHTML
     if (!description || description.trim() === '<p><br></p>' || description.trim() === '') {
       toast.error('Please add blog description')
       return
     }
 
-    // Debug logging
-    console.log('Form submission:', {
-      title,
-      subTitle,
-      category,
-      isPublished,
-      imageType: typeof image,
-      imageFile: image,
-      imageName: image?.name,
-      imageSize: image?.size
-    })
-
     const blog = {
-      title,
-      subTitle,
+      title: data.title,
+      subTitle: data.subTitle,
       description,
-      category,
-      isPublished
+      category: data.category,
+      isPublished: data.isPublished
     }
 
-    const result = await createBlog(blog, image)
+    const result = await createBlog(blog, data.image)
 
     if (result.success) {
-      // Reset form
-      setImage(false)
-      setTitle('')
-      setSubTitle('')
-      quillRef.current.root.innerHTML = ''
-      setCategory('Startup')
-      setIsPublished(false)
+      reset()
+      if (quillRef.current) {
+        quillRef.current.root.innerHTML = ''
+      }
+    }
+  }
+
+  const onError = (fieldErrors) => {
+    const firstError = Object.values(fieldErrors)[0]
+    if (firstError?.message) {
+      toast.error(firstError.message)
     }
   }
 
@@ -99,32 +76,39 @@ function AddBlog() {
   }, [])
 
   return (
-    <form 
-      onSubmit={onSubmitHandler}
+    <form
+      onSubmit={handleSubmit(onSubmit, onError)}
       noValidate
       className='flex-1 bg-blue-50/50 text-gray-600 h-full overflow-scroll'
     >
       <div className='bg-white w-full max-w-3xl p-4 md:p-10 sm:m-10 shadow rounded'>
-        
+
         {/* Image Upload */}
         <div className='mb-6'>
           <label className='block mb-2 text-sm font-medium'>
             Upload Thumbnail <span className='text-red-500'>*</span>
           </label>
-          <label htmlFor='image' className='cursor-pointer'>
-            <img 
-              src={!image ? assets.upload_area : URL.createObjectURL(image)} 
-              alt='Upload preview' 
-              className='mt-2 h-16 rounded hover:opacity-80 transition-opacity'
-            />
-            <input 
-              onChange={(e) => setImage(e.target.files[0])} 
-              type='file' 
-              id='image' 
-              hidden 
-              accept='image/*'
-            />
-          </label>
+          <Controller
+            name='image'
+            control={control}
+            rules={{ validate: (v) => (v instanceof File) || 'Please select an image' }}
+            render={({ field: { onChange } }) => (
+              <label htmlFor='image' className='cursor-pointer'>
+                <img
+                  src={image instanceof File ? URL.createObjectURL(image) : assets.upload_area}
+                  alt='Upload preview'
+                  className='mt-2 h-16 rounded hover:opacity-80 transition-opacity'
+                />
+                <input
+                  onChange={(e) => onChange(e.target.files[0])}
+                  type='file'
+                  id='image'
+                  hidden
+                  accept='image/*'
+                />
+              </label>
+            )}
+          />
         </div>
 
         {/* Blog Title */}
@@ -132,9 +116,8 @@ function AddBlog() {
           label='Blog Title'
           type='text'
           placeholder='Type here'
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
           containerClassName='mb-6'
+          {...register('title', { required: 'Please enter a blog title' })}
         />
 
         {/* Sub Title */}
@@ -142,9 +125,8 @@ function AddBlog() {
           label='Sub Title'
           type='text'
           placeholder='Type here'
-          value={subTitle}
-          onChange={(e) => setSubTitle(e.target.value)}
           containerClassName='mb-6'
+          {...register('subTitle', { required: 'Please enter a sub title' })}
         />
 
         {/* Blog Description with Quill Editor */}
@@ -159,10 +141,10 @@ function AddBlog() {
                 <div className='w-8 h-8 rounded-full border-2 border-t-white border-gray-300 animate-spin'></div>
               </div>
             )}
-            <button 
-              disabled={isGenerating || !title || isCreating} 
-              type='button' 
-              onClick={handleGenerateContent} 
+            <button
+              disabled={isGenerating || !title || isCreating}
+              type='button'
+              onClick={handleGenerateContent}
               className='absolute bottom-1 right-2 ml-2 text-xs text-white bg-black/70 px-4 py-1.5 rounded hover:bg-black transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
             >
               {isGenerating ? 'Generating...' : 'Generate with AI'}
@@ -175,10 +157,8 @@ function AddBlog() {
           <label className='block mb-2 text-sm font-medium'>
             Blog Category <span className='text-red-500'>*</span>
           </label>
-          <select 
-            onChange={(e) => setCategory(e.target.value)} 
-            value={category}
-            name='category' 
+          <select
+            {...register('category', { required: 'Please select a category' })}
             className='mt-2 px-3 py-2 border text-gray-500 border-gray-300 outline-none rounded w-full max-w-lg focus:border-primary transition-colors'
             disabled={isCreating}
           >
@@ -190,13 +170,12 @@ function AddBlog() {
 
         {/* Publish Checkbox */}
         <div className='flex items-center gap-2 mb-8'>
-          <input 
-            type='checkbox' 
+          <input
+            type='checkbox'
             id='isPublished'
-            checked={isPublished} 
-            className='scale-125 cursor-pointer' 
-            onChange={(e) => setIsPublished(e.target.checked)}
+            className='scale-125 cursor-pointer'
             disabled={isCreating}
+            {...register('isPublished')}
           />
           <label htmlFor='isPublished' className='cursor-pointer select-none'>
             Publish Now
@@ -204,8 +183,8 @@ function AddBlog() {
         </div>
 
         {/* Submit Button */}
-        <Button 
-          type='submit' 
+        <Button
+          type='submit'
           variant='primary'
           loading={isCreating}
           disabled={isCreating || isGenerating}
diff --git a/client/src/pages/admin/AddBlog/AddBlog.test.jsx b/client/src/pages/admin/AddBlog/AddBlog.test.jsx
new file mode 100644
index 00000000..b2ed947b
--- /dev/null
+++ b/client/src/pages/admin/AddBlog/AddBlog.test.jsx
@@ -0,0 +1,83 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import AddBlog from './AddBlog'
+
+const mockCreateBlog = vi.fn()
+const mockGenerateContent = vi.fn()
+
+vi.mock('../../../hooks', () => ({
+  useBlogGenerator: () => ({
+    generateContent: mockGenerateContent,
+    isGenerating: false
+  }),
+  useCreateBlog: () => ({
+    createBlog: mockCreateBlog,
+    isCreating: false
+  })
+}))
+
+vi.mock('react-hot-toast', () => ({
+  default: { success: vi.fn(), error: vi.fn() }
+}))
+
+vi.mock('../../../assets/assets', () => ({
+  assets: { upload_area: 'placeholder.png' }
+}))
+
+vi.mock('../../../constants/categories', () => ({
+  BLOG_CATEGORIES: ['All', 'Technology', 'Startup', 'Lifestyle']
+}))
+
+// Mock Quill
+vi.mock('quill', () => {
+  return {
+    default: class MockQuill {
+      constructor(el) {
+        this.root = el
+        el.innerHTML = ''
+      }
+    }
+  }
+})
+
+describe('AddBlog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders all form fields', () => {
+    render(<AddBlog />)
+    expect(screen.getAllByPlaceholderText('Type here')).toHaveLength(2)
+    expect(screen.getByText('Upload Thumbnail')).toBeInTheDocument()
+    expect(screen.getByText('Blog Category')).toBeInTheDocument()
+    expect(screen.getByText('Publish Now')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /add blog/i })).toBeInTheDocument()
+  })
+
+  it('renders category select with options', () => {
+    render(<AddBlog />)
+    const select = screen.getByRole('combobox')
+    expect(select).toBeInTheDocument()
+    expect(screen.getByText('Technology')).toBeInTheDocument()
+    expect(screen.getByText('Startup')).toBeInTheDocument()
+    expect(screen.getByText('Lifestyle')).toBeInTheDocument()
+  })
+
+  it('shows validation error when title is empty', async () => {
+    const user = userEvent.setup()
+    const toast = (await import('react-hot-toast')).default
+
+    render(<AddBlog />)
+    await user.click(screen.getByRole('button', { name: /add blog/i }))
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled()
+    })
+  })
+
+  it('renders generate with AI button', () => {
+    render(<AddBlog />)
+    expect(screen.getByRole('button', { name: /generate with ai/i })).toBeInTheDocument()
+  })
+})
diff --git a/client/src/test/setup.js b/client/src/test/setup.js
index bb02c60c..c44951a6 100644
--- a/client/src/test/setup.js
+++ b/client/src/test/setup.js
@@ -1 +1 @@
-import '@testing-library/jest-dom/vitest';
+import '@testing-library/jest-dom'
diff --git a/client/vite.config.js b/client/vite.config.js
index 8dd72065..ae5dd0c3 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -5,7 +5,11 @@ import tailwindcss from '@tailwindcss/vite'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    react(), 
+    react(),
     tailwindcss()
   ],
+  test: {
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.js',
+  },
 })