A comprehensive, secure, and offline-capable fitness center management system built with modern React technologies.
Table of Contents
β οΈ Portfolio Demonstration Project This is a frontend skills showcase demonstrating advanced React development, complex state management, and modern web technologies. NOT intended for production use β in real-world scenarios, fitness center management systems require a secure backend API, database infrastructure, and proper authentication systems.
Lotus Fitness Center Management System 2.0 is a comprehensive, offline-capable single-page application (SPA) that demonstrates professional frontend development practices. This project showcases React 18 patterns, TypeScript type safety, Context API state management, localStorage persistence, and modern UI/UX design β all the skills needed for building complex web applications.
- βοΈ React 18 Mastery: Context API with useReducer pattern, split contexts for performance optimization
- π· TypeScript Excellence: Full type safety with strict mode, comprehensive interface definitions
- π Data Visualization: Interactive Recharts integration with real-time analytics
- π¨ Modern UI/UX: Tailwind CSS + DaisyUI components with Framer Motion animations
- πΎ State Persistence: Advanced localStorage management with quota monitoring and data optimization
- π± PWA Implementation: Offline-first design with service worker registration
- π Excel Export: Professional report generation using xlsx library (9 report types)
- π Client-side Auth: localStorage-based authentication flow (educational demonstration)
- β‘ Performance: Optimized bundle splitting, React 18 concurrent features, SWC compilation
- π§ͺ Testing: Comprehensive Vitest suite for business logic and state management
- π― CRUD Operations: Complete member/trainer/class lifecycle management with inline editing
- React 18 with latest features and concurrent rendering
- Full TypeScript support for type safety
- Modern CSS framework with DaisyUI components
- Lightning-fast build tool with SWC compiler
- Advanced state management with useReducer pattern
- Smooth animations and page transitions
- Interactive data visualization and analytics
- Modern routing with React Router v7
- Modern date utility library
- Beautiful toast notifications
- Fast unit testing framework
To get a local copy up and running follow these simple steps.
- Bun (recommended) or npm
or
curl -fsSL https://bun.sh/install | bashnpm install npm@latest -g
-
Clone the repo
git clone https://github.com/FalconEthics/Lotus_Fitness_Center_Management_System.git
-
Navigate to the project directory
cd Lotus_Fitness_Center_Management_System -
Install dependencies
bun install # or npm install -
Start the development server
bun run dev # or npm run dev -
Open your browser and navigate to
http://localhost:5173
- Username:
admin - Password:
lotus2024
- First Login: Use the default credentials to access the system
- Change Credentials: Immediately change username and password in Profile settings
- Import Demo Data (Optional): Import the comprehensive demo dataset from
public/lotus-fitness-demo-2025.jsonvia Profile β Data Management - includes realistic 2025 data with proper class capacity ratios - Start Fresh: Begin adding members, trainers, and classes from scratch
Member Management:
- Add new members with complete profile information
- Track membership status (Active, Expired, Trial, Suspended)
- Monitor membership renewals and expiry alerts
- Generate membership cards and receipts
Class Scheduling:
- Create classes with trainer assignments
- Set capacity limits and enrollment management
- Track class popularity and attendance rates
- Calendar view with drag-and-drop functionality
Attendance Tracking:
- Mark daily attendance for members
- Generate attendance reports and analytics
- Track attendance trends and patterns
- Export attendance data for analysis
Analytics & Reporting:
- Real-time dashboard with key metrics
- Revenue tracking by membership plans
- Member demographics and statistics
- Class popularity and utilization reports
- Excel export with 9 professional report types
- Date range filtering for comprehensive analysis
- Context API Pattern: Split contexts (state/dispatch) to prevent unnecessary re-renders
- useReducer Pattern: Centralized state updates with type-safe action creators
- Selector Hooks: Performance-optimized data access with memoization
- Immutable Updates: Proper state immutability using spread operators
- localStorage Persistence: Automatic state synchronization with local storage
- Client-side Auth Flow: localStorage-based authentication system demonstration
- Session Management: Session handling with expiration and validation
- Password Management: Change password functionality with validation
- Protected Routes: HOC pattern for route protection
Note: This implements client-side authentication for demonstration purposes only. Production applications require backend authentication with JWT tokens, secure password hashing (bcrypt/argon2), HTTPS, CSRF protection, and proper session management on the server side.
The project includes comprehensive tests for business logic and security features.
# Run all tests in watch mode
bun run test
# Run tests once without watch
bun run test:run
# Run tests with UI
bun run test:ui
# Run tests with coverage
bun run test:coverage- Authentication System: Login, logout, password management, session handling
- Business Logic: Data validation, member management, class scheduling
- Data Management: Import/export, localStorage operations, storage quota management
- Storage Utilities: Data compression, size optimization, quota monitoring
- Edge Cases: Error handling, corrupted data recovery, validation failures
- Frontend: React 18 with TypeScript (strict mode)
- Build Tool: Vite with SWC compiler for fast builds
- Styling: Tailwind CSS + DaisyUI components + Framer Motion
- State Management: React Context API with useReducer pattern
- Routing: React Router v7 with protected routes
- Data Visualization: Recharts for interactive analytics
- Storage: Advanced localStorage management with quota monitoring
- Testing: Vitest + Testing Library + jsdom (67 tests)
- Bundle Optimization: Manual code splitting (vendor, router, ui, charts, utils)
src/
βββ components/ # Reusable UI components
βββ contexts/ # React Context providers
βββ hooks/ # Custom React hooks
βββ Pages/ # Page components
βββ types/ # TypeScript type definitions
βββ utils/ # Utility functions (including storageManager)
βββ tests/ # Test files
βββ assets/ # Static assets
- βοΈ Advanced React Patterns: Split Context API, custom hooks, HOC pattern, performance optimization
- π· TypeScript Mastery: Strict mode, comprehensive interfaces, type-safe reducers
- π± PWA Implementation: Service workers, offline capability, install prompts
- π¨ Modern UI/UX: DaisyUI components, Framer Motion animations, responsive design
- π Data Visualization: Recharts integration with 6+ chart types, real-time updates
- β‘ Performance: React 18 concurrent features, bundle optimization, lazy loading
- πΎ State Management: Context + useReducer with localStorage persistence (5 entities, auto-save)
- π§ͺ Testing Culture: 67 tests covering business logic, state management, edge cases
- π Data Operations: JSON import/export, Excel report generation (9 types), backup/restore
- π Theming: Light/dark mode with system preference detection
- π± Responsive Design: Mobile-first approach with Tailwind CSS utilities
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- 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
Distributed under the GNU License. See LICENSE.txt for more information.
~ wanna checkout my other projects: https://github.com/FalconEthics
This project showcases modern React development practices, advanced frontend architecture patterns, and professional-grade application development. It demonstrates expertise in:
- Frontend Architecture: Context API state management, custom hooks, HOC patterns
- TypeScript: Strict typing, interface design, type-safe reducers
- Performance Optimization: Bundle splitting, React 18 features, lazy loading
- Modern Tooling: Vite + SWC, Vitest testing, Tailwind CSS
- User Experience: Responsive design, animations, accessibility
- Best Practices: Code organization, testing culture, documentation
Important: This is a frontend demonstration project. Real-world fitness center systems require:
- Backend REST/GraphQL API
- Database (PostgreSQL/MongoDB)
- Server-side authentication (JWT, OAuth)
- HTTPS/SSL certificates
- CORS configuration
- Rate limiting & security middleware
- Cloud infrastructure (AWS/GCP/Azure)