Bill Splitter

Difficulty: Hard

In this challenge, you'll build an app that splits bills among participants and calculates how much each person owes. The app fetches bill and participant data from an API, allowing users to distribute costs and track outstanding balances. This exercise tests API integration, data management, and UI state handling.

Requirements

Fetch & Display Bills

• Retrieve bills and participants from a mock API:

{
  "bills": [
    {
      "id": 1,
      "owner_id": 101,
      "amount": 1200,
      "name": "Rent"
    },
    {
      "id": 2,
      "owner_id": 102,
      "amount": 300,
      "name": "Groceries",
      "description": "Shared grocery expenses"
    },
    {
      "id": 3,
      "owner_id": 103,
      "amount": 100,
      "name": "Dinner",
      "description": "Dinner at Italian restaurant"
    }
  ],
  "participants": [
    {
      "id": 101,
      "name": "Alice",
      "photo_url": "https://example.com/alice.jpg"
    },
    {
      "id": 102,
      "name": "Bob"
    },
    {
      "id": 103,
      "name": "Charlie",
      "photo_url": "https://example.com/charlie.jpg"
    }
  ]
}

• Display a list of bills, showing:
  • Bill name (e.g., "Rent")
  • Amount (e.g., "$1200")
  • Owner (who initially paid)

Splitting

• Tapping on a bill opens a detail screen, displaying:
  • Bill name & description
  • Amount paid & owner
  • Toggle buttons for selecting who shares the cost
• If a bill is not split, the owner pays the full amount.
• If split, the total is divided among the selected participants.

Debt Summary

• The app should display a "Summary" section that shows the final balance of who owes whom how much.
• The final UI should contain two sections:
  1️⃣ Bills – List of all bills.
  2️⃣ Summary – List of calculated balances (e.g., "Bob owes Alice $600").
• If debts cancel out, display "No outstanding balances".

API Documentation

Path: https://breakpoint-ghost-io.github.io/ghost-web/bill-splitter/bills.json

{
  "bills": [
    {
      "id": 1,
      "owner_id": 101,
      "amount": 1200,
      "name": "Rent"
    },
    {
      "id": 2,
      "owner_id": 102,
      "amount": 300,
      "name": "Groceries",
      "description": "Shared grocery expenses"
    }
  ],
  "participants": [
    {
      "id": 101,
      "name": "Alice",
      "photo_url": "https://example.com/alice.jpg"
    },
    {
      "id": 102,
      "name": "Bob"
    }
  ]
}

Bills

Participants

Above & Beyond

Once the core functionality is complete, consider adding:

• Custom Split Amounts – Allow users to manually assign different amounts per participant.
• Settle Payments – Allow users to mark debts as paid.