DistinctCodes · yusuftomilola · Oct 2, 2025 · Oct 2, 2025
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Providers } from "./providers";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -27,8 +28,8 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <Providers>{children}</Providers>
       </body>
     </html>
   );
-}
+}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -4,4 +4,4 @@ export default function Home() {
       <h1>HomePage</h1>
     </section>
   );
-}
+}
diff --git a/frontend/app/providers.tsx b/frontend/app/providers.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useState, ReactNode } from 'react';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+/**
+ * Providers component that wraps the app with React Query context
+ * Includes dev tools for debugging in development mode
+ */
+export function Providers({ children }: ProvidersProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+            refetchOnWindowFocus: false,
+          },
+          mutations: {
+            onError: (error) => {
+              console.error('Mutation error:', error);
+            },
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {process.env.NODE_ENV === 'development' && (
+        <ReactQueryDevtools initialIsOpen={false} />
+      )}
+    </QueryClientProvider>
+  );
+}
diff --git a/frontend/lib/api/client.ts b/frontend/lib/api/client.ts
@@ -0,0 +1,50 @@
+import { RegisterInput, LoginInput, AuthResponse } from '../query/types';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';
+
+/**
+ * API Client for making HTTP requests
+ * Handles authentication endpoints with proper error handling
+ */
+class ApiClient {
+  private async request<T>(
+    endpoint: string,
+    options?: RequestInit
+  ): Promise<T> {
+    const url = `${API_BASE_URL}${endpoint}`;
+
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        message: 'An error occurred',
+        statusCode: response.status,
+      }));
+      throw error;
+    }
+
+    return response.json();
+  }
+
+  async register(data: RegisterInput): Promise<AuthResponse> {
+    return this.request<AuthResponse>('/auth/register', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async login(data: LoginInput): Promise<AuthResponse> {
+    return this.request<AuthResponse>('/auth/login', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+}
+
+export const apiClient = new ApiClient();
diff --git a/frontend/lib/query/keys.ts b/frontend/lib/query/keys.ts
@@ -0,0 +1,10 @@
+/**
+ * Centralized query and mutation keys for React Query
+ * This ensures consistent cache management across the application
+ */
+export const queryKeys = {
+  auth: {
+    register: ['auth', 'register'] as const,
+    login: ['auth', 'login'] as const,
+  },
+} as const;
diff --git a/frontend/lib/query/mutations/auth.ts b/frontend/lib/query/mutations/auth.ts
@@ -0,0 +1,39 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api/client';
+import { queryKeys } from '../keys';
+import {
+  RegisterInput,
+  LoginInput,
+  AuthResponse,
+  ApiError,
+} from '../types';
+
+/**
+ * Mutation hook for user registration
+ * @param options - Optional mutation options for callbacks and config
+ * @returns Mutation object with mutate, isPending, isError, etc.
+ */
+export function useRegisterMutation(
+  options?: UseMutationOptions<AuthResponse, ApiError, RegisterInput>
+) {
+  return useMutation<AuthResponse, ApiError, RegisterInput>({
+    mutationKey: queryKeys.auth.register,
+    mutationFn: (data: RegisterInput) => apiClient.register(data),
+    ...options,
+  });
+}
+
+/**
+ * Mutation hook for user login
+ * @param options - Optional mutation options for callbacks and config
+ * @returns Mutation object with mutate, isPending, isError, etc.
+ */
+export function useLoginMutation(
+  options?: UseMutationOptions<AuthResponse, ApiError, LoginInput>
+) {
+  return useMutation<AuthResponse, ApiError, LoginInput>({
+    mutationKey: queryKeys.auth.login,
+    mutationFn: (data: LoginInput) => apiClient.login(data),
+    ...options,
+  });
+}
diff --git a/frontend/lib/query/types.ts b/frontend/lib/query/types.ts
@@ -0,0 +1,29 @@
+/**
+ * TypeScript types for authentication mutations
+ */
+
+export interface RegisterInput {
+  email: string;
+  password: string;
+  name: string;
+}
+
+export interface LoginInput {
+  email: string;
+  password: string;
+}
+
+export interface AuthResponse {
+  token: string;
+  user: {
+    id: string;
+    email: string;
+    name: string;
+  };
+}
+
+export interface ApiError {
+  message: string;
+  statusCode: number;
+  errors?: Record<string, string[]>;
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,19 +9,21 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.2",
+    "@tanstack/react-query-devtools": "^5.90.2",
+    "next": "15.5.4",
     "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "next": "15.5.4"
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.5.4",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,4 @@ export default function Home() { @@
           <h1>HomePage</h1>
         </section>
       );
-    }
+    }