GymFlow - Gym Management Attendance PWAGymFlow - Gym Management Attendance PWA
React and Firebase gym management web app for tracking members, payments, attendance, membership plans, retention status, WhatsApp Recently UpdatedGymFlow - Gym Management Attendance PWA
React and Firebase gym management web app for tracking members, payments, attendance, membership ...
Overview
GymFlow is a responsive gym management dashboard built with React, Vite, TypeScript, Firebase Authentication, and Firestore. It helps gym owners manage member records, membership plans, payments, attendance check-ins, member retention status, and business reports from a mobile-friendly web app.
The app includes Google sign-in, real-time Firestore data syncing, offline persistence support, PWA installation prompts, member filtering/search, payment tracking, attendance heatmaps, retention analytics, WhatsApp message templates, and CSV exports.
Features
- Google sign-in with Firebase Authentication
- Firestore database integration with real-time listeners
- Member management: add, edit, delete, view member profile
- Member fields for phone, plan, register number, gender, age, address, height, weight, interest area, photo, join date, validity dates, status, and last engagement
- Auto-generated member registration numbers using gym prefix
- Duplicate phone number validation
- Membership plan management with amount, duration, description, edit, and delete
- Payment recording and payment history
- Initial payment capture during member onboarding
- Outstanding due calculation based on plan amount and payments
- Attendance tracking with monthly heatmap
- Add/remove member check-ins
- Member visit statistics and most active member summary
- Retention status logic: Active, Expiring Soon, Payment Due, At-Risk, Lost
- Recovery tracking for previously at-risk or lost members
- Dashboard with member, revenue, dues, retention, and activity summaries
- Reports page with revenue trends, member growth, plan popularity, and retention stats
- CSV export for selected members, payment history, and revenue reports
- WhatsApp message links with predefined templates
- Customizable automation message templates in settings
- Command bar search/navigation with keyboard shortcut
- Voice search for members where browser speech recognition is supported
- Responsive desktop sidebar and mobile bottom navigation
- PWA support with install banner and app icons
- Firestore offline persistence and online/offline status indicator
- Toast notifications and confirmation modals
- Firestore security rules included
Requirements
- Node.js: needs confirmation; current local Node v16.20.2 fails Vite build. Use Node 18+ or preferably Node 20+ for Vite 6 compatibility.
- npm
- Firebase project
- Firebase Authentication with Google provider enabled
- Firestore database
- Firestore rules deployment
- Firestore composite indexes may be required for payments and attendance queries using uid plus descending date/timestamp
- Modern browser for PWA/offline features
- WhatsApp installed or WhatsApp Web available for message links
Instructions
- Install dependencies: npm install
- Replace firebase-applet-config.json with your own Firebase project configuration.
- Enable Google Authentication in Firebase Console.
- Create/enable Firestore database.
- Deploy or apply the included firestore.rules.
- Create required Firestore composite indexes if Firebase prompts for them.
- Run locally: npm run dev
- Build for production: npm run build
- Deploy the generated dist folder to your preferred static hosting provider.
| Category | Scripts & Code / ReactJS |
| First release | 19 May 2026 |
| Last update | 19 May 2026 |
| Files included | .css, .html, Layered .png, Javascript .js |
| Tags | responsive, dashboard, crm, reports, whatsapp, firebase, PWA, reactjs, Firestore, Fitness app, attendance tracking, gym management, payment tracking, member management, membership plans |








