A mobile-friendly, installable Progressive Web App (PWA) designed for tracking shared whey protein usage, automatically splitting cost and consumption between users with real-time Firebase synchronization.
Built for Saheel and Dhruv to easily share the cost of a whey protein tub fairly based on their actual consumption percentages.
- Shared Whey Protein Tracking: Manage shared protein tubs, including custom scoop sizes, price, total scoop count, and remaining capacity.
- Real-Time Cloud Synchronization: Powered by Firebase Firestore with offline cache support so both devices sync instantly.
- Authenticated Device Ownership: Secured via Firebase Anonymous Authentication. Devices are permanently assigned to either Saheel or Dhruv, preventing cross-user profile spoofing.
- Fair Cost-Splitting: Dynamic billing modes that automatically calculate money paid, value consumed, and net balance owed.
- Interactive Scoop Logging: Quick action logging (+1, +2, +3 scoops) or custom amounts, restricted to the logged-in owner of that device.
- Detailed History Logs: Fully synced transaction list showing date, time, logger, scoop count, protein consumed, and cost consumed, with full multi-step undo safety.
- Installable PWA: Fully responsive mobile-first UI with high-quality icons, offline support, and native-like look and feel on iOS and Android.
- Anonymous Auth: When the app opens on a device for the first time, it automatically creates a unique anonymous Firebase user account.
- Device Assignment: The user selects their profile (Saheel or Dhruv). The app stores the UID-to-Profile mapping inside the secure
users/{uid}collection in Firestore. - Immutable Ownership: Once mapped, the device owner cannot be modified without a full database reset, and the header displays the authenticated user name.
- Scoped Permissions: Secure Firestore rules guarantee that only the logged-in user can submit or delete scoop logs associated with their UID, preventing cross-user spoofing.
- Frontend: React (JSX, Hooks, CSS Variables)
- Tooling: Vite (Hot Module Replacement, production minification)
- Database & Sync: Google Firebase (Cloud Firestore with local IndexedDB persistence)
- Auth: Firebase Anonymous Authentication
- PWA: Web App Manifest (
manifest.json), Vector SVG Icons, Caching Service Worker (sw.js)
Make sure you have Node.js installed.
git clone https://github.com/SaheelFaisal/protein-split.git
cd protein-splitnpm installnpm run devOpen http://localhost:5173 in your browser.
The app runs automatically in Local Mock Mode (LocalStorage) if no Firebase configuration is found. To enable real-time sync across devices, choose one of the following methods:
- Copy
.env.examplein the root folder to.envor.env.local:cp .env.example .env.local
- Open
.env.localand add your Firebase credentials. - Restart your local server. The app automatically loads credentials from
import.meta.env.VITE_FIREBASE_*.
- Open the app in your browser and go to the Settings tab.
- Click Configure Firebase under the Database Sync card.
- Paste your Firebase web app configuration JSON and save (cached locally in browser storage).
The project can be deployed easily to hosting platforms like Vercel:
- Install Vercel CLI:
npm install -g vercel - Run
vercelfrom the root directory and follow the instructions. - Once deployed, configure the production environment.
- Multi-Item Sharing: Expand the tracker to handle other shared items like pre-workouts, creatines, or household groceries.
- Advanced Analytics: Add interactive monthly consumption charts, average scoops per day trendlines, and projections on when the active tub will run dry.
- Web Push Notifications: Notify the other user in real-time when a scoop is logged or when the tub is running low.
- General Shared Expenses: A general utility for general household expense split tracking.