Skip to content

replit.md

Latest commit

 

History

History
133 lines (101 loc) · 5.42 KB

replit.md

File metadata and controls

133 lines (101 loc) · 5.42 KB

SplitExpenses - Expense Splitting Tool

Overview

SplitExpenses is a web-based expense splitting application that helps friends fairly divide shared expenses. The tool features an intuitive web interface where users can add friends and their individual expense amounts, then calculates how to split costs equitably among the group with detailed settlement instructions.

System Architecture

Architecture Type: Client-Side Web Application

  • Frontend: HTML5, CSS3, JavaScript (Vanilla)
  • Interface: Responsive web interface with modern UI/UX
  • Processing: Client-side JavaScript calculations
  • Data Storage: Browser session storage (no persistent storage)
  • Deployment: Static web hosting via Python HTTP server

Key Components

Frontend Components

  1. User Interface (index.html)

    • Responsive design with Bootstrap-inspired styling
    • Interactive friend management with add/edit/delete functionality
    • Real-time expense calculation and results display
    • Professional styling with Font Awesome icons

  2. Calculation Engine (JavaScript)

    • Computes total expenses and equal share per person
    • Calculates individual balances (who owes/is owed)
    • Generates settlement instructions for optimal money transfers
    • Handles currency formatting and precision

  3. Input Validation

    • Real-time form validation
    • Duplicate name prevention
    • Non-negative amount validation
    • Error messaging system

Data Structures

  • Friends Object: {friend_name: amount_spent}
  • Balance Calculations: Real-time balance tracking
  • Settlement Instructions: Optimized payment recommendations
  • Currency Display: Israeli Shekel (₪) formatting with 2 decimal precision

Data Flow

  1. Input Phase: Users add friends via web form interface
  2. Validation: Client-side validation prevents invalid data entry
  3. Storage: Data stored in browser memory during session
  4. Calculation: Real-time computation of balances and settlements
  5. Display: Results shown in organized cards with summary and detailed breakdowns
  6. Reset: Easy restart functionality for new calculations

Features

Core Functionality

  • Friend Management: Add, edit, and remove friends with expenses
  • Real-time Calculations: Instant expense splitting calculations
  • Settlement Instructions: Clear guidance on who pays whom
  • Responsive Design: Works on desktop and mobile devices
  • Professional UI: Modern interface with icons and visual feedback

User Experience Enhancements

  • Loading Animations: Visual feedback during calculations
  • Keyboard Support: Enter key navigation for quick data entry
  • Inline Editing: Edit friend data without losing context
  • Error Handling: Clear error messages for user guidance
  • Visual Feedback: Icons and color coding for better usability

External Dependencies

  • Font Awesome: Icons for enhanced visual design
  • No Backend Required: Pure client-side application
  • Cross-Platform: Runs in any modern web browser

Deployment Strategy

Static Web Hosting:

  • Served via Python HTTP server on port 5000
  • No installation required beyond Python runtime
  • Accessible via web browser at http://localhost:5000
  • Ready for deployment to static hosting platforms

Development Workflow:

python -m http.server 5000 --directory .

Replit Integration:

  • Multiple workflow configurations available
  • JavaScript-only static serving (current default)
  • Easy deployment through Replit's hosting infrastructure

Technical Implementation

Frontend Technologies

  • HTML5: Semantic markup with accessibility considerations
  • CSS3: Modern styling with gradients, animations, and responsive design
  • Vanilla JavaScript: No framework dependencies, lightweight implementation
  • Font Awesome: Professional icon set for enhanced UX

Architecture Benefits

  • Fast Loading: No heavy frameworks or dependencies
  • Browser Compatibility: Modern JavaScript compatible with all current browsers
  • Offline Capable: Works without internet connection after initial load
  • Mobile Responsive: Optimized for all screen sizes

User Preferences

Preferred communication style: Simple, everyday language with professional visual design.

Changelog

  • June 29, 2025: Initial setup and console application
  • June 29, 2025: Complete redesign as web application with modern UI
  • June 29, 2025: Added friend management, inline editing, and settlement calculations
  • June 29, 2025: Implemented responsive design with professional styling

Technical Notes

  • Error Handling: Comprehensive client-side validation and error messaging
  • User Experience: Intuitive interface with keyboard shortcuts and visual feedback
  • Precision: Financial calculations rounded to 2 decimal places with proper currency formatting
  • Memory Usage: Lightweight client-side processing with minimal resource usage
  • Extensibility: Modular JavaScript structure allows for easy feature additions
  • Performance: Optimized for instant calculations and smooth user interactions

Future Enhancement Opportunities

  • Data Persistence: Local storage or cloud integration
  • Export Functionality: Generate PDF summaries or export data
  • Multi-Currency Support: Support for different currencies
  • Group Templates: Save and reuse common expense splitting scenarios
  • Advanced Settlement Options: Multiple settlement strategies