💪 GymFlow - Professional Gym Management System v2.0

A modern, feature-rich gym management system built with Next.js, React, and Tailwind CSS

📋 Overview

GymFlow is a complete, production-ready gym management system designed to streamline all operations for gym businesses. It provides a sleek, modern interface built with Next.js and shadcn/ui components, offering comprehensive functionality for managing members, tracking attendance, processing payments, scheduling classes, and generating detailed analytics.

Status: ✅ Production Ready
Version: 2.0.0
Last Updated: April 2026

🎯 Key Features

👥 Member Management

Comprehensive Profiles: Store personal details, contact info, emergency contacts
Membership Types: Basic, Premium, Elite, Trial
Status Tracking: Active, Expired, Pending, Cancelled
Search & Filter: Quick member lookup by name, email, phone
Bulk Operations: Edit or delete multiple members at once
Import/Export: CSV support for data migration

📅 Attendance Tracking

Real-time Check-in/Check-out: Log member visits with timestamps
Attendance History: View detailed records with notes
Daily Reports: Track gym traffic patterns
Duration Calculation: Automatic workout duration tracking
Batch Check-in: Check in multiple members quickly

💰 Billing & Payment Processing

Automated Invoicing: Create invoices for memberships, services, products
Multiple Payment Methods: Cash, Card, Bank Transfer, Cheque
Payment Status Tracking: Paid, Pending, Overdue, Partial
Revenue Reports: Monthly and custom period reports
Payment Reminders: Automatic notifications for pending payments
Invoice Management: Create, edit, track, and archive invoices

🏋️ Class Scheduling

Class Management: Create and manage fitness classes
Instructor Assignment: Assign trainers to classes
Capacity Control: Prevent overbooking with limits
Member Enrollment: Track class attendance
Schedule Management: Recurring and custom schedules
Notification System: Alert members of class updates

📦 Inventory Management

Stock Tracking: Monitor equipment, supplements, merchandise
Low Stock Alerts: Automatic notifications when items need reordering
Categorization: Equipment, Consumables, Services, Merchandise
Cost Tracking: Monitor inventory costs and value
Usage Reports: Track inventory consumption trends

👨‍💼 Staff & HR Management

Staff Profiles: Manage trainers, receptionists, maintenance staff
Role-based Access: Admin, Staff, Trainer roles
Payroll Tracking: Salary and employment details
Performance Metrics: Track staff-related statistics
Contact Management: Store and manage staff information

📊 Advanced Analytics & Reporting

Interactive Dashboard: Real-time overview of key metrics
8+ Report Types:
- Revenue Analysis (daily/weekly/monthly)
- Member Retention Analysis
- Attendance Trends
- Staff Performance
- Inventory Status
- Conversion Rates
- Class Popularity
- Equipment Usage
Export Functionality: Download reports as CSV/PDF
Trend Analysis: Visual charts and graphs
Custom Date Ranges: Filter reports by any period

🔔 Real-time Notifications

Membership Expiry Alerts: Notify before expiration
Low Stock Warnings: Alert when inventory is low
Payment Reminders: Remind members of pending payments
Class Updates: Notify of schedule changes
System Notifications: Important gym events

🛠️ Technology Stack

Frontend (Next.js + React)

┌─────────────────────────────────────────────┐
│ Next.js 14 (App Router)                     │
├─────────────────────────────────────────────┤
│ React 18 (Hooks, Context)                   │
├─────────────────────────────────────────────┤
│ Tailwind CSS 3 (Styling)                    │
├─────────────────────────────────────────────┤
│ shadcn/ui (Component Library)               │
├─────────────────────────────────────────────┤
│ Zustand (State Management)                  │
├─────────────────────────────────────────────┤
│ React Hook Form (Form Management)           │
├─────────────────────────────────────────────┤
│ Recharts (Data Visualization)               │
├─────────────────────────────────────────────┤
│ Axios (HTTP Client)                         │
├─────────────────────────────────────────────┤
│ date-fns (Date Manipulation)                │
├─────────────────────────────────────────────┤
│ Lucide React (Icons)                        │
└─────────────────────────────────────────────┘

Backend (Node.js + Express)

┌──────────────────────────────────────────────┐
│ Node.js v18+ & Express.js v4.18+            │
├──────────────────────────────────────────────┤
│ Authentication: JWT + refresh tokens        │
├──────────────────────────────────────────────┤
│ Security: bcrypt, helmet, CORS, rate limit  │
├──────────────────────────────────────────────┤
│ Real-time: Socket.io (WebSockets)           │
├──────────────────────────────────────────────┤
│ Database: PostgreSQL (production)           │
│           JSON file (development)           │
├──────────────────────────────────────────────┤
│ Validation: express-validator               │
├──────────────────────────────────────────────┤
│ DevOps: PM2, Docker, AWS deployment-ready   │
└──────────────────────────────────────────────┘

Infrastructure

