Fradie Frontend API Integration

This frontend is integrated with the backend API using:

• Axios (HTTP client)
• TanStack Query (server-state cache, query, mutation)

API files (learning-friendly structure)

• src/lib/apiClient.js

  • Axios instance setup (baseURL, withCredentials, JSON headers)
  • Shared request function with centralized error handling

• src/lib/apiService.js

  • One file for reusable GET/POST/PUT/DELETE methods
  • Clear grouped APIs by feature (authApi, userApi, productApi, adminApi)
  • Query key map for TanStack Query (queryKeys)

• src/lib/queryClient.js

  • QueryClient defaults (staleTime, retry strategy)

Auth and session flow

• src/components/context/AuthContext/AuthProvider.jsx

  • Reads Better Auth session from /api/auth/get-session
  • Exposes login, register, logout, user, isAuthenticated

• src/components/authentication/Login.jsx

  • Uses authApi.login mutation
  • Supports demo account auto-fill

• src/components/authentication/Register.jsx

  • Uses authApi.register mutation

• src/components/authentication/RequireAuth.jsx

  • Protects user-only pages

• src/components/authentication/RequireAdmin.jsx

  • Protects admin-only pages

Navbar behavior updates

• src/components/common/Navbar.jsx
  • First visit modal shows demo credentials:
    • user demo: user@demo.com / user12345
    • admin demo: admin@demo.com / admin12345
  • If logged out: shows login/register options
  • If logged in: shows My Account (and Admin Dashboard for admin role)
  • Hides login option after successful login/register

User panel dynamic pages

• src/components/users/Userdashboard.jsx

  • GET /api/users/me/dashboard

• src/components/users/UserOrder.jsx

  • GET /api/orders/me
  • POST /api/orders/:id/cancel

• src/components/users/UserAddress.jsx

  • GET /api/users/me/addresses
  • POST /api/users/me/addresses
  • PUT /api/users/me/addresses/:id
  • DELETE /api/users/me/addresses/:id

• src/components/users/UserAccount.jsx

  • GET /api/users/me
  • PUT /api/users/me
  • POST /api/users/me/password

Admin panel dynamic pages

• src/components/Admin/AdminDashBoard.jsx

  • GET /api/admin/dashboard

• src/components/Admin/OrderManagement.jsx

  • GET /api/admin/orders
  • PUT /api/admin/orders/:id/status

• src/components/Admin/ProductManagement.jsx

  • GET /api/products?includeDrafts=true
  • POST /api/products
  • PUT /api/products/:id
  • DELETE /api/products/:id

App and provider wiring

• src/main.jsx

  • QueryClientProvider + AuthProvider

• src/App.jsx

  • Route protection for /my-account and /admin

Environment variable

Create .env in frontend root:

Run

pnpm install
pnpm dev