{"id":23989754,"url":"https://github.com/devraider/split-the-bill","last_synced_at":"2026-05-16T10:32:22.309Z","repository":{"id":270850065,"uuid":"911647474","full_name":"devraider/split-the-bill","owner":"devraider","description":"Split the Bill is a ReactJS-based application designed to simplify dividing expenses among friends or group members. It allows users to add expenses, track shared costs, and automatically calculate the amount each person owes or is owed. Built with React 18.3, the app uses controlled components for form inputs and dynamic content rendering.","archived":false,"fork":false,"pushed_at":"2025-01-03T22:01:49.000Z","size":702,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T03:42:51.051Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devraider.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-03T14:10:31.000Z","updated_at":"2025-01-03T22:01:52.000Z","dependencies_parsed_at":"2025-01-03T15:24:31.380Z","dependency_job_id":"dffa3d26-56d9-41eb-b384-df07d61941fa","html_url":"https://github.com/devraider/split-the-bill","commit_stats":null,"previous_names":["devraider/split-the-bill"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devraider/split-the-bill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devraider%2Fsplit-the-bill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devraider%2Fsplit-the-bill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devraider%2Fsplit-the-bill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devraider%2Fsplit-the-bill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devraider","download_url":"https://codeload.github.com/devraider/split-the-bill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devraider%2Fsplit-the-bill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33098791,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-16T04:41:52.686Z","status":"ssl_error","status_checked_at":"2026-05-16T04:41:52.009Z","response_time":115,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-07T17:38:14.281Z","updated_at":"2026-05-16T10:32:22.294Z","avatar_url":"https://github.com/devraider.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Split the Bill Application 💰\n\n## Motivation\n\nThe \"Split the Bill\" project is a ReactJS-based application designed to simplify the process of dividing expenses among friends or group members.\n\nIn this project, I deepened my understanding of several key React concepts, including:\n\n- **Data Flow**: Mastering the flow of data through the application, and determining when to use global vs. local state based on the nature of the data.\n- **Props Children**: Passing nested elements into components to enable dynamic content rendering.\n- **Derived State**: Creating states that are derived from other existing states, ensuring efficient data handling.\n- **Lifting State Up**: Moving state to a higher component to enable sharing of data between multiple child components.\n- **Forms and Controlled Components**: Managing form inputs through controlled components, ensuring form data is consistently synced with state.\n- **Props Destructuring**: Using destructuring to cleanly extract props in a more concise and readable manner.\n\nIt serves as a practical implementation to reinforce the knowledge gained from various React learning resources.\n\n## Features ✨\n\n1. **ReactJS** - Utilizes React version 18.3 for building user interfaces.\n2. **CSS Modules** - CSS Modules for component-scoped styling, ensuring modular and maintainable CSS.\n3. **JavaScript (ES6)** - JavaScript features such as array methods, template literals, and destructuring for cleaner and more efficient code.\n4. **Expense Management** - Allows users to add expenses, facilitating effective tracking of shared costs.\n5. **Debt Calculation** - Automatically calculates the amount each person owes or is owed, simplifying the settlement of shared expenses.\n\n## Component Structure 🛠️\n\nThe application is structured with a focus on modularity and reusability. Components are organized to manage different aspects of the application, such as expense input, group listings, and debt summaries. This approach facilitates:\n\n- **State Management** - Efficient handling of application state to reflect real-time data updates.\n- **Conditional Rendering** - Dynamic display of content based on user interactions and application state.\n- **Reusable Components** - Creation of generic components that can be utilized across different parts of the application, promoting code reuse and consistency.\n\n## Demo / Walkthrough\n\n### 1. Overview\n\n![IMG1](assets/readme/1.png)\n\n### 2. Add friend to share expenses\n\n![IMG1](assets/readme/2.png)\n\n### 3. Add friend to share expenses\n\n![IMG1](assets/readme/3.png)\n\n### 4. Share a new expense with your new friend\n\n![IMG1](assets/readme/4.png)\n\n## How to Get and Run the Application 🛠️\n\n### 1. Clone the application\n\n```bash\ngit clone https://github.com/devraider/split-the-bill.git\ncd split-the-bill\n```\n\n### 2. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3. Run application in developemnt mode\n\n```bash\nnpm start\n```\n\n### 4. Build for Production\n\n```bash\nnpm run build\n```\n\n## Credits\n\n- [**Facebook React Team**](https://github.com/facebook/react) for great documentation: [Learn React from Docs](https://react.dev/learn)\n- 🧑‍🏫 [**Jonas Schmedtmann**](https://github.com/jonasschmedtmann)\n- 🎓 [The Ultimate React Course 2024: React, Next.js, Redux \u0026 More](https://www.udemy.com/course/the-ultimate-react-course/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevraider%2Fsplit-the-bill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevraider%2Fsplit-the-bill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevraider%2Fsplit-the-bill/lists"}