Hosting: AWS Elastic Beanstalk (backend) + S3 + CloudFront (frontend)
Database: PostgreSQL (AWS RDS)
Containerization: Docker support
CI/CD: GitHub Actions ready
Monitoring: CloudWatch integration

📦 Installation & Setup

Prerequisites

Node.js v18 or higher
npm or yarn
Git

1. Clone the Repository

git clone https://github.com/yourusername/gymflow-nextjs.git
cd gymflow-nextjs

2. Install Dependencies

npm install
# or
yarn install

3. Configure Environment

cp .env.local.example .env.local

Edit .env.local:

NEXT_PUBLIC_API_URL=http://localhost:5000
NEXT_PUBLIC_WS_URL=http://localhost:5000
NEXT_PUBLIC_JWT_SECRET=your_secret_key_here

4. Run Development Server

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser.

5. Connect Backend

Ensure the backend server is running on http://localhost:5000
The frontend will automatically connect to the API

6. Default Credentials

Email: admin@gym.com
Password: password123

🚀 Quick Start Guide

Login

Navigate to http://localhost:3000/login
Enter demo credentials (admin@gym.com / password123)
Click "Sign In"

🧭 Testing

Unit tests are located in the tests/ folder. A small suite validates the RBAC helpers in lib/permissions.ts (hierarchy ordering, management checks, route visibility, and helper utilities).
Run the tests with:

npm run test

Add Your First Member

Go to Members page
Click "Add Member" button
Fill in member details:
- Full Name
- Email
- Phone
- Membership Type
- Join & Expiry dates
Click "Add Member"

Record Check-in

Go to Attendance page
Click "Check-in Member" button
Select member from dropdown
Add optional notes
Click "Check-in"

Create Invoice

Go to Billing page
Click "Create Invoice" button
Select member and amount
Set due date
Click "Create Invoice"

View Dashboard

Navigate to Dashboard
View real-time statistics:
- Active members count
- Today's revenue
- Daily visits
- Pending payments
Check revenue and attendance charts

📚 Project Structure

gymflow-nextjs/
├── app/                          # Next.js app directory
│   ├── layout.tsx               # Root layout
│   ├── page.tsx                 # Home/index page
│   ├── globals.css              # Global styles
│   ├── login/                   # Authentication pages
│   │   └── page.tsx
│   ├── register/
│   │   └── page.tsx
│   ├── dashboard/               # Main features
│   │   └── page.tsx             # Dashboard home
│   ├── members/
│   │   └── page.tsx             # Members management
│   ├── attendance/
│   │   └── page.tsx             # Check-in/Check-out
│   ├── billing/
│   │   └── page.tsx             # Invoices & payments
│   ├── classes/
│   │   └── page.tsx             # Class scheduling
│   ├── inventory/
│   │   └── page.tsx             # Stock management
│   ├── staff/
│   │   └── page.tsx             # HR management
│   ├── notifications/
│   │   └── page.tsx             # Alerts & notifications
│   └── settings/
│       └── page.tsx             # Configuration
│
├── components/
│   ├── ui/                      # shadcn/ui components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   ├── label.tsx
│   │   ├── badge.tsx
│   │   ├── table.tsx
│   │   └── dialog.tsx
│   └── layout/                  # Layout components
│       ├── sidebar.tsx          # Navigation sidebar
│       └── protected-layout.tsx # Auth protection wrapper
│
├── lib/
│   ├── api-client.ts           # Axios HTTP client
│   ├── store.ts                # Zustand state management
│   └── utils.ts                # Utility functions
│
├── hooks/
│   └── index.ts                # Custom React hooks
│
├── utils/
│   └── format.ts               # Formatting utilities
│
├── types/
│   └── index.ts                # TypeScript types & interfaces
│
├── public/                     # Static assets
│
├── .env.local                  # Environment variables
├── package.json
├── tsconfig.json
├── next.config.js
├── tailwind.config.ts
├── postcss.config.js
└── README.md                   # This file

🔐 Security Features

✅ JWT Authentication with 15-minute token expiry
✅ Password Hashing with bcrypt
✅ Rate Limiting (10 login attempts per 15 minutes)
✅ XSS Protection with sanitize-html
✅ CORS enabled for trusted origins
✅ Secure Headers via helmet
✅ SQL Injection Prevention via prepared statements
✅ Refresh Token Rotation for enhanced security
✅ HTTPS Ready for production
✅ Role-based Access Control (RBAC)

📝 API Integration

The frontend communicates with the backend via RESTful API endpoints:

Key Endpoints

Authentication

POST /api/auth/register - Create account
POST /api/auth/login - Login
POST /api/auth/logout - Logout
POST /api/auth/refresh - Refresh token

Members

GET /api/members - Get all members
POST /api/members - Create member
PUT /api/members/:id - Update member
DELETE /api/members/:id - Delete member

Attendance

GET /api/attendance - Get records
POST /api/attendance/checkin - Check in
POST /api/attendance/:id/checkout - Check out

Billing

GET /api/billing - Get invoices
POST /api/billing - Create invoice
POST /api/payments - Record payment

And more... (Classes, Inventory, Staff, Settings, Notifications)

