Whiscash

A modern web application built with React, TypeScript, and Vite.

Backend Repository

📝 Product Description

Whiscash is a modern personal finance management app with multi-wallet support, analytics dashboards, transaction tracking, and secure authentication. It features real-time analytics, responsive design, and PWA support.

🚀 Features

• Multi-wallet management with different currencies
• Financial dashboard with interactive charts (Pie, Bar, etc.)
• Transaction tracking, filtering, and categorization
• Secure authentication (Clerk)
• Real-time analytics and event tracking (PostHog)
• Responsive, mobile-first UI
• PWA support (installable app)
• Data fetching and caching (React Query)
• Form validation (React Hook Form + Zod)
• Smooth animations (Motion)
• Modular, reusable components (modals, selectors, carousels, loaders, etc.)
• Country/currency selection, date/time pickers, image input
• Archive, filter, and search features for transactions and wallets

📦 Prerequisites

• Node.js (Latest LTS version recommended)
• Yarn package manager

🛠️ Installation

1. Clone the repository:

git clone https://github.com/arixpsy/whiscash.git
cd whiscash

2. Install dependencies:

yarn install

3. Create a .env file in the root directory and add your environment variables:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_key
VITE_WHISCASH_BE_URL=your_backend_url
VITE_PUBLIC_POSTHOG_KEY=your_posthog_key
VITE_PUBLIC_POSTHOG_HOST=your_posthog_host

🔧 Development

To start the development server:

yarn dev

The application will be available at http://localhost:5173

🏗️ Available Scripts

• yarn dev - Start development server
• yarn build - Build for production
• yarn preview - Preview production build
• yarn lint - Run ESLint
• yarn format - Format code with Prettier

📚 Tech Stack

• React 19 - UI Library
• TypeScript - Programming Language
• Vite - Build Tool
• Clerk - Authentication
• React Query - Data Fetching
• React Hook Form - Form Management
• Zod - Schema Validation
• Tailwind CSS - Styling
• Motion - Animations
• PostHog - Analytics
• MUI - Material UI components (Pie Chart mainly)
• D3 - Charts (Custom scrollable bar chart)
• Swiper - Carousels
• Virtua - Virtualized lists
• Country Flag Icons, ISO Country Currency
• Axios - API requests

📱 PWA Support

This application includes PWA (Progressive Web App) support through vite-plugin-pwa, allowing users to install it as a standalone application on supported devices.

🔒 Environment Variables

The following environment variables are required:

• VITE_CLERK_PUBLISHABLE_KEY - Your Clerk authentication publishable key
• VITE_WHISCASH_BE_URL - Backend API URL (e.g., http://localhost:9000)
• VITE_PUBLIC_POSTHOG_KEY - Your PostHog public key
• VITE_PUBLIC_POSTHOG_HOST - Your PostHog API host

� Screenshots

Below are screenshots of the main pages of Whiscash:

Page	Screenshot
Dashboard
Add Transaction
Add Transaction (Receipt via camera)
Add Transaction (item via camera)
Wallets
Add Wallet
Wallet
History
Transaction

�📄 License

This project is licensed under the MIT License - see the LICENSE file for details.