A Simple Example of a Modern Crypto Dashboard

Dashboard is a lightweight, modular crypto dashboard built with React, TypeScript, and modern frontend tools.
It demonstrates how to organize a scalable, component-driven architecture with reusable UI, local state stores, and route-based code-splitting.

• router/ — Configured routing using react-router-dom@7
• pages-data.tsx — Centralized route configuration and metadata
• Highlights:
  • Dynamic route loading
  • Protected/private routes
  • Lazy component imports for performance

• Built on top of shadcn/ui + Radix UI
• Includes:
  • Button — 7 design variants
  • DataTable — custom table with sorting and pagination
  • Form components with validation and accessibility
• Customization through:
  • components.json
  • CSS variables
  • Variant props

Organized by feature modules:

/accounts
  /modals
    EditAccount.tsx
    DeleteAccount.tsx
  index.tsx
  store.ts

Each module includes:

• Feature-specific UI logic
• Local state (Zustand store)
• Action modals (edit/delete dialogs)

• _auth/ — Minimal login/register layout
  • Centered form and simplified design
• _main/ — Default dashboard layout
  • Header navigation
  • Notification system
  • Responsive grid
• _pay/ — Payment and transaction forms
  • Custom animations and transitions

• React 19 (Concurrent Mode, Hooks)
• TypeScript 5.3
• Vite 5 (fast build tool)
• Tailwind CSS 4 (utility-first styling)

• ESLint (TypeScript config)
• Prettier (formatting)
• Husky (pre-commit hooks)

generateSessions() creates:

• Realistic crypto transactions
• Valid UUIDs
• Randomized amounts and timestamps

interface Transaction {
  id: string;
  amount: number;
  status: "pending" | "completed";
}

Features:

• Virtualized rows
• Custom cell renderers
• Client-side sorting and pagination

Example usage:

<DataTable
  columns={columns}
  data={transactions}
  onRowClick={(row) => ...}
/>

1. Create a folder under components/
2. Implement:
   • Main feature component
   • Local Zustand store
   • Action modals
3. Register the new route in pages-data.tsx

Step-by-step migration:

1. Create an API client
2. Replace mocks with real requests
3. Add error handling
4. Implement caching and retry logic

Optimizations:

• Route-based code splitting
• Lazy loading of heavy components
• Optimized assets and images
• Tree-shaking for bundle reduction

# Development
npm run dev

# Production build
npm run build

# Lint check
npm run lint

# Run tests
npm run test

• Reuse components from ui/
• Follow the module directory pattern
• Test across responsive breakpoints

• Work with the official Figma design
• Stick to the default color palette
• Check text contrast and accessibility

YoPay is a simple yet structured example of a crypto dashboard.
It’s built with modern tools, follows modular architecture principles,
and is ready for future expansion — whether it’s integrating APIs, analytics, or blockchain data.

Developed by (@wkkkis)
Part of the Experiments initiative.