# Finance Tracker Pro - Full Stack Application

## Overview

This is a full-stack financial tracking application built with React, Express, TypeScript, and in-memory storage (with PostgreSQL support available). The application provides comprehensive financial management features including transaction tracking, category management, reporting, and admin controls. It uses modern web development practices with a clean, component-based architecture.

**Status**: ✅ Fully functional, tested, and deployment-ready (January 2025)

## User Preferences

Preferred communication style: Simple, everyday language.

## Recent Changes

✅ Built complete financial tracking application with money in/out functionality
✅ Implemented category management with editable categories during data entry
✅ Created comprehensive reporting system for category-based and summary reports
✅ Added admin configuration for entity settings and user management
✅ Established responsive UI with modern design components
✅ Fixed TypeScript type safety issues in storage layer

## System Architecture

### Frontend Architecture
- **Framework**: React 18 with TypeScript
- **Routing**: Wouter for lightweight client-side routing
- **State Management**: Zustand for global auth state, React Query for server state
- **UI Framework**: Radix UI components with shadcn/ui design system
- **Styling**: Tailwind CSS with CSS variables for theming
- **Build Tool**: Vite for fast development and optimized builds

### Backend Architecture
- **Runtime**: Node.js with Express.js framework
- **Language**: TypeScript with ES modules
- **Database ORM**: Drizzle ORM for type-safe database operations
- **Database**: PostgreSQL with Neon serverless driver
- **API Design**: RESTful API with JSON responses
- **Development**: Hot reloading with Vite integration

### Authentication & Authorization
- **Authentication**: Simple session-based auth (development setup)
- **Authorization**: Role-based access control (admin/user roles)
- **State Persistence**: Zustand with localStorage persistence
- **Default Setup**: Auto-login with admin user for development

## Key Components

### Database Schema
- **Users**: User management with roles, activity status, and login tracking
- **Categories**: Income/expense categories with default category support
- **Transactions**: Financial transactions linked to users and categories
- **Entity Settings**: Application-wide configuration (currency, fiscal year, etc.)

### Frontend Components
- **Layout**: Responsive layout with sidebar navigation and top navbar
- **Forms**: React Hook Form with Zod validation for type safety
- **Tables**: Data tables for transaction and user management
- **Charts**: Ready for financial data visualization
- **Modals**: Dialog-based forms for creating/editing entities

### API Endpoints
- **Auth**: `/api/auth/*` - User authentication
- **Users**: `/api/users/*` - User management (admin only)
- **Categories**: `/api/categories/*` - Category CRUD operations
- **Transactions**: `/api/transactions/*` - Transaction management
- **Reports**: `/api/summary/*` - Financial reporting and analytics
- **Settings**: `/api/settings/*` - Application configuration

## Data Flow

### Client-Server Communication
1. Frontend makes HTTP requests to Express API endpoints
2. Server validates requests and interacts with PostgreSQL via Drizzle ORM
3. Responses are cached client-side using React Query
4. Real-time updates trigger cache invalidation and UI refresh

### State Management Flow
1. Authentication state managed globally with Zustand
2. Server data cached and synchronized with React Query
3. Form state handled locally with React Hook Form
4. UI state (modals, filters) managed with local React state

### Database Operations
1. Drizzle schemas define table structures and relationships
2. Type-safe queries ensure data integrity
3. Migrations handled through Drizzle Kit
4. Connection pooling via Neon serverless driver

## External Dependencies

### Core Dependencies
- **@neondatabase/serverless**: PostgreSQL serverless driver
- **drizzle-orm**: Type-safe ORM with PostgreSQL dialect
- **@tanstack/react-query**: Server state management and caching
- **@radix-ui/***: Headless UI components for accessibility
- **react-hook-form**: Form state management with validation
- **zod**: Schema validation for forms and API
- **zustand**: Lightweight state management

### Development Tools
- **Vite**: Build tool with hot module replacement
- **TypeScript**: Static type checking
- **Tailwind CSS**: Utility-first CSS framework
- **ESBuild**: Fast JavaScript bundler for production

### UI/UX Libraries
- **class-variance-authority**: Component variant management
- **clsx**: Conditional class name utility
- **date-fns**: Date manipulation and formatting
- **lucide-react**: Icon library

## Deployment Strategy

### Development Setup
- **Frontend**: Vite dev server with hot reloading
- **Backend**: tsx for TypeScript execution with file watching
- **Database**: PostgreSQL with Neon serverless driver
- **Environment**: NODE_ENV-based configuration

### Production Deployment (Replit Ready)
- **Build Process**: `npm run build` creates optimized production build
- **Frontend**: Vite build outputs to `dist/public`
- **Backend**: ESBuild bundles server code to `dist/index.js`
- **Server**: Single Node.js process serving both API and static files
- **Database**: PostgreSQL connection via DATABASE_URL environment variable
- **Port Binding**: Configured to use `0.0.0.0` for accessible deployment

### Deployment Instructions
1. **Automatic Deployment**: Application is configured for one-click Replit deployment
2. **Environment**: DATABASE_URL is automatically provided by Replit PostgreSQL
3. **Build Command**: `npm run build` (automatically handled by Replit)
4. **Start Command**: `npm start` (runs the production server)
5. **Health Check**: Server responds on all configured routes

### Configuration Management
- **Environment Variables**: DATABASE_URL for database connection (auto-configured)
- **Build Scripts**: Optimized for Replit deployment infrastructure
- **Static Files**: Express serves built frontend assets in production
- **Error Handling**: Comprehensive error middleware with JSON responses
- **Security**: CORS and security headers configured for production

The application follows modern full-stack patterns with strong typing throughout, comprehensive form validation, and a clean separation between client and server concerns. The architecture supports both development and production deployment with minimal configuration changes.