Maglo Dashboard

Modern fintech dashboard sample built with React, TypeScript, Vite and Tailwind CSS.
The app ships with authentication screens, a protected dashboard layout, wallet/transaction widgets and a fully wired API layer (Axios + React Query + token refresh).

Features

• Authentication flow – Sign in/up forms powered by react-hook-form, zod validation and custom sanitizers (src/utils/sanitize.ts) to strip scripts, tags and control characters before payloads leave the browser.
• Protected dashboard – ProtectedRoute gates the /dashboard routes; persistent auth state is handled by a zustand store with localStorage-backed tokens.
• Data fetching layer – Shared Axios client (src/lib/api/client.ts) injects bearer tokens, queues refresh-token retries and surfaces errors through react-hot-toast. Data access is wrapped with React Query hooks (src/lib/api/hooks/*).
• Financial widgets – Summary cards, a working-capital chart (Recharts), wallet carousel, scheduled transfers and recent transactions components under src/components/dashboard.
• Resilience & UX – Global ErrorBoundary, skeleton loaders, responsive layout, Tailwind v4 design tokens, and toast notifications for success/error scenarios.

Tech Stack

• React 19, TypeScript, Vite 7
• Tailwind CSS 4, custom design tokens in src/index.css
• State: Zustand (persist middleware)
• Data: React Query, Axios
• Forms & validation: react-hook-form, zod, custom sanitizers
• Charts & UI helpers: Recharts, react-loading-skeleton, react-hot-toast

Project Structure

The high-level layout is:

src/
  components/         // Layout, auth, dashboard UI
  lib/api/           // Axios client, domain API modules and hooks
  pages/             // Auth, Dashboard, 404 routes
  store/             // Zustand auth store
  providers/         // React Query provider
  utils/             // sanitize, validation, formatting helpers

Getting Started

1. Install dependencies

   npm install

2. Configure environment Create a .env (or .env.local) at the project root:

   VITE_API_BASE_URL=http://localhost:3000/api

   If unset, the app falls back to http://localhost:3000/api.
3. Run the app

   npm run dev

   Vite will print the local and network URLs.

Available Scripts

Command	Description
npm run dev	Start Vite dev server with HMR
npm run build	Type-check then create a production build
npm run preview	Preview the production bundle locally
npm run lint	Run ESLint across the project

API & Data Notes

• Axios client automatically attaches the stored bearer token, retries requests through a refresh-token queue, and redirects to /auth when refresh fails.
• Domain-specific modules live under src/lib/api/* and expose both raw request helpers (e.g., getFinancialSummary) and hook wrappers (e.g., useFinancialSummaryQuery).
• Update VITE_API_BASE_URL to point at your backend; endpoints are expected to follow the /financial/..., /wallet/..., /transactions/... patterns used in the API modules.

UI & Security Considerations

• All free-text inputs (full name, email, password) pass through sanitizer utilities before validation and submission.
• ErrorBoundary and toast notifications surface runtime and API errors, while skeleton loaders (react-loading-skeleton) keep the dashboard responsive during fetches.

Further Reading

• src/utils/sanitize.ts – implementation details for input cleaning.
• src/lib/api/client.ts – token handling & error strategies.