Bootcamp
Search…
7.POCE.4: Hot Pot Bill Splitter

Introduction

Create an app that will split the your hot pot bill between friends. Begin by forking this repo: https://github.com/rocketacademy/react-hotpot-bootcamp​

Base

When the React app loads, allow the user to create a new bill.
When the user submits, create a bill record in the database and take them to the main app screen.
A person can be added into a list of people.
Items and their price can be added into a list of items.
When an item is added each person who wanted that item can be added onto the list of people for that item.
At the end the app calculates the number each person is responsible for paying.
Only the data about people and the amount they are responsible for is stored in the database. Add a save button to record this data at the end when the whole bill has been entered.

Database Schema

bills Table

column name
data type
description
example
id
SERIAL PRIMARY KEY
ID
1
total
DECIMAL
Total amount of the bill.
765.23
name
TEXT
Name of bill
Hai di Lao December

people Table

column name
data type
description
example
id
SERIAL PRIMARY KEY
ID
1
name
TEXT
Name
Kai
amount
DECIMAL
Amount this person owes
324.65
bill_id
FOREIGN_KEY
bill id
1
Create at least three components, Form, ItemList and Bill. The illustration above suggests some further components and also says where certain data in the app must be stored. The main data, the list of people and the list of items (which will also contain the associated people) must be state of the top-level App component.

More Comfortable

Hold onto the bill id so that if the user reloads the page at any time the bill id can be used to reconstruct the state of the app.
The bill id can be stored in a cookie on the browser. If, on page load the bill id is detected, request for all the relevant app data.

Reference solution

​Here is the reference solution for this exercise.
Copy link
On this page
Introduction
Base
Database Schema
More Comfortable
Reference solution