Romeo Hong

Alex Li

Andriy Luchko

Phuykong Meng

Eric Zhang

​

slidesmania.com

Never use a calculator in a restaurant again

slidesmania.com

Members

01

02

03

04

05

Romeo Hong

Alex Li

Andriy Luchko

Phuykong Meng

Eric Zhang

slidesmania.com

Romeo

Responsibilities:

• UI
• Login page
• Guest Option
• Logout

slidesmania.com

Alex

Responsibilities:

• UX Design (Figma)
• Work on Training Model (OCR)
• Dashboard

slidesmania.com

Andriy

Responsibility:

• Auth Functionally
• Frontend UI + functionality
• Tab pathing
• Moving to react-native

slidesmania.com

Phuykong

Responsibility:

• OCR Model
• Camera Implementation
• Frontend UI
• User Form

slidesmania.com

Eric

Responsibility:

• Backend Development
• Diagrams
• Calculations

​

slidesmania.com

Meetings/Communication

• Met in person as needed after or during class
• 20-40 minute discussions
• Scrum meetings on Fridays
• 15 minutes
• Prompt messaging via Discord
• Pull request updates
• Branch updates
• Testing branches
• Team call via Discord
• Voice call to clear up issues

​

slidesmania.com

Romeo

Learned

• Scrum
• React-native
• npm
• Github

​

Resources

Free Code Camp NPM

slidesmania.com

Alex

Learned

• Agile Development
• Sprints
• Mobile
• UX Design

​

Resources

Figma for beginners

slidesmania.com

Andriy

Learned

• React Native
• Swift
• Tab Navigation - Expo
• Firebase
• comms/specs

Resources

React Native Docs

Expo Tabs

Component State

Firebase Website Auth

​

slidesmania.com

Phuykong

Learned

• Scrum Master
• Azure Cloud Service
• React Native

​

​

Resources

Microsoft Azure Document Intelligence

​

slidesmania.com

Eric

Learned

• Sprints/Boards
• Mobile Dev
• React-Native
• Expo go

Resources:

Mosh

slidesmania.com

Technology Stack

​

​

Frontend

Backend

• React Native

• Firebase
• Microsoft Azure

​

slidesmania.com

Timeline of SplitDiff

Week 1

Week 2

Week 3

Week 4

Week 5

Firebase

Scan Receipt

Cross Platform

Person/Items

Bill Editor

Setting up our backend and allowing users to set up accounts

Accessing camera, uploading images, and scanning receipts

Switching codebase from Swift to React-Native

Presenting items, adding/removing personas and choosing items for each persona

Splitting the bill and presenting the results

16

slidesmania.com

Week 1 - Firebase

• Why use auth services?
• Implementing in swift vs react-native
• Provided password rules
• Setting up project

​

​

​

slidesmania.com

Week 2 - OCR Model

​

• Uses Azure Pretrained Custom Receipt Model
• Key Benefits:
• Merchant information extraction
• Easy integration via REST API
• Line item detection with prices
• Multi-language receipt support
• Handles crumpled and skewed receipts

​

​

​

slidesmania.com

Week 3 - Cross Platform

​

​

• IOS vs Android
• React-Native vs Swift
• IOS on windows

- Can’t emulate IOS on windows�- "Apple's software license for macOS only permits the software's use on "Apple-branded Systems" Source

slidesmania.com

Week 4 - Learning React-Native

• Many moving parts
• Can’t directly edit rendered components in react-native
• Have to manage states through useState or useEffect which trigger rerenders
• Free Code Camp useState and useEffect

​

slidesmania.com

Week 5 - Blockers

​

​

• Backend conflicts on assigning personas to items
• Trying to get expo to work on windows laptop
• Splitting up the calculations
• Merge Conflicts

slidesmania.com

Code Showcase

The most important lines

slidesmania.com

Demo our an app

Please use Expo Go to run our application.�https://github.com/cis3296f24/SplitDiff

slidesmania.com

Work in Progress Features

Camera Features:

• Currently Xcode only, could do a subscription work around. (Apple Dev Cert)

​

Spend Analyzer

• Using Firebase to save receipts, calculate trend spending.

slidesmania.com

Thank you!

Do you have any questions?

slidesmania.com