feat: implement frontend with TDD (Part 8)

- Scaffold Vite + React 19 + TypeScript strict project
- Neumorphic dark design system (Tailwind v3, amber/orange LED accents)
- Zustand stores for auth (persist) and UI state (notifications, sidebar)
- TanStack Query v5 hooks for server CRUD operations
- WebSocket hook with reconnection backoff and query invalidation
- Components: StatusLed, Sidebar, ServerCard, LoginPage, DashboardPage
- Protected routing with auth guard
- Axios client with JWT interceptor and 401 redirect
- 68 tests across 11 test files (89% statement coverage, 90% function coverage)
- TDD workflow: RED validated, GREEN achieved, coverage verified
This commit is contained in:
Tran G. (Revernomad) Khoa
2026-04-16 23:53:25 +07:00
parent b17d199301
commit 88424675b5
43 changed files with 8144 additions and 0 deletions

34
frontend/src/lib/api.ts Normal file
View File

@@ -0,0 +1,34 @@
import axios from "axios";
const API_BASE = import.meta.env.VITE_API_URL ?? "http://localhost:8000";
export const apiClient = axios.create({
baseURL: API_BASE,
headers: { "Content-Type": "application/json" },
timeout: 30_000,
});
apiClient.interceptors.request.use((config) => {
const token = localStorage.getItem("languard_token");
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
apiClient.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
localStorage.removeItem("languard_token");
window.location.href = "/login";
}
return Promise.reject(error);
},
);
export type ApiResponse<T> = {
success: boolean;
data: T;
error?: string;
};