Project52 – Week 16

EvenSteven: A Smart, Secure, and Fully Local Expense Splitter

Introduction

In today’s world of bloated SaaS tools, EvenSteven is a refreshing alternative — a fully client-side, privacy-first web application designed for fair and transparent expense splitting.

There’s no login, no data collection, and no server-side storage. All data is handled locally in the browser, ensuring that your payment details, group balances, and contributions never leave your device.

EvenSteven is designed for speed, simplicity, and trust. Whether you’re organizing a group dinner, settling a team lunch, or splitting travel expenses across currencies — you shouldn’t need to create an account or rely on a third-party service to do the math.

Project Overview

EvenSteven is a lightweight single-page web application that helps users split group expenses accurately and efficiently. It offers a highly polished user interface combined with robust mathematical logic to handle both simple and complex expense-sharing scenarios.

Built entirely with HTML, CSS, and vanilla JavaScript, it includes advanced functionality typically found in commercial apps — without any dependencies or backend infrastructure.

Key Features

Core Splitting Capabilities

• Quick Split Mode
  A fast way to evenly divide a single bill across any number of people. Ideal for situations like restaurant checks or shared cab rides.

• Advanced Split Mode
  Designed for real-world complexity — supports custom payment inputs, named participants, and flexible contribution models.

• Three Split Methods

  1. Equal Split – everyone pays the same share

  2. Percentage-Based Split – each person pays a defined proportion

  3. Weight-Based Split – allocate based on shares or usage (e.g. room size, consumption)

• Smart Debt Settlement Algorithm
  Implements a greedy algorithm to minimize the number of transactions required to settle balances between participants.

Enhanced User Experience

• Expense Categorization
  Users can tag expenses by type — such as dinner, groceries, utilities, or entertainment — to organize shared costs more clearly.

• Multi-Currency Support
  Supports 9 major currencies with real-time exchange rate calculations. The interface displays both source and converted totals per person, helping international groups stay aligned.

• Quick Action Presets
  Common values like "$25 Lunch" or "$200 Weekend" can be added instantly via one-tap buttons — ideal for mobile or repeat use cases.

• One-Handed Mobile Mode
  A toggle-based layout shift optimized for thumb reach, allowing users to split bills while standing, walking, or holding a phone in one hand.

Technical Architecture

Frontend Implementation

Framework-Free by Design
EvenSteven is built entirely with HTML5, CSS3, and vanilla JavaScript, deliberately avoiding frameworks like React, Vue, or Angular. This decision ensures maximum portability, faster load times, and total control over the DOM — resulting in a lightweight, dependency-free application that loads in under 100KB and executes instantly on any modern browser.

Single-Page Architecture (SPA)
EvenSteven uses a true SPA pattern powered by custom JavaScript tab-switching logic. All navigation (between Quick Split and Advanced Split modes) is handled via dynamic DOM manipulation without page reloads or route changes. The interface remains reactive without relying on any external libraries or virtual DOM abstraction.

Client-Side Computation
All business logic — including split calculations, currency conversions, and debt settlement — is handled entirely in the browser at runtime. There are no network requests, no cloud storage, and no server-side processing. Every function is optimized for low-memory, high-precision computation, even for groups of up to 50 participants.

Responsive Layout Engine
The interface is designed around a custom 8px baseline grid, with fluid spacing and consistent scaling across breakpoints. Responsive behavior is implemented using CSS Grid and Flexbox, ensuring optimal layout across viewport sizes from 320px mobile screens to 2560px ultra-wide displays.

Styling and User Interface

Dark Mode Visual System
EvenSteven’s UI is anchored in a bold, modern dark theme with deep gradient layers transitioning from #1a1a2e to #0f3460. This is accented with a signature yellow highlight palette (#ffc107) used for primary buttons, hover states, and semantic highlights — providing high visual contrast and a sense of energy without eye strain.

Glassmorphism and Depth Design
UI containers and modals are styled with semi-transparent backgrounds and backdrop-filter: blur() properties, creating a soft glassmorphism effect. This adds visual layering and depth without cluttering the interface, enhancing focus and readability. Shadow layers and border highlights further emphasize hierarchy and interaction zones.

Micro-Interactions and Motion
All form elements, buttons, and interactive areas include subtle transitions and hover/focus animations to create a sense of responsiveness. Input fields expand gently on focus, buttons scale slightly on press, and hover glows provide immediate feedback — creating an interface that feels both tactile and refined.