🎨 Customization

Change Brand Colors

Edit app/globals.css:

:root {
  --primary: 0 0% 9.0%;  /* Change to your brand color */
  --secondary: 0 0% 96.1%;
  /* ... other colors ... */
}

Add New Pages

Create new folder in app/ (e.g., app/reports/)
Add page.tsx:

'use client'
import { ProtectedLayout } from '@/components/layout/protected-layout'

export default function ReportsPage() {
  return (
    <ProtectedLayout>
      {/* Your content here */}
    </ProtectedLayout>
  )
}

Add navigation item in components/layout/sidebar.tsx

Create New Components

// components/custom/MyComponent.tsx
export function MyComponent() {
  return <div>Custom content</div>
}

Then import and use:

import { MyComponent } from '@/components/custom/MyComponent'

🧪 Testing

# Run type checking
npm run type-check

# Build for production
npm run build

# Start production server
npm start

📊 Analytics & Reporting

The dashboard provides comprehensive analytics:

Real-time Stats: Active members, revenue, daily visits
Revenue Trends: Weekly/monthly revenue charts
Attendance Patterns: Daily visit trends
Member Analytics: Retention, growth, churn
Payment Status: Paid vs pending invoices
Inventory Status: Low stock alerts

Export Reports

Click "Download" on any report to export as CSV.

🚀 Deployment

Deploy to Vercel (Recommended for Frontend)

npm install -g vercel
vercel

Deploy Backend to Heroku/AWS

See backend repository for deployment instructions.

Environment Variables for Production

NEXT_PUBLIC_API_URL=https://api.yourdomain.com
NEXT_PUBLIC_WS_URL=https://api.yourdomain.com
NEXT_PUBLIC_JWT_SECRET=your_production_secret

📞 Support & Documentation

Issues: GitHub Issues
Discussions: GitHub Discussions
Email: support@gymflow.app
Documentation: Full Docs

📄 License

This project is licensed under the MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

💡 Roadmap

🎉 Acknowledgments

Built with Next.js
UI Components from shadcn/ui
Icons from Lucide
Styling with Tailwind CSS
State management with Zustand

⭐ Show Your Support

If you find this project helpful, please give it a star! ⭐

Made with 💪 for gym owners and fitness enthusiasts

Last Updated: April 2026 | Version 2.0.0

Name		Name	Last commit message	Last commit date
Latest commit History 45 Commits
.ebextensions		.ebextensions
.github/workflows		.github/workflows
app		app
components		components
hooks		hooks
lib		lib
prisma		prisma
public		public
server		server
tests		tests
types		types
utils		utils
.dockerignore		.dockerignore
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
DEPLOYMENT.md		DEPLOYMENT.md
Dockerfile		Dockerfile
FILE_MANIFEST.md		FILE_MANIFEST.md
GETTING_STARTED.md		GETTING_STARTED.md
Procfile		Procfile
QUICK_START.md		QUICK_START.md
README.md		README.md
SECURITY.md		SECURITY.md
bug_report_full.md		bug_report_full.md
docker-compose.yml		docker-compose.yml
ecosystem.config.js		ecosystem.config.js
eslint.config.mjs		eslint.config.mjs
gymflow-roles-report.pdf		gymflow-roles-report.pdf
lint_output.txt		lint_output.txt
lint_output_utf8.txt		lint_output_utf8.txt
lint_results.txt		lint_results.txt
list-credentials.ts		list-credentials.ts
middleware.ts		middleware.ts
mock-server.js		mock-server.js
next-env.d.ts		next-env.d.ts
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
prisma.config.ts		prisma.config.ts
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
typescript_errors.txt		typescript_errors.txt
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation

💪 GymFlow - Professional Gym Management System v2.0

📋 Overview

🎯 Key Features

👥 Member Management

📅 Attendance Tracking

💰 Billing & Payment Processing

🏋️ Class Scheduling

📦 Inventory Management

👨‍💼 Staff & HR Management

📊 Advanced Analytics & Reporting

🔔 Real-time Notifications

🛠️ Technology Stack

Frontend (Next.js + React)

Backend (Node.js + Express)

Infrastructure

📦 Installation & Setup

Prerequisites

1. Clone the Repository

2. Install Dependencies

3. Configure Environment

4. Run Development Server

5. Connect Backend

6. Default Credentials

🚀 Quick Start Guide

Login

🧭 Testing

Add Your First Member

Record Check-in

Create Invoice

View Dashboard

📚 Project Structure

🔐 Security Features

📝 API Integration

Key Endpoints

🎨 Customization

Change Brand Colors

Add New Pages

Create New Components

🧪 Testing

📊 Analytics & Reporting

Export Reports

🚀 Deployment

Deploy to Vercel (Recommended for Frontend)

Deploy Backend to Heroku/AWS

Environment Variables for Production

📞 Support & Documentation

📄 License

🤝 Contributing

💡 Roadmap

🎉 Acknowledgments

⭐ Show Your Support

About

Resources

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages