This web app is used to track monthly household expenses and divide these expenses among roommates
The landing page as shown below, includes two entry points. The first is used to create a new household and the second is a demo. The demo is loaded with mock data to spare the users the time and energy of enter expenses and roommates. While in the demo, the user can add and modify any existing data to experience the functionality.
The following screen is used to create a household. It includes three forms, the first for entering the household name. The second is used to enter a roommate and the third is for entering an expense. User data is validated for each submission. In order to submit the household, there is a requirement of atleast one roommate and one expense. Once this requirement is met a submit button renders to the UI.
Demo version
Submit house rendering
Create a new household form, non-demo version
After a user has entered household data for submission, they are redirected to the house stats page. This page shows expenses each roommate is responsible for and all of the household expenses. The page allows a user to edit and delete all info. The expense divider evenly splits all expenses over 300 dollars and pass out each expense under 300. If there is any difference between each roommmates total amount due, the difference is made even through adding and subtracting from the largest monthly expense.
Divison of bills
All bills listed
Each household is given a unique url as opposed to a traditional log in system
Due to the amount of content displayed on each page, there is seperate mobile rendering strategy
The following screen shots show the household creation process on a mobile device
Create a roommate
Create an expense
The following are screen shots of the mobile rendering for the household stats page
View all expenses
View roommates amount due
Add a new roommate in mobile
Add a new expense view in mobile
This application included unit tests and endpoint test using mocha, chai, and chai-http. Other technologies like travis ci, nodemon and webpack watcher simpiflied the process and allowed for a faster dev process.
The application used webpack for the client side build. See package json and webpack config for setup details
Thank you for visiting my app. I hope that you have enjoyed it as much as I enjoyed building it. It was a great learning expeirence and my first full stack app. The link below is to the live version.