- FairShare is a tool to make sharing the bill with friends easier. A small, seamless service.
- you simply take a photo of your reciept, and ask your friends to fill in their order.
To try out FairShare, visit: fairshared.me.
User POV:
User's Friends POV:
cd fairshare
npm i
npm run dev
- Hosting: Vercel, namecheap (domain name)
- Frontend: TSX, React, Next.js, TailwindCSS
- Backend: Node.js (via Node.js)
- database: Supabase
- SupaBase real-time database, to give live updates to main user and friends
- Publisher-Subscriber model
- Dynamic Linking
- private APIs (our secret sauce)
- dynamic QR code generation
3 options to upload images:
- camera
- upload (sanatised to only accept jpg/png)
- drag and drop (sanatised to only accept jpg/png) ability to retake
while loading screen, image analysed in the background by API. after analysis, result sent back as JSON.
Followed tailwind CSS guides, with animations. used drop shadows, minimal black/white, certain colour highlights (e.g. pay)
for each item, Name, Quantity, Price automatically written (all editable) Ability to delete/add items Quantity sanatised to be >1, Price sanatised to be number >0 to 2dp User's beem required to proceed
A live view list of items with items/quantity friends have assigned themselves automatically calculated user's still-owing amounts seperate section calculating how much each friend owes hideable QR code section, with a copy-able link alternative
page for main-user specific friend, input to enter name. Can click 'enter' button to join too. live view to select claims. smart 'your part' - only allowing remaining number of available items to be selected. automatically calculated friend total deep-link button to Beem main user.