Skip to main content

pricing_dashboard

React + TypeScript dashboard for pricing management and visualization.

Overview​

The pricing_dashboard is a modern React application that provides:

  • Pricing data visualization
  • Event management UI
  • Inventory visualization
  • Analytics and reporting

Technology Stack​

  • Framework: React 18.x
  • Language: TypeScript 5.x
  • Build Tool: Vite 5.x
  • UI Components: Radix UI
  • Styling: Tailwind CSS
  • State Management: TanStack Query (React Query)
  • API: tRPC
  • Charts: Recharts
  • Search: MeiliSearch client

Getting Started​

Prerequisites​

  • Node.js 18+
  • Bun (preferred) or npm

Setup​

  1. Install dependencies:

    bun install

  2. Start development server:

    bun run dev

  3. Access application: http://localhost:5173

Key Commands​

Development​

  • bun run dev - Start development server
  • bun run build - Build for production
  • bun run preview - Preview production build

Code Quality​

  • bun run lint - Lint code

Architecture​

The dashboard is a single-page application (SPA) built with:

  • Vite for fast development and building
  • React Router for navigation
  • TanStack Query for server state management
  • tRPC for type-safe API communication
  • Radix UI for accessible components
  • Tailwind CSS for styling

Environment Variables​

Configured via environment variables:

Features​

Pricing Visualization​

  • Real-time price updates
  • Price history charts
  • Comparison views

Event Management​

  • Event listing and search
  • Event details
  • Event matching visualization

Inventory Management​

  • Inventory listing
  • Inventory status
  • Purchase tracking

Analytics​

  • Performance metrics
  • Cost analysis
  • Trend visualization

Development​

Project Structure​

pricing_dashboard/
├── src/
│   ├── components/     # React components
│   ├── pages/         # Page components
│   ├── hooks/          # Custom hooks
│   ├── lib/           # Utilities
│   └── api/           # API client
├── public/             # Static assets
└── package.json

Code Quality​

The project uses:

  • ESLint for linting
  • TypeScript for type safety
  • Prettier for formatting (if configured)

Building for Production​

# Build
bun run build

# Preview build
bun run preview

Documentation​