Mobile Experience Optimization
In addition to being responsive, EvenSteven features a dedicated one-handed mode that adjusts layout alignment and container spacing for thumb-friendly usage. This is ideal for real-world scenarios like splitting bills at a restaurant or during travel, where users may only have one hand available to interact with the screen.

Core Algorithms

EvenSteven’s mathematical engine is designed for accuracy, fairness, and real-world reliability. Every computational layer — from how shares are distributed to how transactions are resolved — has been carefully built to maintain user trust, avoid edge-case errors, and operate with near-instant responsiveness.

Debt Minimization

EvenSteven employs a greedy settlement algorithm that minimizes the total number of transactions required to resolve balances between group members. This is not just cosmetic — it reduces user friction by giving a clear, actionable summary of who pays whom, and how much, without redundant transfers.

How it works:

• The algorithm sorts participants into creditors (net positive balances) and debtors (net negative balances).

• It then matches the largest debtors to the largest creditors, transferring the minimum required amount to neutralize one or both parties.

• This process repeats until all balances are within a threshold of zero (typically < 0.01), ensuring efficient convergence.

• Transactions are recorded in natural language form (e.g., "Alice pays Bob $25.00") for easy comprehension.

Benefits:

• O(n log n) performance due to pre-sorting

• Minimal number of payment instructions

• Avoids circular debt chains or unnecessary intermediate transfers

• Fully deterministic, with consistent output across runs

Split Calculations

Splitting expenses sounds simple — but achieving precision and flexibility without creating rounding drift is non-trivial. EvenSteven’s core split engine supports three distinct share calculation models, each optimized for clarity and fairness:

1. Equal Division

All participants are expected to contribute the same amount, regardless of how much they initially paid. The system calculates a uniform per-person share and adjusts based on each individual's actual contribution.

2. Percentage-Based Contribution

Each participant is assigned a fixed percentage of the total expense. The system verifies that the combined percentages equal 100%, then computes exact owed amounts accordingly. Useful for pre-agreed ratios (e.g., in family or partnership contexts).

3. Weight-Based Shares

Each participant is assigned a numeric “weight” or “share count” (e.g., 2, 1, 1), indicating their relative contribution burden. The total cost is divided proportionally based on these values. Ideal for situations like splitting rent based on room size or food based on consumption.

Mathematical integrity:

• All shares are computed using fixed decimal precision to avoid floating-point rounding errors (to 2 decimal places by default)

• Total shares are rebalanced if there is a rounding discrepancy, ensuring the final allocations always sum to the original total

Currency Conversion

While EvenSteven is primarily a local app, it includes a robust, extensible currency module that allows users to work in nine major global currencies:

• USD, EUR, GBP, CAD, AUD, JPY, CHF, CNY, INR

Users can select a source currency and a target currency for conversion display. The system calculates both the original and the converted value of the bill per person and in total — helping international groups maintain clarity.

Current capabilities:

• Exchange rates are based on a static sample table to simulate live data

• Real-time recalculations occur whenever the rate or currency changes

• Converted values are displayed contextually in the result summaries

Built for extension:

• The conversion logic is modular and prepared for integration with real-world APIs (e.g., Open Exchange Rates, XE, or CurrencyLayer)

• The UI and data model can accommodate historical rates, rate sources, and per-line-item conversions in future versions

Privacy & Fully Local Execution

EvenSteven is intentionally engineered to be completely private, offline-friendly, and secure by design, with all logic executing directly in the user’s browser. Unlike most modern apps that rely on cloud databases or authentication layers, EvenSteven prioritizes user trust by ensuring data never leaves the device.

No Authentication or Cloud Syncing

• Zero login required: Users can immediately begin splitting expenses without creating an account, entering an email, or saving any data to a server.

• No tracking, cookies, or analytics: The application contains no embedded trackers or external scripts.

• No storage of user inputs: Once the tab is closed, all information disappears — ideal for sensitive or casual one-time use cases.

100% Client-Side Computation

• All expense calculations, currency conversions, and debt minimization algorithms are performed directly in the browser using vanilla JavaScript.

• No APIs are called during usage, and no personal or financial data is transmitted over the network at any point.

• The entire logic pipeline is stateless, reducing potential security risks and ensuring full data isolation per session.

No Network Dependency (Post-Load)

• Once EvenSteven is loaded into the browser, it requires no internet connection to function. This makes it ideal for:

  • Group dinners at restaurants with poor signal

  • Long-distance travel (trains, rural areas, roaming)

  • Conferences, retreats, or offsite trips without Wi-Fi

