Step 1: Use shared API client

src/api/client.ts

@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export const apiClient = axios.create({
+  baseURL: "/api",
+});

src/components/header/header.tsx

@@ -1,7 +1,7 @@
-import axios from "axios";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
+import { apiClient } from "@/api/client";
 import { LoginDialog } from "@/components/login-dialog";
 import { Button } from "@/components/ui/button";
 import { Me } from "@/types";
@@ -13,16 +13,16 @@ export function Header() {
   const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
-    axios
-      .get<{ data: Me }>("/api/me")
+    apiClient
+      .get<{ data: Me }>("/me")
       .then((response) => setMe(response.data.data))
       .catch(() => setHasError(true))
       .finally(() => setIsLoadingMe(false));
   }, []);
 
   async function logout() {
     setIsLoadingLogout(true);
-    await axios.post(`/api/logout`);
+    await apiClient.post("/logout");
     setIsLoadingLogout(false);
     window.location.reload();
   }

src/components/login-dialog/login-dialog.tsx

@@ -1,6 +1,6 @@
-import axios from "axios";
 import { useState } from "react";
 
+import { apiClient } from "@/api/client";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -37,7 +37,7 @@ export function LoginDialog({ children }: LoginDialogProps) {
     const username = event.currentTarget.elements.username.value;
     const password = event.currentTarget.elements.password.value;
 
-    await axios.post(`/api/login`, { username, password });
+    await apiClient.post("/login", { username, password });
 
     setIsLoading(false);
     setOpen(false);

src/components/shout/reply-dialog.tsx

@@ -1,6 +1,6 @@
-import axios from "axios";
 import { useEffect, useState } from "react";
 
+import { apiClient } from "@/api/client";
 import { LoginDialog } from "@/components/login-dialog";
 import { Button } from "@/components/ui/button";
 import {
@@ -38,8 +38,8 @@ export function ReplyDialog({ children, shoutId }: ReplyDialogProps) {
   const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
-    axios
-      .get<{ data: Me }>("/api/me")
+    apiClient
+      .get<{ data: Me }>("/me")
       .then((response) => setIsAuthenticated(Boolean(response.data.data)))
       .catch(() => setHasError(true))
       .finally(() => setIsLoading(false));
@@ -59,17 +59,17 @@ export function ReplyDialog({ children, shoutId }: ReplyDialogProps) {
       if (files?.length) {
         const formData = new FormData();
         formData.append("image", files[0]);
-        const imageResponse = await axios.post<{ data: Image }>(
-          "/api/image",
+        const imageResponse = await apiClient.post<{ data: Image }>(
+          "/image",
           formData
         );
         imageId = imageResponse.data.data.id;
       }
-      const newShoutResponse = await axios.post<{ data: Shout }>(`/api/shout`, {
+      const newShoutResponse = await apiClient.post<{ data: Shout }>(`/shout`, {
         message,
         imageId,
       });
-      await axios.post(`/api/shout/${shoutId}/reply`, {
+      await apiClient.post(`/shout/${shoutId}/reply`, {
         replyId: newShoutResponse.data.data.id,
       });
       setOpen(false);

src/pages/feed/feed.tsx

@@ -1,6 +1,6 @@
-import axios from "axios";
 import { useEffect, useState } from "react";
 
+import { apiClient } from "@/api/client";
 import { LoadingView } from "@/components/loading";
 import { ShoutList } from "@/components/shout-list";
 import { FeedResponse, Image, User } from "@/types";
@@ -10,8 +10,8 @@ export function Feed() {
   const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
-    axios
-      .get<FeedResponse>("/api/feed")
+    apiClient
+      .get<FeedResponse>("/feed")
       .then((response) => setFeed(response.data))
       .catch(() => setHasError(true));
   }, []);

src/pages/user-profile/user-profile.tsx

@@ -1,7 +1,7 @@
-import axios from "axios";
 import { useEffect, useState } from "react";
 import { Navigate, useParams } from "react-router";
 
+import { apiClient } from "@/api/client";
 import { LoadingSpinner } from "@/components/loading";
 import { ShoutList } from "@/components/shout-list";
 import { UserResponse, UserShoutsResponse } from "@/types";
@@ -16,13 +16,13 @@ export function UserProfile() {
   const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
-    axios
-      .get<UserResponse>(`/api/user/${handle}`)
+    apiClient
+      .get<UserResponse>(`/user/${handle}`)
       .then((response) => setUser(response.data))
       .catch(() => setHasError(true));
 
-    axios
-      .get<UserShoutsResponse>(`/api/user/${handle}/shouts`)
+    apiClient
+      .get<UserShoutsResponse>(`/user/${handle}/shouts`)
       .then((response) => setUserShouts(response.data))
       .catch(() => setHasError(true));
   }, [handle]);