A modern, real-time collection management system built with React, Firebase, and Tailwind CSS. Track daily collections, manage members, share lists, and analyze financial data with an intuitive dashboard.
- Daily Ledger: Track daily transactions for each member
- Member Management: Add, edit, and organize collection members
- Monthly Targets: Set and monitor monthly collection goals
- Real-time Updates: Instant synchronization across all devices
- Share Lists: Collaborate with other users by sharing collection lists
- Username Search: Find users by their unique username
- Access Control: Manage who can view your shared lists
- Owner Statistics: View comprehensive payment statistics (total collected, who paid/didn't pay) - visible only to list owners
- Real-time Sync: Shared lists update instantly for all users
- Daily Summary: View today's collections at a glance
- Monthly Overview: Track progress toward monthly targets
- Payment Status: See who paid today and who has outstanding balances
- Outstanding Management: Clear outstanding balances for specific months
- Historical Data: Access past transactions and trends
- Excel Export: Download monthly reports and individual member statements
- Unique Usernames: Claim your unique @username
- Profile Management: Update your name, email, and password
- Secure Authentication: Firebase Authentication with email/password
- Data Privacy: Your data is protected by Firestore security rules
- Installable: Add to home screen on mobile devices
- Offline Support: Access your data even without internet
- Push Notifications: Stay updated with important events (coming soon)
- Native Experience: Feels like a native mobile app
- Responsive UI: Works perfectly on desktop, tablet, and mobile
- Dark Mode Ready: Custom design system with beautiful gradients
- Smooth Animations: Polished transitions and interactions
- Accessible: Built with accessibility best practices
- Node.js 18+ (LTS recommended)
- npm or yarn or pnpm
- Firebase Account (free tier works great!)
-
Clone the repository
git clone https://github.com/190-785/Daily_Ledger.git cd Daily_Ledger -
Install dependencies
npm install
-
Set up Firebase (see Firebase Setup below)
-
Start development server
npm run dev
-
Open your browser
http://localhost:5173
- Go to Firebase Console
- Click "Add project"
- Name it (e.g., "daily-ledger")
- Enable Google Analytics (optional)
- Create project
- In Firebase Console, go to Authentication
- Click "Get started"
- Enable "Email/Password" provider
- Save
- Go to Firestore Database
- Click "Create database"
- Choose "Start in production mode"
- Select a location (closest to your users)
- Click "Enable"
- Go to Firestore Database → Rules tab
- Copy the entire content from
firestore.rulesfile - Paste into the editor
- Click "Publish"
-
In Firebase Console, go to Project Settings (gear icon)
-
Scroll to "Your apps"
-
Click "</>" (Web app)
-
Register your app (name: "Daily Ledger Web")
-
Copy the Firebase config object
-
Add Firebase config via environment variables
Copy
.env.exampleto.envat the project root and fill in your Firebase values. Vite exposes vars prefixed withVITE_to the client.Example (.env):
VITE_FIREBASE_API_KEY=AIzaSy... VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com VITE_FIREBASE_PROJECT_ID=your-project-id VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com VITE_FIREBASE_MESSAGING_SENDER_ID=... VITE_FIREBASE_APP_ID=1:...:web:... VITE_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXX
The app automatically loads these values from
import.meta.envat runtime; you don't need to editsrc/firebase.jsdirectly.
For production deployment (Vercel, etc.):
- Go to Authentication → Settings → Authorized domains
- Add your production domain (e.g.,
your-app.vercel.app)
# Start development server (with hot reload)
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run ESLint
npm run lintDaily_Ledger/
├── public/
│ ├── manifest.json # PWA manifest
│ ├── service-worker.js # Service worker for offline support
│ └── favicon.svg # App icon
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Button.jsx
│ │ ├── Card.jsx
│ │ ├── Input.jsx
│ │ ├── Table.jsx
│ │ ├── Header.jsx
│ │ ├── Footer.jsx
│ │ ├── Sidebar.jsx
│ │ ├── BottomNav.jsx
│ │ ├── ErrorBoundary.jsx
│ │ └── ... (modals, animations, etc.)
│ ├── pages/ # Page components
│ │ ├── LoginPage.jsx
│ │ ├── SignupPage.jsx
│ │ ├── DashboardPage.jsx
│ │ ├── LedgerPage.jsx
│ │ ├── MembersPage.jsx
│ │ ├── ListsPage.jsx
│ │ ├── ProfilePage.jsx
│ │ └── MonthlyViewPage.jsx
│ ├── hooks/ # Custom React hooks
│ │ └── useValidation.js
│ ├── utils/ # Utility functions
│ │ ├── designSystem.js
│ │ ├── validation.js
│ │ ├── statsCalculator.js
│ │ └── pwa.js
│ ├── firebase.js # Firebase configuration & helpers
│ ├── App.jsx # Main app component
│ ├── main.jsx # Entry point
│ └── index.css # Global styles
├── firestore.rules # Firebase security rules
├── vercel.json # Vercel deployment config
├── vite.config.js # Vite configuration
├── package.json # Dependencies & scripts
└── README.md # This file
- React 19.1.1 - UI library with latest features
- React Router DOM 7.9.3 - Client-side routing
- Vite 7.1.9 - Lightning-fast build tool
- Tailwind CSS 4.1.14 - Utility-first CSS framework
- Firebase 12.3.0 - Backend-as-a-Service
- Authentication - Secure user auth with email/password
- Firestore - Real-time NoSQL database
- Security Rules - Server-side data protection
- Service Worker - Offline support & caching
- Web Manifest - Installable app metadata
- Code Splitting - Optimized bundle loading
- ESLint - Code linting and quality
- PostCSS - CSS processing
- Autoprefixer - CSS vendor prefixing
All data access is protected by comprehensive Firestore Security Rules that have been thoroughly tested and fixed for production use:
- Authentication Required: Most operations require user authentication
- Owner-Only Access: Users can only access their own data
- Input Validation: String lengths, formats, and types are validated
- Timestamp Validation: Prevents backdating and future-dating using server timestamps
- Rate Limiting: Max amounts (1M per transaction) and list sizes (1000 members)
- Immutable Data: Usernames cannot be changed after creation
- Sharing Controls: List sharing requires explicit permission and uses map-based structure
- Map-based Sharing: Changed from array
[]to object{}structure for efficient user lookup - Server Timestamps: All timestamps use
serverTimestamp()instead of client-sidenew Date() - Permission Errors: Fixed "Missing or insufficient permissions" errors during list sharing
- Input Validation: Comprehensive validation for usernames, emails, dates, and amounts
// Username availability check (public)
match /usernames/{username} {
allow read: if true;
}
// Lists with sharing support
match /lists/{listId} {
allow read: if isOwner(userId) ||
(isSignedIn() && request.auth.uid in resource.data.sharedWith.keys());
allow write: if isOwner(userId) && validListData();
}
// Transactions with validation
match /lists/{listId}/transactions/{transactionId} {
allow read, write: if canAccessList(listId) && validTransactionData();
}- 🔐 Firebase API keys are public by design (safe in client-side code)
- 🔐 All sensitive operations validated on Firebase servers
- 🔐 Security rules cannot be bypassed by modified client code
- 🔐 User data isolated by Firebase Auth UID
- 🔐 Server-side timestamp validation prevents manipulation
- 🔐 Map-based sharing structure enables efficient permission checks
Your app follows a JAMstack architecture:
- Vercel = Static hosting (HTML, CSS, JS files)
- Firebase = Backend services (Auth + Database)
- Security Rules = Enforced on Firebase servers (not in browser)
Browser → Vercel (Static Host) → Firebase SDK → Firebase Servers (Security Rules)
Key Security Point: Security rules protect data on Firebase servers, not in the browser. Users cannot bypass them!
-
Push to GitHub
git add . git commit -m "Ready for deployment" git push origin main
-
Import to Vercel
- Go to vercel.com
- Click "Add New Project"
- Import your GitHub repository
- Configure:
- Framework Preset: Vite
- Build Command:
npm run build - Output Directory:
dist
- Click "Deploy"
# Install CLI (if not already installed)
npm i -g vercel
# Deploy
vercel --prod- Recommended: Use
firestore.rules(production-ready with enhanced validation) - Alternative:
firestore.production.rules(even more restrictive validation)
- Go to Firebase Console
- Select your project (
daily-collection-ledger) - Navigate: Firestore Database → Rules tab
- Copy entire content from
firestore.rules - Paste into Firebase Console editor
- Click "Publish"
- Wait 60 seconds for rules to propagate
- Get your Vercel URL (e.g.,
daily-ledger.vercel.app) - Firebase Console → Authentication → Settings
- Scroll to "Authorized domains"
- Click "Add domain"
- Enter your Vercel domain
- Click "Add"
- Visit your Vercel URL
- Test signup, login, and all features
- Check browser console (F12) for errors
- Verify list sharing and dashboard work
The app works on any static hosting platform:
- Netlify: Deploy from GitHub with Vite preset
- GitHub Pages: Use
gh-pagesnpm package - Firebase Hosting:
firebase init hosting+firebase deploy
- Hot reload enabled
- Source maps available
- Console logging active
- Runs on
http://localhost:5173
- Code minified and optimized
- Source maps removed
- Custom HTTPS domain
- CDN distribution worldwide
- Automatic SSL certificates
- ✅ Work identically in dev and production
- ✅ Protect data regardless of client location
- ✅ Cannot be bypassed by modified client code
Connect your GitHub repo to Vercel for automatic deployments:
- Every push to
main= automatic production deploy - Pull requests get preview deployments
- Rollbacks available in Vercel dashboard
- LICENSE - GNU General Public License v3.0
All deployment guides, security rules documentation, and feature explanations have been consolidated into this README for easier reference.
Contributions are welcome! Please feel free to submit a Pull Request.
- Follow existing code style
- Use meaningful component and variable names
- Add comments for complex logic
- Test thoroughly before submitting
- Update documentation as needed
- Components: Use functional components with hooks
- Styling: Use Tailwind CSS utility classes
- State Management: React hooks (useState, useEffect, etc.)
- Firebase: Use async/await for all Firebase operations
- Error Handling: Always wrap Firebase calls in try/catch
"Missing or insufficient permissions"
- Deploy updated
firestore.rulesto Firebase Console - Wait 60 seconds for rules to propagate
- Clear browser cache and hard refresh
"Auth domain not authorized"
- Add your domain to Firebase authorized domains
- Firebase Console → Authentication → Settings → Authorized domains
Build errors
- Delete
node_modulesand reinstall:rm -rf node_modules && npm install - Clear Vite cache:
rm -rf node_modules/.vite - Update dependencies:
npm update
Service Worker not updating
- Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
- Clear application cache in DevTools (F12 → Application → Clear storage)
- ⚡ Lighthouse Score: 90+ on all metrics
- 🚀 Build Time: ~13 seconds
- 📦 Bundle Size: ~805 KB (208 KB gzipped)
- 🌐 First Contentful Paint: < 1s (on Vercel CDN)
- 📱 Mobile Optimized: Responsive design for all screen sizes
The app can be installed on devices:
- Look for "Install" icon in address bar
- Click to install as desktop app
- Tap browser menu (⋮)
- Select "Add to Home Screen"
- App icon appears on home screen
- View cached data without internet
- Add transactions offline (syncs when online)
- Service worker caches app assets
- ✅ Core ledger functionality
- ✅ User authentication
- ✅ Dashboard analytics
- ✅ List sharing
- ✅ PWA support
- ✅ Mobile responsive
- ✅ Production-ready
- 🔜 Export data (CSV, PDF)
- 🔜 Dark mode toggle
- 🔜 Push notifications
- 🔜 Advanced filtering & search
- 🔜 Charts & visualizations
- 🔜 Multi-currency support
This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.
- ✅ Freedom to use - Use the software for any purpose
- ✅ Freedom to study - Access and modify the source code
- ✅ Freedom to share - Distribute copies to help others
- ✅ Freedom to improve - Distribute modified versions
⚠️ Copyleft - Derivative works must also be GPL-3.0⚠️ Source disclosure - Modified versions must include source code
190-785
- GitHub: @190-785
- Repository: Daily_Ledger
- React Team - For the amazing React library
- Vite Team - For the blazing-fast build tool
- Tailwind CSS - For the utility-first CSS framework
- Firebase - For the powerful backend services
- Vercel - For the excellent hosting platform
If you have any questions or need help:
- Check the documentation files
- Review Firebase docs
- Open an issue on GitHub
- Check browser console for error messages
⭐ Star this repo if you find it helpful! ⭐
Made with ❤️ using React, Firebase, and Tailwind CSS