React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is enabled on this template. See this documentation for more information.

Note: This will impact Vite dev & build performances.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

Credit Card SaaS - Frontend

A modern, responsive React + TypeScript + Vite SaaS frontend for credit card management and financial transaction tracking.

🚀 Quick Start

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Run linter
pnpm lint

⚡ Key Features

Snappy Navigation

• Instant page transitions - Navigate between pages with 0ms blocking
• Automatic prefetching - Other pages' data loads in background
• Smart caching - React Query caches all data for instant access
• Skeleton loaders - See content indicators while data loads

Performance

• React Compiler enabled - Automatic memoization and optimizations
• Vite HMR - Fast hot module replacement during development
• Code splitting - Lazy-loaded routes for smaller initial bundle
• Query caching - React Query handles all data fetching and caching

Technology Stack

• React 19 with TypeScript
• Vite - Lightning fast build tool
• Tailwind CSS + CVA - Utility-first styling with variants
• Radix UI - Headless, accessible component library
• React Query - Server state management
• React Router - SPA routing
• Sonner - Toast notifications

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # Radix UI-based primitives
│   ├── system/         # Layout & system components
│   └── skeletons/      # Loading skeletons
├── pages/              # Page components
├── hooks/              # Custom React hooks
│   └── api/           # API query hooks
├── lib/                # Utilities & helpers
│   ├── api/           # API client functions
│   ├── auth/          # Authentication utilities
│   └── types/         # TypeScript types
├── layouts/            # Layout wrappers
├── context/            # React Context
└── assets/             # Static assets

🎯 Navigation & Prefetching

The app implements intelligent data prefetching to enable snappy navigation:

How It Works

1. User navigates to a page → Router changes instantly (0ms delay)
2. Page component mounts → Shows skeleton immediately
3. Data loads → Content renders when ready
4. After page loads → Automatically prefetch other pages' data

Example Flow

Dashboard loads
├─ Shows content
└─ Prefetches: Transactions, Peoples, Cards (background)

User clicks "Transactions"
├─ Navigate INSTANTLY (data cached)
├─ Shows transactions
└─ Prefetches: Dashboard, Peoples, Cards (background)

User clicks "Peoples"
├─ Navigate INSTANTLY (data cached)
├─ Shows peoples
└─ Prefetches: Dashboard, Transactions, Cards (background)

Pages

• Dashboard (/) - Overview with stats and recent transactions
• Transactions (/transactions) - List and search transactions
• Transaction Detail (/transactions/:id) - Single transaction details
• Peoples (/peoples) - Contact management
• Cards (/cards) - Credit/debit card management
• Profile (/profile) - User profile settings
• Add Transaction (/add-transaction) - Transaction creation

🔐 Authentication

• Token-based authentication via src/lib/auth/token.ts
• AuthContext provides useAuth() hook
• Protected routes via ProtectedRoute component
• Query client prefetches user data on app init
• Cross-tab token sync with ccs:token-changed event

📊 Data Fetching

All data fetching uses React Query with smart caching:

• Dashboard: 5 minute stale time
• Transactions: 3 minute stale time
• Peoples: 10 minute stale time
• Cards: 10 minute stale time

Hooks available in src/hooks/api/useQueries.ts:

useDashboardData();
useTransactionsQuery(page, limit);
useTransactionQuery(id);
usePeoplesQuery(page, limit);
useCardsQuery(page, limit);

🎨 Styling

Uses Tailwind CSS with CVA (class-variance-authority) for component variants:

// Button with variants
<Button variant="default" size="lg">Click me</Button>
<Button variant="outline" size="sm">Secondary</Button>
<Button variant="destructive">Danger</Button>

Dark mode support via dark: prefix throughout the app.

🔧 Development

Path Aliases

@/ resolves to ./src/

// Instead of
import { Button } from "../../components/ui/button";

// Use
import { Button } from "@/components/ui/button";

Custom Hooks

useApiToast - API calls with toast feedback

const { executeApiCall } = useApiToast();
await executeApiCall({
  apiCall: (signal) => fetch("/api/data", { signal }),
  successMessage: "Data loaded!",
});

usePrefetchPages - Prefetch other pages' data

const { prefetchDashboard, prefetchTransactions } = usePrefetchPages();

📝 Build & Deploy

Development Build

pnpm dev

Production Build

pnpm build    # TypeScript check + Vite build
pnpm preview  # Preview dist/ locally

Deployment

• Build output in dist/
• Deploy to Netlify, Vercel, or any static host
• See netlify.toml for Netlify configuration

📚 Documentation

Additional documentation in docs/ folder:

• INSTANT_NAVIGATION_FIX.md - How instant navigation works
• AUTOMATIC_PAGE_PREFETCHING.md - Page prefetching system
• SNAPPY_NAVIGATION.md - Navigation improvements
• REACT_QUERY_GUIDE.md - React Query patterns

🤝 Contributing

Follow these patterns:

1. Use TypeScript - Strict mode enabled
2. Component structure - Use Radix UI + CVA for styling
3. API calls - Use useApiToast for consistent UX
4. Error handling - Extract with getApiErrorMessage()
5. Queries - Use hooks from @/hooks/api/useQueries

📄 License

Private project - All rights reserved

---

Built with ❤️ for snappy SPA navigation

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs["recommended-typescript"],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);