• Although it's not packaged as a full PWA yet, the app is small enough (~100KB total) to load instantly and remain cached during the browser session.

Result: You get enterprise-grade financial logic in a privacy-preserving package — with zero risk of surveillance, data leaks, or cloud lock-in.

Use Cases

EvenSteven is designed to be flexible enough for everyday tasks while powerful enough to handle complex financial arrangements. Its local-first architecture, real-time math engine, and customizable splitting logic make it suitable for a wide range of scenarios:

Social & Personal

• Dinner or drinks with friends
  Easily split a check—even when one person pays upfront—without the awkward mental math or back-and-forth texts.

• Weekend getaways or trips
  Handle shared bookings, gas, and food across multiple people with different payment contributions and multiple currencies.

• Roommate expenses
  Divide monthly rent, utilities, cleaning supplies, groceries, and more—whether everyone contributes equally or based on room size and usage.

• Date night or couples budgeting
  Track expenses across two people and settle fairly without arguing over who paid last.

• Weddings and events
  Use percentage splits for group gifts or organize shared costs across family or bridal party contributions.

Group & Team Activities

• Student groups and project teams
  Share the cost of supplies, events, or food between team members on different budgets.

• Office outings and client lunches
  Split meals and activities during work trips or offsites while keeping a clear record of contributions.

• Gaming or streaming squads
  Split shared subscriptions (e.g. Discord Nitro, server hosting) fairly between friends or collaborators.

• Hackathons and side projects
  Track shared investments in tools, APIs, or resources among co-builders and contributors.

Travel & International

• International friend groups or couples
  Use the multi-currency feature to fairly split expenses while traveling abroad or sharing long-distance costs.

• Travel creators or remote teams
  Divide content creation costs, Airbnb stays, or transport when collaborating from different countries.

• Couch-surfing or host guests
  Keep shared food, utilities, or cleaning costs transparent when hosting or being hosted.

Professional & Operational

• Freelancer cost-sharing
  When two or more freelancers collaborate, they can split tool subscriptions, advertising spend, or one-time purchases.

• Startup co-founders
  Manage early-stage shared costs (e.g., domain, logo, prototype tools) before formal equity agreements are in place.

• Household budgeting between partners
  Customize split weights based on income or agreed ratios for monthly expenses, down to the decimal.

Performance Highlights

• <100 KB total page weight — loads instantly

• <100 ms calculation time for up to 50 participants

• Fully Responsive — optimized for mobile-first use, including thumb-friendly controls

• Zero Dependencies — no jQuery, no libraries, no frameworks

Future Enhancements

• Export Summaries – PDF or image download of split results

• LocalStorage Support – persistent session history

• Session Share Links – copyable links with embedded data (still local-only)

• Native App Wrapper – potential deployment as a PWA or mobile app

Closing Thoughts

EvenSteven isn’t just a project. It’s a fully functional, visually polished, privacy-respecting financial utility — built entirely from scratch, with no dependencies, no login wall, and no server.

It started with a simple frustration: why is something as common as splitting a bill still so clunky, bloated, or invasive?

So I built the opposite.

EvenSteven is:

• Lightweight, yet handles complex logic effortlessly

• Beautiful, without requiring a design framework

• Fast, thanks to lean JavaScript and zero third-party code

• Secure by design, because everything runs locally

• Customizable, whether you're at a restaurant or managing a week-long trip with international friends

It combines:

• Real mathematical precision

• Smart UI patterns inspired by real-world use (like thumb-accessible mobile mode)

• Built-in currency logic that makes international group travel a non-issue

And it does all of this without tracking a single user, or requiring any cloud storage, account, or subscription.

That’s rare. And powerful.

Why This Matters

We’re surrounded by apps that collect more than they give — even for simple tasks like splitting a dinner bill.

EvenSteven proves that you can:

• Build serious tools with zero backend

• Deliver enterprise-grade UX using just HTML, CSS, and JS

• Solve real problems without friction, logins, or feature gating

This project reflects everything I care about as a builder:

• Clean execution

• Ethical design

• Practical utility

• And the belief that everyday problems deserve great UX too

Want to See It?

You don’t need to install anything. You don’t even need to sign up.

Just open the file. Start typing. And split the bill like a pro.

It’s all yours — instantly.

Try the Project

If you'd like to explore the app:

👉 https://www.atulformarketing.com/evensteven-bill-splitting

Video of the web app in action:

Built For:

#Project52 — Week 16
By Atul Verma
Creator, Project52🚀