💪 Dstars Fitness Gym — Membership Management System

A full-featured web-based gym membership management system with real-time dashboard, member/staff management, Firebase authentication, and responsive dark-mode UI.

---

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Screenshots
• Getting Started
• Project Structure
• Firebase Setup
• Usage Guide
• Contributing
• License
• Author

---

Overview

Dstars Fitness Gym Management System is a web application designed to streamline gym operations — from member registration and staff management to dashboard analytics and task tracking. Built with vanilla HTML/CSS/JavaScript and powered by Firebase for real-time data and authentication, the system provides a modern, responsive interface that works across desktop and mobile devices.

Who It's For

• Gym owners managing memberships and tracking revenue
• Front desk staff registering new members and processing check-ins
• Managers monitoring member counts, staff assignments, and daily operations

---

Features

🔐 Authentication

• Email/password sign-up with validation (minimum 6 characters, password confirmation)
• Secure login with Firebase Authentication
• Password reset via email
• Protected routes — unauthorized users are redirected to login

📊 Dashboard

• Real-time member count — updates instantly when members are added/removed
• Staff count — total staff overview
• New members feed — shows members who joined in the last 30 days (live listener)
• Quick Tasks — built-in to-do list with add/check-off functionality

👥 Member Management

• Add members with auto-generated unique 6-digit ID
• Member profiles: name, membership type (Basic/Premium/Standard), join date, expiry date
• View individual profiles with detailed member information
• Delete members with one click (ID preserved to prevent reuse)
• Search and filter members in real-time
• Real-time data sync via Firestore onSnapshot

👔 Staff Management

• Add staff with role assignment (Fitness Instructor, Personal Trainer, Receptionist, Gym Floor Attendant)
• Track employment status (Part-time / Full-time)
• Staff directory with search functionality

🎨 UI/UX

• Dark mode (default) with sleek red/black gradient theme
• Light mode toggle with persistent preference (localStorage)
• Fully responsive — desktop, tablet, and mobile layouts
• Collapsible sidebar navigation
• Mobile hamburger menu
• Clean, modern card-based design

---

Tech Stack

Layer	Technology
Frontend	HTML5, CSS3, Vanilla JavaScript (ES Modules)
Backend/Database	Firebase Firestore (NoSQL, real-time)
Authentication	Firebase Auth (email/password)
Analytics	Firebase Analytics
Icons	Font Awesome 6
Charts	Chart.js 3.7 (integrated, expandable)
Hosting	Any static host (Firebase Hosting, GitHub Pages, Netlify)

---

Screenshots

📌 Screenshots coming soon — run the app locally to preview the UI.

---

Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Edge, Safari)
• A code editor (VS Code recommended)
• A Firebase project (create one free)
• (Optional) Live Server VS Code extension for local development

Installation

1. Clone the repository

   git clone https://github.com/YOUR_USERNAME/DstarsFitnessGym.git
   cd DstarsFitnessGym

2. Configure Firebase (see Firebase Setup below)

3. Launch locally

   • Open the project in VS Code
   • Right-click index.html → Open with Live Server
   • Or simply open index.html in your browser

   ⚠️ ES Modules require a local server — opening index.html directly as a file may cause CORS issues. Use Live Server or any HTTP server.

---

Project Structure

DstarsFitnessGym/
├── index.html              # Landing page (login + signup + about)
├── dashboard.html          # Main dashboard with sidebar navigation
├── addmember.html          # New member registration form
├── addstaff.html           # New staff registration form
├── profile.html            # Individual member profile view
├── css/
│   └── style.css           # Main stylesheet (1,200+ lines)
├── light-mode.css          # Light theme override styles
├── js/
│   ├── firebase-config.js  # Firebase project configuration
│   ├── firebaseauth.js     # Login, signup, password reset logic
│   ├── script.js           # Landing page interactions
│   ├── dashboard.js        # Dashboard data, members, staff, tasks
│   ├── addmember.js        # Member form validation & submission
│   ├── addstaff.js         # Staff form validation & submission
│   └── profile.js          # Member profile data loading
├── images.png              # Gym logo
├── .gitignore
├── LICENSE
└── README.md

---

Firebase Setup

To run this project with your own Firebase backend:

1. Create a Firebase project at console.firebase.google.com

2. Enable services:

   • Authentication → Email/Password provider
   • Firestore Database → Start in test mode

3. Get your config: Project Settings → General → Your apps → Web app → Copy config object

4. Update js/firebase-config.js:

   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_PROJECT.firebaseapp.com",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_PROJECT.appspot.com",
     messagingSenderId: "YOUR_SENDER_ID",
     appId: "YOUR_APP_ID"
   };

5. Set Firestore rules (for production):

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /{document=**} {
         allow read, write: if request.auth != null;
       }
     }
   }
   

---

Usage Guide

First Time Setup

1. Open the app → Click Sign Up
2. Enter your name, email, and password
3. You'll be redirected to the Dashboard

Managing Members

1. Dashboard → Members section → Click Add Member
2. Fill in name, membership type, dates → Submit
3. A unique 6-digit ID is auto-generated
4. View, search, or delete members from the Members table

Managing Staff

1. Dashboard → Staff section → Click Add Staff
2. Fill in name, role, status → Submit
3. Staff appear in the Staff directory

Switching Themes

1. Dashboard → Settings (sidebar)
2. Toggle Dark Mode / Light Mode
3. Preference is saved automatically

---

Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'feat: add your feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

Ideas for Contribution

• 📈 Implement Chart.js analytics on the dashboard
• 💳 Add payment tracking and billing history
• 📧 Email notifications for membership expiry
• 🏋️ Workout tracking and scheduling
• 📱 Progressive Web App (PWA) support

---

License

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

---

Author

Dayle Angelo Peña

• 📧 daylepena@gmail.com
• 🎓 B.S. Computer Science — Notre Dame of Dadiangas University
• 📍 General Santos City, Philippines